[Typescript] CRA로 만든 Typescript 프로젝트에 절대경로 적용하기 (feat. Craco)

에러 마주하기

파일마다 있던 상대경로가 너무 가독성이 떨어져 해결할 방법을 찾아보다 tsconfig.json에 있는 compilerOptions에 baseUrl과 paths를 지정하면 해결이 된다는 글을 보고 '어라 꽤 쉽네?' 하고 수정 시작.

수정하고 바로 npm start로 실행

해결방법

Craco 설치

Craco 란? 'Create React App Config Override'의 줄임말으로 eject없이 cra설정을 바꿀수 있게 해준다.

이미 CRA를 설치하였기 때문에 CRA를 다시 설정하기위해서는 eject하여 설정파일을 바꾸어야했지만 이 라이브러리와 함께라면 그럴 필요가 전혀없다.

npm i @craco/craco
npm i craco-alias

적용하기

우선 Craco설치가 완료되면 package.json를 수정하자

// package.json

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

수정이 완료 되었다면 tsconfig.paths.json을 생성하여 tsconfig.json에 있었던 경로 설정을 여기에 대신 작성해준다.

// tsconfig.paths.json 

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

그리고 craco.config.js파일을 생성하여 설정정보를 작성한다.

// craco.config.js 

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

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: "tsconfig",
        tsConfigPath: "tsconfig.paths.json", 
      },
    },
  ],
};

tsConfigPath에 경로정보를 작성하였던 tsconfig.paths.json파일을 명시한다.
마지막으로 tsconfig.json파일을 수정해준다.

// tsconfig.json

"extends": "./tsconfig.paths.json",
"include": ["src", "craco.config.js"]

여기서 extends란 상속받을 다른 base file을 명시해 주는 것이다. 설정들은 base file이 우선 load되고, 상속하는 file이 override하게 동작한다.

해결

잘 동작한다 ✨

예전부터 시도해보고 싶었던 설정이였는데 에러도 해결해보고 config설정에 대해서도 공부해보고 좋은 기회였다!