craco를 사용하여 tsconfig 파일 옵션 설정

프로젝트에 타입스크립트를 적용하면서 tsconfig 파일을 수정하려는데 cra로 만들다보니 react-script start 될때 tsconfig 파일이 자꾸 덮어씌워졌다.. 찾아보니 craco를 사용해서 tsconfig 파일에 옵션을 줄 수 있다고 한다.

Craco란?

Craco(Create React App Configuration Override)는 create-react-app(CRA)을 쉽게 설정하기 위해 만들어졌다.

CRA에서 eject를 하지 않아도 root 폴더에 craco.config.js를 추가함으로 여러 설정을 할 수 있다.

아래에선 타입스크립트에서 import시 절대 경로로 설정하는 방법에 대해 썼습니다.

적용 방법

1. craco 설치

$ yarn add @craco/craco 
$ yarn add craco-alias -D

2. 루트 경로에 craco.config.js 생성

const CracoAlias = require('craco-alias');

module.exports = {
  
    plugins: [
        {
            plugin: CracoAlias,
            options: {
                source: 'tsconfig',
                baseUrl: './src',
                // as you know, CRA doesn't allow to modify tsconfig's compilerOptions
                // so you should create a separate JSON file and extend tsconfig.json from it
                // and then just specify its path here:
                tsConfigPath: 'tsconfig.paths',
            },
        },
    ],
};

3. tsconfig.path.json 파일 생성

{
  "compilerOptions": {
      "baseUrl": "src",

      "paths": {
          "~components/*": ["components/*"]
       },
   }
 }

4. tsconfig.json 파일에 추가

...
"extends": "./tsconfig.paths",
...

이렇게 설정 해 주면

결과

import시 이렇게 쓸 수 있습니다!