[헬스 다이어리 앱 개발] 5편 - 절대 경로 설정하기

개발의 편의를 위해 import 방식을 상대 경로에서 절대 경로로 변경하자.

 

기존엔 import 할 때 아래와 같이 상대 경로로 불러왔다.

import Calendar from '../Calendar';

 

상대 경로의 단점은 파일 위치를 변경하면 import하는 파일들의 경로도 다 변경된다는 점이다.

바뀐 경로를 하나하나 수정하는 작업은 매우 번거롭고 복잡하다.

따라서 절대 경로로 변경해주자.

 

 

babel-plugin-module-resolver

절대 경로를 사용하기 위해선 module-resolver라는 바벨 플러그인을 설치해야 한다.

$ yarn add -D babel-plugin-module-resolver

 

설치해준뒤 babel.config.js 파일을 아래처럼 작성해준다.

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

기존에 있던 babel 설정에 설치한 module-resolver 플러그인을 추가했다.

그리고 root를 최상단 디렉토리(.)로 설정한다.

 

이렇게만 하면 절대 경로를 사용할 수 있다.

src > components > Calendar.js의 Calendar 컴포넌트를 절대 경로로 import 하고 싶다면

import Calendar from 'src/components/Calendar'

위처럼 불러오면 된다.

절대 경로를 설정하면 해당 파일의 위치가 바뀌더라도 import 하는 파일들의 경로를 수정할 필요 없다.

 

 

jsconfig.json 파일 설정

절대 경로 설정은 완료했으니 불편한 점이 있다.

원래 상대 경로를 사용했을 때는 import하는 파일을 cmd키를 누르고(윈도우는 ctrl) 클릭하면 해당 파일이 자동으로 열렸다.

하지만 절대 경로로 변경하니 이 기능이 되지 않았다.

 

따라서 jsconfig.json 파일 설정을 통해 위의 기능을 다시 되게 해줬다.

최상단에 jsconfig.json 파일을 하나 만들어주고 아래 처럼 작성한다.

{
  "compilerOptions": {
    "baseUrl": "."
  }
}

baseUrl은 babel.config.js의 root와 같게 해야한다.

 

요렇게 절대 경로 설정을 완료했다!!