React 절대경로 설정

사용법

1. .env 파일 사용

NODE_PATH=src

• package.json 명령어 수정

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

• 하지만 .env 사용하면 아래와 같은 경고를 주니 다른 방법으로 합니다.

  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

2. tsconfig.json or jsconfig.json

• package.json 명령어 수정할 필요 없음

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

3. craco 사용 (Create React App Configuration Override)

npm eject 하지 않고 웹팩 모듈 설정이 가능한 라이브러리

• 모듈 추가

yarn add @craco/craco
yarn add craco-alias -D

• package.json 명령어 수정

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

• 루트에 jsconfig.paths.json 생성

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

• jsconfig.json "extends": "./jsconfig.paths.json" 옵션을 추가

{
  "extends": "./jsconfig.paths.json",
  ...
}

• craco.config.js 추가

const CracoAlias = require('craco-alias');

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: 'tsconfig',
        // as you know, CRA doesn't allow to modify tsconfig's compilerOptions
        // so you should create a separate JSON file and extend tsconfig.json from it
        // and then just specify its path here:
        tsConfigPath: 'tsconfig.paths.json',
      },
    },
  ],
};

간단하게 루트 경로만 수정하는 작업이라 jsconfig.json 파일 방법만 사용했지만 나중에 설정 파일을 수정하는 일이 생기면 craco를 써봐야겠다...!

---

참고 사이트

https://www.npmjs.com/package/@craco/craco
https://velog.io/@huhu/CRA%EC%97%90%EC%84%9C-%EC%A0%88%EB%8C%80%EA%B2%BD%EB%A1%9C%EB%A1%9C-import%ED%95%98%EA%B8%B0