TypeScript Absolute Import (with. CRA)

TypeScript Absolute Import

Create-React-App(CRA)로 만든 TypeScript 프로젝트에서 절대경로로 import하는 방법

우선 절대경로로 import를 하려고 하는 이유는 딱 하나였다. 보기 지저분한 것.

그래서 import 경로를 "@"를 포함한 경로로 깔끔하게 되었으면 했다. 바로 구글링

하는 방법은 간단했다.

tsconfig.json

tsconfig.json 파일에서 아래의 코드를 넣어주면 된다.

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

이렇게 하면 절대경로로 src를 루트로 시작할 수 있게 된다. -완-

 

여기서 좀 고급져 보일려면 "@"를 추가할 수 있는데 CRA로 하게 되면 webpack에서도 설정을 해줘야 한다. 사실 전에도 "@"를 넣어서 사용해보려고 했지만 실패했다.

그래서 다시 구글링

Craco

Craco는 Create-React-App Configuration Override의 약자로 모든 구성과 스크립트를 직접 유지 관리해야 하므로 다소 번거로울 수 있는 create-react-app을 위한 쉽고 이해 하기 쉬운 구성 레이어이다.

일단 이 craco를 설치해주자.

npm i -D @craco/craco
npm i -D craco-alias

이렇게 해서 설치해주고 나면 package.json 파일을 수정해주자.

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

기존의 scripts 옵션에서 react-scripts을 craco로 변경해준다.

그리고 이전에 tsconfig.json에서 사용했던 옵션들을 같은 경로에 새로운 파일을 하나 만들어 옮겨줘야 한다.

tsconfig.extend.json

나는 파일을 tsconfig.extend.json로 만들었다.

이 파일에 아래의 코드를 넣어주자.

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

baseUrl은 루트로 할 기준 경로를 적고 paths에는 자신이 하고 싶은 것을 입맛대로 적으면 될 것 같다.

이렇게 tsconfig.json에서 extends 옵션을 사용하여 해당 파일을 넣어주자.

"extends": "./tsconfig.extend.json"

이렇게 하면 tsconfig 설정은 끝이나고 craco을 설정하면 된다.

craco.config.js

루트 위치에서 craco.config.js 파일을 만들고 아래의 코드를 넣어주면 된다.

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

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

source는 자바스크립트라면 jsconfig로 타입스크립트라면 tsconfig로 설정하면 된다.

source가 tsconfig인 경우에 tsConfigPath를 통해 이전에 만들었던 tsconfig.extend.json을 추가해주면 된다.

이렇게 모든 설정이 다 되고 나면 정상적으로 import가 되는 것을 확인할 수 있다.