[CRA + TypeScript] 절대 경로 설정(feat. Craco)

1. Install 'Craco'

# npm
npm i -D @craco/craco
# yarn
yarn add @caraco/craco

 

2. Update package.json 

CRA로 프로젝트를 생성했을 때 default로 생성되는 package.json파일의 "scripts" 부분을 하기와 같이 수정해줘야 합니다.

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

 

3. Create craco.config.ts

프로젝트의 root 경로에 craco.config.ts 파일을 생성합니다.

// craco.config.ts
import path from "path";

module.exports = {
  webpack: {
    alias: {
      "@components": path.resolve(__dirname, "src/components"),
      "@data": path.resolve(__dirname, "src/data"),
      "@hooks": path.resolve(__dirname, "src/hooks"),
      "@libs": path.resolve(__dirname, "src/libs"),
      "@pages": path.resolve(__dirname, "src/pages"),
      "@/types": path.resolve(__dirname, "src/types"),
    },
  },
};

→ types 폴더를 @types로 설정했더니, src폴더에 새로 생성된 types 폴더가 아닌 typescript 자체의 types 폴더로 인식 되어서 다른 폴더들과 다르게 설정했다. (통일성을 주고싶다면 모든 폴더 경로 별칭을 "@/" 로 시작하게끔 하는 것을 추천합니다.)

 

4. Create tsconfig.paths.json (optional but recommended)

"compilerOptions"는 tsconfig의 프로퍼티이기 때문에 tsconfig.json파일에 작성해도 되지만,

보다 깔끔한 관리를 위해서 tsconfig.paths.json파일을 따로 생성하여 관리하는 것을 추천합니다.

// tsconfig.paths.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["./src/components/*"],
      "@data/*": ["./src/data/*"],
      "@hooks/*": ["./src/hooks/*"],
      "@libs/*": ["./src/libs/*"],
      "@pages/*": ["./src/pages/*"],
      "@/types/*": ["./src/types/*"]
    }
  }
}

 

5. Update tsconfig.json (only the case you added tsconfig.paths.json)

tsconfig.paths.json 파일을 추가했다면, tsconfig.json 파일에 해당 파일에 대한 정보를 추가해야 합니다.

→ "extends" 프로퍼티 사용

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

 

 

 

---

참고 자료

• Craco Docs
• [React + Craco + TS] Alias 절대경로 + 폴더 index 절대경로 설정 방법
• Webpack, React, Typescript, Jest 환경에서 Alias 적용하기 (절대 경로 import)