[TypeScript] CRA에서 tsconfig 절대경로 지정하기

Today, What I learned?

코드리뷰 피드백 중 하나였던 상대경로를 절대경로로 변경해 보기 도전 과정을 기록해 본다.. 👀

타입스크립트에 CRA로 만들어진 패키지다보니 변경해 보기가 또 여간 쉬운 일이 아니었다!..

피드백!

 

 

첫 시도

처음엔 tsconfig.json에 baseUrl과 paths를 추가해주었다.
하지만 CRA로 생성된 타입스크립트 프로젝트인지라 단순히 tsconfig.json에 몇몇 설정을 추가해 주는 것으로 끝나지 않았다.

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

 

왜냐!.. CRA는 기본적으로 간결한 디렉터리 구조를 위해 웹팩 설정이 들어있는 파일들을 숨겨놓고 있다.
이 파일들을 커스텀 하고 싶다면 eject를 통해서 추출해서 변경해야 한다.

 

eject를 하면 무엇이 문제인가??

• 한 번 추출하고 나면 설정과 관련된 scripts 폴더, config.. pacakage.json의 의존성 등 파일들이 노출된다.
• 한 번 추출되면 되돌릴 수 없다 (!!)
• 버전업에 대한 업그레이드 불가능..
• 디렉토리 구조가 복잡해져 설정하려는 부분을 찾기가 힘들다.

 

고로 다른 방법을 찾아 떠났다.

 

 

두 번째 시도

참고글을 바탕으로 craco 라는 패키지를 설치해 보기로 했다. craco는 Create-React-App Configuration Override의 약자로, 위에서 언급한 eject 없이도 여러 설정을 오버라이딩 할 수 있는 패키지다.

 

아래의 명령어로 설치할 수 있다.

$ npm install @craco/craco --save
$ yarn add @craco/craco

 

 

이렇게 설치한 후에는 package.json의 react-scripts start 이런 식으로 되어있던 script를 craco로 변경해주어야 한다.

// package.json
...
"scripts": {  
    "start": "craco start",  
    "build": "craco build",  
    "test": "craco test",  
    "eject": "craco eject"  
}

 

 

참고글에 따르면 현재 craco-alias는 더 이상 사용할 수 없는 패키지이기 때문에 (2023.02월 기준) react-app-alias 라는 라이브러리로 이를 대체하여 사용할 수 있다고 한다. (이 패키지가 좀 더 확장된 패키지인듯??) CracoAliasPlugin 요 부분을 react-app-alias에서 가져올 수 있다.

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

module.exports = {
  plugins: [
    {
      plugin: CracoAliasPlugin,
      options: {
        source: 'tsconfig',
        baseUrl: '.',
        tsConfigPath: './tsconfig.paths.json',
      },
    },
  ],
};

 

 

paths를 좀 더 세분화해서 쓸 수도 있다. @components 요런 식으로.. 나는 일단 상대경로 앞의 ../../../ 부분만 없애보려고 이렇게 적용해 보았다.

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

tsconfig.json에 작성했던 tsconfig.paths.json 파일을 extends로 추가해 준다.

// tsconfig.json
{
  "compilerOptions": {
    ...
  },
  "include": ["src", "src/utils/Api.ts"],
  "extends": "./tsconfig.paths.json"
}

 

이렇게 적용했을 때 아래와 같은 식으로 절대경로를 이용할 수 있다!

import { getSearchVideos } from '@/redux/modules/MediaSlice';

 

 

 

참고

[TS] CRA에서 tsconfig paths로 절대경로 설정하기 (react-app-alias)

 

[오늘의삽질#2] CRA 환경에서 tsconfig 절대경로 설정