[React] Craco를 이용하여 Typescript Path alias 설정하기

컴포넌트나 소스파일들을 import 해올 때에는 해당 파일의 위치를 경로를 통해 명시해야 합니다. 하지만 프로젝트의 규모가 커질수록 불러오는 path의 경로가 난잡해지기 마련입니다.

특히 새로운 파일을 생성하거나 이미지를 추가하였을 때 해당 파일이 사용되는 곳에 경로를 추가하는 작업은 끔찍한 경험 중 하나입니다.. 

이 때 오늘 배울 절대 경로를 사용한다면 보다 간결하고 직관적인 방식으로 경로를 추가할 수 있습니다. 

 

오늘은 React의 대표적인 오버라이딩 패키지인 Craco를 설치하고, 이를 이용하여 Typescript Path alias를 설정하는 방법에 대해 알아보겠습니다. 

 

Craco 소개

CRA(Create-React-App)은 기본적으로 디렉터리 구조를 간결하게 하기 위해 WebPack설정이 들어있는 config와 script폴더들을 숨겨놓습니다.

이를 커스텀하고 싶다면 npm run eject를 이용해서 숨겨진 config와 script폴더를 추출하는 방법을 사용해야 하지만, 이렇게 추출된 폴더 및 파일들은 디렉토리 상에 노출되며 이전 상태로 돌아 갈 수 없다는 단점이 있습니다. 또한 이로 인해 디렉터리 구조가 복잡해지고, 필요한 설정을 찾기도 힘들어집니다. 

Craco는 Create-React-App Configuration Override의 약어로, 말 그대로 CRA에 config 설정을 덮어쓰기 위한 패키지입니다.

이는 Webpack의 번거로운 설정을 줄이기 위해 등장한 오버라이딩 패키지 중 하나로, 이 외에도 react-app-rewired 등의 오버라이딩 패키지가 많이 사용됩니다. 

 

적용 방법

1. tsconfig.paths.json 작성

tsconfig.paths.json 파일을 작성해줍니다. path에 따라 사용할 alias를 지정해주는데 일반적으로 가독성과 에러 방지를 위해 src 하위의 디렉터리 단위로 설정해줍니다.

// 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/*"],
      "@components/*": ["components/*"]
    }
  }
}

위의 코드는 리액트 표준 폴더구조를 기준으로 작성하였습니다. 

실제 프로젝트에 적용할 경우 본인이 사용하는 폴더 구조에 따라 커스텀해서 사용하면 됩니다.

본 코드에서는 src 디렉토리를 baseUrl로 설정하였지만, 경우에 따라 root 디렉토리를 baseUrl로 설정하여 사용할 수도 있습니다. 

 

2. tsconfig.json 설정

앞서 작성한 tsconfig.paths.json 파일의 사용을 위해 tsconfig.json에 extends 프로퍼티를 다음과 같이 추가해줍니다.

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

 

3. Craco 설치 및 파일 설정

먼저 craco를 설치합니다.

yarn add craco
yarn add tsconfig-paths-webpack-plugin

craco를 성공적으로 설치하였다면, 프로젝트 최상단 경로(루트 디렉토리)에 craco 설정파일을 추가해줍니다.

// craco.config.js
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

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

 

4. package.json 설정

마지막으로 package.json의 scripts 프로퍼티를 다음과 같이 수정해줍니다.

// package.json
{
    ...
  "scripts": {
    "start": "craco start",
    "build:dev": "craco start",
    "build:prod": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
    ...

}

 

사용법

아래의 폴더 구조를 가지는 리액트 프로젝트가 있다고 가정해보겠습니다.

src

├── components

 │        ├── Chatting.tsx

 │        └── Chatting.styled.tsx

├──  assets 

├──  hooks (= hoc)

├── pages

 │        └── ChattingList.tsx

├── constants

├── config

├──styles

├── services (= api)

├── utils

├── contexts

├── App.tsx

└── index.tsx

 

pages/ChattingList.tsx에서 components/Chatting.tsx를 불러오는 상황을 비교하면 다음과 같습니다. 

 

Path alias 사용 전

import { Chatting } from ‘../components/Chatting;

 

Path alias 사용 후

import { Router } from ‘@components/Chatting;

 

 

마치며

지금까지 React에 Craco를 설치하고, 이를 이용하여 Typescript Path alias를 설정하는 방법에 대해 알아보았습니다.  

 

최근 프로젝트를 진행하여 리액트 폴더 구조에 맞게 프로젝트 폴더 구조를 변경하는 작업을 진행하였습니다. 그 과정에서 img폴더를 src 하위 디렉토리가 아닌 assets 하위 디렉토리로 위치를 하였습니다. img 폴더에는 수십개의 img 파일이 있었기 때문에 해당 파일들이 사용되는 파일들에 일일이 상대경로를 수정하는 작업을 진행하며 어려움을 겪곤 했습니다. 

 

Typescript로 CRA를 할 때 프로젝트 초기 세팅 작업으로 위 방법을 적용한다면 초반에는 할 일이 늘어 번거롭겠지만 프로젝트를 진행하는 내내 직관적인 절대 경로를 사용하여 보다 편리하게 작업을 진행할 수 있을 거 같습니다. React에서 Path alias를 설정하는데 반드시 Craco를 사용해야 하는 것은 아닙니다. 하지만 Craco를 이용하여 세팅을 진행하는 방식이 가장 간단하고 편리한 거 같아서 이번 포스팅을 통해 소개드렸습니다. 

다음 프로젝트에선 Craco를 이용하여 Path alias를 설정해보시는건 어떨까요 ?

 

 

참고

https://velog.io/@k0310kjy/React-typescript-Path-alias-%EC%84%A4%EC%A0%95  

React + typescript Path alias 설정

https://freestrokes.tistory.com/167 

React Craco 설정하기

https://www.npmjs.com/package/@craco/craco 

@craco/craco

https://velog.io/@artlogy/1.-Craco-Webpack%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0   

https://abangpa1ace.tistory.com/entry/Craco-CracoCreate-React-App-Configuration-Override-%EB%9E%80