React 상대경로 -> 절대경로 변경
avatar

BoBeen Lee

April 4, 2018

상대경로 설정 시 문제점

import utils from '../../../../utils/my-utils';

와 같이 패키지 구조가 깊어질 경우 임포트하기 번거로워지게 된다.

import utils from 'utils/my-utils';

와 같이 간단하게 임포트할 수 없을까?

지정된 절대경로로 임포트하기

상대경로를 지정된 절대경로로 바꾸는 방법은 세가지 정도 있는듯하다.

  • Babel
  • Webpack, Fusebox, ... ( module bundlers )
  • create-react-app, create-react-app-ts

Babel

  • React Native, React
    • babel플러그인을 이용하여 설정을 하면 간단하게 해결할 수 있다. 
      "plugins": [
    "transform-react-jsx-source",
    [
      "module-resolver",
      {
        "alias": {
          "~/*": "./src"
        },
        "cwd": "babelrc"
      }
    ]
  ]
      위와같이 .babelrc 설정을 해주면 src폴더 기준 '~/utils/my-utils'가 가능하다. babel을 이용하는 프로젝트라면 리액트가 아니더라도 사용가능하여 가장 간단한 해결방안인듯 싶다.
    • 샘플소스

Webpack, Fusebox

  • Webpack
    • webpack.config.js 설정
     resolve: {
   modules: [
     path.join(__dirname, "src"),
     "node_modules"
   ]
 }
  • Fusebox
    • fuse.js에 homeDir 설정
     FuseBox.init({
   homeDir: "src",
   ...
    처럼 homeDir만 지정해주면 homeDirectory기준 '~/utils/my-utils'가 가능하다.

create-react-app, create-react-app-ts

  • .env파일에 NODE_PATH=src/ 설정만 하면 끝.
  • 샘플소스

VSCode path 설정.

자바스크립트일 경우 jsconfig.json 타입스크립트일 경우 tsconfig.json 설정을 따로 해줘야한다.

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

Pitfall