[Front end] React 절대경로 설정

React를 접한 지 벌써 오랜 시간이 지났다. 오랜만에 다시 React 프로젝트를 하게 되어 node를 최신 버전으로 올려 세팅을 하던 중 절대 경로 설정이 변경이 되었다는 사실을 알았다.

Compoent나 Container를 import를 할 때 상대 경로를 사용하면 불편한이 있어 파일 구조에 맞게 절대 경로를 사용한다.

기존에는 package.json NODE_PATH에 src를 지정하여 절대 경로를 사용하였다.

• window이면 cross-env 모듈 필요
• mac이면 cross-env 모듈 불필요

package.json

"scripts": {
    "start": "cross-env NODE_ENV=production NODE_PATH=src react-scripts start",
    "build": "cross-env NODE_PATH=src react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },

위와 같이 설정하면 아래와 같은 warring 문구가 나온다.

Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.

 

앞으로 릴리즈 될 create-react-app에서는 NOTH_PATH가 제거될 예정이며 jsconfig.json(tsconfig.json)을 만들어 baseUrl를 설정하라는 내용이다.

jsconfig.json

{
  "compilerOptions": {
      "baseUrl": "src"
  },
  "include": [
      "src"
  ]
}

위와 같이 파일 생성 후 VSCode를 재실행하면 절대경로 설정이 완료된다.