[오삽완] 타입스크립트 절대 경로 설정하기 (CRA+craco)

🔍 삽질

깔끔한 import문 관리를 위한 절대 경로를 설정하기 위해 tsconfig.json 파일에 path 옵션을 추가했다.

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

tsx 파일 안에서는 다음과 같이 작성했을 때 에러 없이 잘 참조하지만 로컬 서버를 띄우면 모듈을 찾을 수 없다는 에러가 발생했다.

import { MainPage } from '@/pages'; // 파일 내부에서 참조할 순 있으나, 로컬 서버에서 에러 발생!

🚀 해결

절대 경로 설정을 위해선 컴파일을 위한 tsconfig.json과 번들링을 위한 webpack 두 가지 설정을 해야하는데,

CRA로 만든 react app에서는 webpack 설정이 숨겨져 있어서 설정을 변경하기 위해선 eject해야 한다.

(eject를 하면 CRA를 통해 생성되면서 숨겨진 각종 설정 파일들이 드러나게 되고, 이는 되돌릴 수 없다.)

그래서 webpack.config.js 파일을 직접 수정하지 않고 config를 오버라이딩할 수 있는 craco 라이브러리를 사용해 해결했다.

craco와 react-app-alias 설치

config를 오버라이딩할 수 있는 craco와 path alias를 도와주는 react-app-alias를 설치한다.

npm install --save-dev craco
npm install --save-dev react-app-alias

(craco에서도 별칭을 위한 craco-alias를 제공했으나 deprecated 상태다.)

tsconfig.paths.json 파일 작성

프로젝트 최상위 폴더(node_modules 폴더 있는 곳)에 tsconfig.paths.json 파일을 생성한다.

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

tsconfig.json에 상속시키기

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

craco.config.js 파일 작성

프로젝트 최상위 폴더(node_modules 폴더 있는 곳)에 craco.config.js 파일을 생성한다.

// craco.config.js
const { CracoAliasPlugin } = require('react-app-alias');

const options = {};

module.exports = {
  plugins: [
    {
      plugin: CracoAliasPlugin,
      options,
    },
  ],
};

package.json 변경

package.json 파일의 scripts 부분의 react-scripts를 craco로 변경한다.

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

절대 경로를 설정해 두면 import 문을 깔끔하게 관리할 수 있다!

참고

https://github.com/oklas/react-app-alias