[rn] 커스텀 경로 설정으로 상대경로를 절대경로로 사용하자.😁

상대 경로(relative path)를 커스텀 경로(custom path)로 변경하자.

[Before]

import * as realApi from '../../../../
    ../../../../../../../../../../../
    ../../../../../../../../../../../
    ../../../../../../../../../../../
    ../../../../../../../../../../../
    ../../../../../library/apis/interview';

[After]

import * as realApi from '@/library/apis/interview';

 

조금 과장해서 표현하긴 했지만

프로젝트의 규모가 점점 커지면서 import 하는 모듈의 상대 경로가 깊고 복잡해져 갔다.

상대 경로를 사용하면 경로만 보고 파일의 위치와 계층 관계를 쉽게 가늠할 수 있지만

프로젝트 구조변경으로 파일을 이동한다던지,

새로운 파일을 만들 때 경로를 직접 계산해서 import 하는 것에 불편함을 느낄 때가 있다.

기존에 Node 프로젝트에 적용해본 경험이 있기 때문에

Typescript 사용 시 설정 부분, 빌듯이 설정 부분을 유의하며 적용해주었다.

 

- 주요 패키지 버전 정보
react-native 와 typescript 를 사용중

"react": "17.0.2",
"react-native": "0.66.0"
"@babel/core": "^7.12.9",
"metro-react-native-babel-preset": "^0.66.2",
"typescript": "^3.8.3"

 

- babel-plugin-module-resolver 패키지 설치

yarn add --dev babel-plugin-module-resolver

 

- babel.config.js
plugins 설정 추가

module.exports = {
  plugins: [
    [
      'module-resolver',
      {
        root: ['.'],
        extensions: ['.ios.js', '.android.js', '.js', '.jsx', '.ts', '.tsx', '.json'],
        alias: {
          '@': './src',
          '@library': './src/library'
        },
      },
    ],
  ],
};

 

- tsconfig.json
baseUrl, paths 설정 추가

{
  "baseUrl": ".",
  "paths": {
    "@/*": ["./src/*"], // 소스코드에서 import 할 때 사용할 경로 설정
    "@library/*": ["./src/library/*"] 
  },
}

 

- 커스텀 경로 사용

import * as realApi from '@/library/apis/interview';

 

- cache 가 있을 경우 cache reset

yarn start --reset-cache

 

---

[ 에러 ]

커스텀 경로를 설정하고 애플리케이션 구동하자 다음과 같은 오류를 만났다.

{기존 경로에서 불러오던 모듈명} undefined is not an object

ex) local_nonUploadResults undefined is not an object

 

import LocalDB, { Query } from '.';
...

[ 원인 ]

커스텀 경로를 사용하기 전에는 현재 경로에 있는 index 파일의 모듈을 import할 때 from '.' 사용했지만

커스텀 경로를 설정한 경우 위와 같이 사용할 수 없다.

bable과 tsconfig 에서 root를 '.'으로 설정했기 때문이다. 

 

[ 해결 ]

from './index' 로 수정하자.

import LocalDB, { Query } from './index';
...