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

(2022.02.14 수정)

 

 

 

 

이전 프로젝트에서는 괜찮았으나, 이번 React-Query 프로젝트에서는 Atomic system에서 착안한 새로운 폴더 구조를 시도해본 만큼 코드 상단의 무수한 ../../../ 들이 신경 쓰이기 시작했다.

 

 

그동안 미뤄왔던 path alias를 설정을 드디어 프로젝트에 적용했고, 그 과정을 여기에 기록해보려 한다.

(‘미루고 미루다가 드디어 적용한 것’이라 말하니 뭔가 엄청난 작업을 해야 할 것 같지만 사실 설정은 매우 간단하다.)

 

 

 

 

Path Alias란

path alias는 경로에 별칭을 붙인다는 뜻으로,

path alias를 사용하면 "../../../hooks/quires/useMovieDetail"과 같은 경로를

"@hooks/quires/useMovieDetail" 이런 식으로 훨씬 깔끔하게 만들 수 있다.

 

 

 

 

tsconfig 설정

먼저, 컴파일 시 path alias를 인식할 수 있도록 typescript 컴파일러에게 우리가 설정할 path alias를 알려주자.

 

이때 주의할 점은 tsconfig.json에 직접 path를 설정하는 것이 아닌, 별도의 파일에 설정해야 한다는 것이다.

// tsconfig.paths.json

{
    "compilerOptions": {
      "baseUrl": "src",
      "paths": {
        "@apis/*": ["apis/*"],
        "@assets/*": ["assets/*"],
        "@atoms/*": ["components/atoms/*"],
        "@blocks/*": ["components/blocks/*"],
        "@pages/*": ["components/pages/*"],
        "@hooks/*": ["hooks/*"],
        "@styles/*": ["styles/*"],
        "@utils/*": ["utils/*"],
      },
    }
}

cra는 start시 tsconfig.json 에서 몇몇 설정만을 남겨놓고 초기화시키는데, path설정은 이때 지워지는 설정 중 하나이다.

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

 

여기에서는 tsconfig.paths.json 이름의 파일을 새로 생성하고 그 안에 path를 정의해주었다.

 

 

// tsconfig.json

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

마지막으로 tsconfig.json에 확장 경로 파일을 추가해주었다.

 

 

제대로 설정이 되었다면, path alias 사용했을 때 에디터 상에서 나타나는 에러 표시가 사라졌을 것이다.

 

 

 

 

 

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

 

 

crago 설치

 

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

 

@craco/craco

@craco/craco

 

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

 

 

npm install @craco/craco

먼저 craco를 설치해준다.

 

보통 path alias 설정을 위해 craco를 설치하면서 craco-alias 도 같이 설치하는데,

craco-alias는 현재 더 이상 지원되지 않는다.

 

 

 

 

 

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

 

npm install -D tsconfig-paths-webpack-plugin

 

https://www.npmjs.com/package/tsconfig-paths-webpack-plugin

tsconfig-paths-webpack-plugin

 

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

 

 

 

 

 

craco.config.js 파일 생성

 

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

project_name
  ├── node_modules
+ ├── craco.config.js
  └── package.json

 

 

 

 

package.json 수정

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

// package.json

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

 

 

 

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;
        }
      }
    }
  ]
};

 

 

 

 

 

 

 

 

코드가 훨씬 깔끔해졌다!

 

 

 

 

 

📌

https://plusreturn.com/blog/how-to-configure-a-path-alias-in-a-react-typescript-app-for-cleaner-imports