CRA 환경에서 alias 설정 방법 (craco)

CRA 환경에서 webpack 또는 다른 config 파일을 수정 하려면 eject 해야한다. 그리고 한 번 eject 하면 되돌릴 수 없다..
alias도 webpack 설정 중 하나이기에 eject를 고민하다 craco라는 패키지를 알게되어 프로젝트에 적용했다.

• 의존성 모듈 추가

npm install @craco/craco
npm install --save-dev craco-alias

• package.json script 수정

// package.json

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

• craco configure

// craco.config.js

const CracoAlias = require("craco-alias");
module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: "jsconfig",
        jsConfigPath: "jsconfig.paths.json",
      },
    },
  ],
};

• alias 추가

// jsconfig.json

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