React Native/Typescript 환경에서 절대경로 설정하는 방법

서론

대상독자

RN 개발 시, 절대경로 사용하고 싶은 개발자

학습목표

오늘은 RN Expo와 타입스크립트 환경에서 절대 경로를 설정하는 방법에 대해서 알아보겠습니다.

본론

babel-plugin-module-resolver 설치하기

yarn add -D babel-plugin-module-resolver

babel-plugn-module-resolver란 라이브러리를 설치해줍니다.

babel.config.js 수정하기

그런 뒤, babel.config.js 파일에서 해당 값에 맞게 설정해줍니다. 이 때, baseUrl로 들어가는 경로에 절대경로로 설정해주고 싶은 값이 들어가도록 설정해주는 것이 중요합니다.

module.exports = function () {
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "module-resolver",
        {
          root: ["./"],
          extensions: [".ios.js", ".android.js", ".js", ".ts", ".tsx", ".json"],
          alias: {
            "~presentation": "./presentation",
          },
        },
      ],
    ],
  };
};

tsConfig.json 수정하기

그리고 바벨에서 바라보는 경로를 baseUrl에 지정해줍니다. 호출하고 싶은 파일의 이름을 key 값에 적고, 파일의 경로를 value로 넣어줍니다. 이 때 pahts라는 항목에 해당 경로를 추가해주지 않으면, 경로를 불러올 수는 있지만 타입 체커에서 해당 모듈 경로를 인식하지 못해 빨간줄이 뜨게 됩니다. 따라서 추가해주는 것이 중요합니다.

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
        "~presentation/*": ["presentation/*"]
    },
  }
}

기존 캐쉬 제거하기

마지막으로 metro 혹은 expo에 저장되어 있는 캐쉬를 제거하여 새로운 파일로 빌드해, 서버를 실행해줍니다.

// expo app 
expo r -c (expo)

// bare react native app
npm run start --reset-cache

파일의 경로를 수정한 후, expo 혹은 metro 서버를 다시 실행해줍니다. 정상적으로 작동하는 것을 확인하실 수 있습니다.