[React/TS] CRA에서 Path alias 설정하기

1. 문제점

기존 코드에서 import할 때 경로가 너무 길어지는 문제를 발견했다.
../../../로 불러오는 방식을 직관적이고 간단하게 바꿀 수 있는 path alias로 바꾸기로 결정했다.

2. 해결 과정

2.1. Path Alias란

• 경로에 별칭을 붙인다는 뜻
• "../../../recoil/SuryveyState"과 같은 경로를 "@recoil/SuryveyState" 형식으로 변경할 수 있음

2.2. tsconfig 설정

컴파일 시 path alias를 인식할 수 있도록 typescript 컴파일러에게 설정할 path alias를 알려줘야 한다.

tsconfig.json에 직접 path를 설정하는 게 아니라, 별도의 파일에 설정해야 한다. 직접 path 설정하면 이런 에러가 발생한다...(경험담)

ERROR in ./src/components/survey/Accordion/question4/index.tsx 8:0-77

  Module not found: Error: Can't resolve '@/components/common/RadioBtn/RadioButtonGroup' in 'C:\Users\(주소)\src\components\survey\Accordion\question4'

기존 tsconfig.json 파일에 paths를 정의해주면 설정이 적용되지 않기 때문에 별도의 파일을 생성해 줘야 한다.

tsconfig.paths.json이라는 파일을 tsconfig.json과 같은 위치에 생성하고, 그 안에 path를 정의해줬다.

// tsconfig.paths.json

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@api/*": ["api/*"],
      "@assets/*": ["assets/*"],
      "@components/*": ["components/*"],
      "@fonts/*": ["fonts/*"],
      "@hooks/*": ["hooks/*"],
      "@pages/*": ["pages/*"],
      "@recoil/*": ["recoil/*"],
      "@styles/*": ["styles/*"],
      "@/types/*": ["types/*"],
    },
  }
}

사용할 폴더에 따라 커스텀해서 사용하면 된다.
types의 경우 @types로 사용하면 컴파일 에러가 발생한다. @types는 TypeScript의 DefinitelyTyped 선언 파일들을 위한 경로라서 발생하는 문제이다. 따라서 @types 대신 @/types를 사용했다.

다음으로 tsconfig.json에 확장 경로 파일을 추가해줬다.

// tsconfig.json

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

2.3. craco 설치

다음으로 프로젝트 빌드 시에도 path alias를 보고 올바른 경로를 찾을 수 있도록 웹팩에도 path alias를 알려줘야 한다.
웹팩에서 path alias 설정은 webpach.config.js 파일을 변경해줘야 하는데 CRA로 만든 프로젝트라면 eject를 해야 해당 파일이 나타난다.

eject를 하지 않고 webpack 설정을 확장하기 위해 craco 라이브러리를 사용했다.

craco 라이브러리 NPM 링크

craco는 Create React App Configuration Override의 약자로, eject 없이 cra의 편리함과 자유로운 커스터마이징을 누리자!라는 취지로 만들어진 라이브러리다.

craco를 설치해준다.

npm install @craco/craco

그 다음 웹팩 플러그인인 tsconfig-paths-webpack-plugin을 사용하면 간편하게 path alias를 설정해줄 수 있다.

tsconfig-paths-webpack-plugin NPM 링크

npm install -D tsconfig-paths-webpack-plugin

tsconfig-paths-webpack-plugin는 tsconfig.json에서 설정한 path를 웹팩에 그대로 설정해주는 플러그인이다.

2.4. craco.config.js 파일 생성

package.json과 동일한 위치에 craco.config.js 파일을 만들어준다.

2.5. package.json 수정

package.json 파일의 scripts에서 react-script를 호출하는 부분을 craco로 변경해준다.

// package.json

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

2.6. craco 설정 파일 수정

craco.config.js에서 웹팩 설정을 재정의해주면 된다.

// craco.config.js

const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

module.exports = {
  plugins: [
    {
      plugin: {
        overrideWebpackConfig: ({ webpackConfig }) => {
          webpackConfig.resolve.plugins.push(new TsconfigPathsPlugin({}));
          return webpackConfig;
        },
      },
    },
  ],
};

여기까지 끝났다면 아래와 같이 깔끔한 코드를 사용할 수 있다!

3. 참고

https://leego.tistory.com/entry/React-CRA%EC%97%90%EC%84%9C-Path-alias-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0