CRA 절대경로

react: ^18.2.0
typescript: ^4.9.5
react-app-rewired: ^2.2.1
customize-cra: ^1.0.0

eject 후 절대경로 세팅

출처: [TS/Webpack/Jest] tsconfig paths를 사용할 때 Webpack, Jest 설정하기

이전 프로젝트에서 절대경로를 위해 eject한 적이 있다.

eject 실행

npm run eject

tsconfig.json 파일에 path를 추가

프로젝트에서 타입스크립트를 사용하고 있었기 때문에 tsconfig.json 파일에 path를 추가하였다.

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

webpack.config.json 파일 수정

추가적으로 webpack.config.json 파일 또한 수정해주었다!

module.exports = {
  // ...
  resolve: {
    alias: {
      '@component': path.resolve(__dirname, 'src/component'),
      '@container': path.resolve(__dirname, 'src/container'),
    }
  }
  // ...
}

webpack의 설정을 바꿔주는 이유는 프로젝트는 경로를 tsconfig.json 파일을 보고 인식하지만,
webpack은 경로에 대한 설정이 없기 때문에 프로젝트 실행 시 module not found 에러가 발생할 수 있다.

jest 설정 추가

추가로 package.json에 있는 jest 까지 설정을 해주어야 한다.

{
  "jest": {
    "moduleNameMapper": {
      "^@(component|container)/(.+)$": "<rootDir>/src/$1/$2"
    }
  }
}

react-app-rewired, cusomize-cra

미니 프로젝트이기에 이번 프로젝트는 eject를 하지 않은 채 절대경로를 설정할 수 있는 방법을 찾아보려고 하였다.

react-app-rewired, cusomize-cra라는 라이브러리를 아래 출처 글을 통해 찾게 되었다!

출처: [React] 절대 경로 설정 (with react-app-rewired)
문서: react-app-rewired github

프로젝트에 라이브러리 추가

npm i react-app-rewired customize-cra --save-dev

tsconfig.json 파일에 path를 추가

eject할 때와 마찬가지로 tsconfig.json 파일에 path를 추가하였다.

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

config-overrides.js 파일 추가

프로젝트 루트 디렉토리에 config-overrides.js 파일을 추가하였다.

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

module.exports = override(
  addWebpackAlias({
    '@': path.resolve(__dirname, 'src'),
    '@api': path.resolve(__dirname, 'src/api'),
    '@component': path.resolve(__dirname, 'src/component'),
    '@container': path.resolve(__dirname, 'src/container'),
  })
)

package.json scripts 수정

기존 react-scripts 라는 커맨드로 작성되어있던 전과 달리 config-overrides.js 파일을 설정에 적용하여 실행할 수 있도록 react-app-rewired 라는 커맨드로 실행시켜주도록 바꿔준다.

"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"
}