[RN][Expo] 절대경로 설정

0.  파일구조

 

* TypeScript인 경우 1,2 과정 생략하고 tsconfig.json만 설정해도 됨!

 

 

1.  babel-plugin-module-resolver 설치

babel-plugin-module-resolver는 Babel 플러그인으로,
모듈 경로를 재정의하거나 별칭(alias)을 설정하여 절대경로로 import 할 수 있게 한다.

 

• Babel
  : ES2015 이상의 최신 명세의 문법을 구형 브라우저에서도 동작하는 코드로 트랜스파일해주는 개발 도구
  : 개발 환경에서만 필요한 패키지 이므로 --save-dev 옵션이나 -dev 옵션을 추가하여 devDependencies에 설치한다.

 

 npm 문서: https://www.npmjs.com/package/babel-plugin-module-resolver

npm install --save-dev babel-plugin-module-resolver
// or
yarn add --dev babel-plugin-module-resolver

 

 

2.  babel.config.js에서 alias 설정하기

babel.config.js는 프로젝트 전체에 적용되는 설정 파일로서, 현재 작업 폴더를 루트로 지정한다.

 

보통 다음과 같은 구조로 되어있다.

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
  };
};

 

이러한 구조를 아래와 같이 변경한다

babel.config.js에서 alias 설정하면 Babel이 코드를 변환할 때 해당 경로를 올바르게 해석한다.

root 는 기준이 되는 위치이며, alias는 별칭으로 접근할 경로이다.

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'module-resolver',
        {
          root:['.'],
          extensions: [".ios.js", ".android.js", ".js", ".ts", ".tsx", ".json"],
          alias: {
            '@components': './src/components',
            '@screens': './src/screens',
            '@assets': './assets',
          },
        },
      ],
    ]
  };
};

 

 

3.  jsconfig.json 파일 생성하기 - Javascript

(TypeScript인 경우

tsconfig.json)

 

jsconfig.json 파일은 Visual Studio Code에서 모듈 경로를 해석하는 데 사용한다.

 

사용할 경로인 @components, @screens, @assets 들을 아래와 같이 추가한다.

baseUrl을 기준으로 각각의 폴더의 하위 모든 파일들을 @를 이용한 경로로 치환하는 설정이다.

이때 baseUrl과 babel.config.js에서 설정한 root와 동일해야 한다.

{
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@components/*": ["src/components/*"],
        "@screens/*": ["src/screens/*"],
        "@assets/*": ["assets/*"],
      },
    },
    "exclude": [
      "node_modules",
      "babel.config.js",
    ]
 }

 

 

4.  적용 확인 

경로 수정 후, 캐시 삭제하고 VSCode 재시작 후 다시 실행

npm cache verify
// or
yarn cache clean

 

 

 

참조

https://jw910911.tistory.com/116

React Native : 절대 경로 설정하기 (+ 타입스트립트)

https://blog.yijunho.com/184

Expo 절대 경로 설정하기 (Path Alias)

https://velog.io/@remon/React-Native-Babel-절대경로-세팅

[React Native] Babel 절대경로 세팅