Node에서 플러그인 이용해서 절대 경로 설정해주기

사진과 같이 import가 많이질수록 코드가 점전 늘어나고 복잡해진다.

이러한 문제를 해결하기 위해 절대 경로를 써준다.

../../ 다음과 같은 부분을 @ 로 고치는 방법을 서술한다.

babel 플러그인 설치

yarn add -D babel-plugin-module-resolver

or

npm i -D babel-plugin-module-resolver

babel.config.js 에 플러그인 추가

module.exports = {
  presets: ...
  plugins: [
   ...
    [
      'module-resolver',
      {
        alias: {
          '@': './src',
        },
      },
    ],
  ],
};

해당 코드의 plugins 부분에 아래와 같은 내용을 추가

[
  'module-resolver',
  {
    alias: {
      '@': './src',
    },
  },
],

tsconfig.json 수정

{
  "extends": ...
  "compilerOptions": {
        ...
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

tsconfig.json에서 compilerOptions 에 아래와 같은 내용 추가

"baseUrl": ".",
  "paths": {
    "@/*": ["src/*"]
  }

 

크진 않지만 그래도 절대경로로 줄임