[React] 절대 경로 설정 (with react-app-rewired)

1. 배경

CRA로 프로젝트를 생성하다보면 일부 기본 설정들을 건들여야할 때가 있고, 그 설정들을 건들이기 위해 eject 명령어를 통해 숨겨져 있던 모든 설정들(ex. webpack, babel etc)을 수정할 수 있다

하지만 한 번 eject를 수행하면 이전 상태로 되돌아 갈 수 없다
이는 CRA의 모든 configuration을 직접 유지보수해야하며, 작업 도중 하나의 패키지가 필요해서 설치한다거나, 삭제할 때 항상 다른 패키지들과의 의존성을 신경써야한다

반드시 Eject를 하지 않아도 기존의 CRA를 약간 customizing할 수 있는 방법이 있는데 react-app-rewired, customize-cra를 사용하면 가능하다 (하지만 이는 Eject하는 것보다 자유롭진 않다)

2. install library

npm i -D react-app-rewired customize-cra

3. modify package.json & tsconfig.json

3.1) package.json

"scripts": {
  "start": "react-app-rewired start" // "react-scripts start",
  "build": "react-app-rewired build" // "react-scripts build",
  "test": "react-app-rewired test" // "react-scripts test",
  "eject": "react-app-rewired eject" // "react-scripts eject"
}

3.2) tsconfig.json

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

4. add "config-overrides.js"

const { override, addWebpackAlias } = require("customize-cra");
const path = require("path");

module.exports = override(
  addWebpackAlias({
    "@components": path.resolve(__dirname, "src", "components"),
    "@customTypes": path.resolve(__dirname, "src", "types"),
  })
);

ref

• https://medium.com/@jsh901220/create-react-app%EC%97%90%EC%84%9C-eject%EC%82%AC%EC%9A%A9%EC%95%88%ED%95%98%EA%B8%B0-customize-cra-react-app-rewired-10a83522ace0
• https://chanyeong.com/blog/post/42