CRA + TypeScript 프로젝트 환경에서의 절대 경로 설정하기

tsconfig.json 설정을 통한 절대 경로 설정하기

기존의 import 경로를 상대경로로 설정하면 코드의 길이가 불필요하게 길어지는 단점이 있다.

이를 해결하기 위해 절대 경로를 설정하여 불필요한 코드의 길이를 줄일 수 있다.

먼저, tsconfig.json 파일의 compilerOptions에 baseUrl을 "."으로 설정하고 paths를 통해 경로를 설정해준다.

 

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

 

이 설정은 src를 루트로 했을 때는 동작하지만, src를 제외한 다른 경로로 aliasing을 시도하면 작동하지 않는 문제를 겪을 수 있다.

왜냐하면 내부 webpack 설정 때문에 절대 경로를 인식하지 못하기 때문이다.

webpack 설정을 직접 수정하려면 npm run eject (yarn의 경우 yarn eject) 명령어를 실행해야 하는데, 이는 한 번 실행하면 되돌릴 수 없어 권장하지 않는다.

대신, 이를 craco 라이브러리를 사용하면 해결할 수 있다.

 

 

craco를 통한 절대 경로 설정하기

먼저, npm i -D @craco/craco 명령어로 craco 라이브러리를 설치한다.

craco 설치가 완료되면 craco.config.js 파일을 생성하고, src 경로와 components 경로를 다음과 같이 aliasing할 수 있도록 작성한다.

 

const path = require('path');

module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src/'),
      '@components': path.resolve(__dirname, 'src/components'),
    },
  },
};

 

마지막으로 package.json 파일에서 scripts 부분의 react-scripts를 craco로 변경해준다.

 

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

 

 

절대 경로 자동완성 이슈

이후 components 폴더에 있는 Button 컴포넌트를 절대 경로로 입력하려고 할 때 자동완성이 되지 않고 상대경로로 자동완성되는 문제가 발생하였다.

이 문제를 해결하려면 jsconfig.json 또는 tsconfig.json의 compilerOptions 내부에 baseUrl과 paths를 추가해주면된다.

필자는 해당 paths와 baseUrl을 다른 파일로 분리하고 싶어 tsconfig.paths.json 파일을 따로 만들어서 다음과 같이 paths를 분리해주었다.

 

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

 

이후 extends를 통해 해당 tsconfig.paths.json 파일을 추가해주었다.

 

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

 

 

 

components 폴더에 임의의 Button 컴포넌트를 생성하고 App에서 Button 컴포넌트를 절대경로로 import 해본 결과, 정상적으로 절대경로로 자동완성해주는 것을 확인할 수 있었다.

 

 

 

 

마치면서

이번 글에서는 tsconfig.json과 craco를 활용하여 CRA + TypeScript 프로젝트에서 절대 경로를 설정하는 방법을 다루어보았다.

절대 경로 설정을 통해 기존의 상대 경로 보다 코드의 길이를 줄이면서, 생산성도 높아지고 코드 관리도 수월해지길 기대할 수 있을 것 같다.