CRA 프로젝트에서 craco를 사용해서 절대경로 설정하기

✨CRA 프로젝트에서 craco를 사용해서 절대경로 설정하기

💡절대 경로가 필요한 이유?

리액트에서 작성해둔 컴포넌트 혹은 유틸함수들을 가져올 때는 기본적으로 상대경로를 사용해서 가져온다. 폴더 안에 폴더가 많아져 (뎁스가 깊어지면) 코드가 복잡해지기 때문에, 상대 경로보다는 절대경로를 사용하는 경우가 많다.

// 상대경로
import BookItem from "../../../components/BookItem";

// 절대경로
import BookItem from "@/components/BookItem";
import { formatNumber } from "@/utils/format";

💡Craco?

Create-React-App Config Override의 약어
CRA로 만들어진 프로젝트의 config 설정을 덮어쓰기 위한 패키지

설치방법

npm i -D @craco/craco craco-alias

• 타입스크립트를 사용하는 경우

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

• yarn 사용하는 경우

yarn add @craco/craco

설정해야하는 것들

1. 프로젝트 root 경로(최상단)에 craco.config.js파일 생성하고 코드 작성하기

자세한 내용은 공식문서 확인

// craco.config.js

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

module.exports = {
  plugin: cracoAlias,
  options: {
    source: "tsconfig",
    baseUrl: ".", // 적용할 루트 폴더
    tsConfigPath: "tsconfig.paths.json", // 경로 설정
    debug: false
  }
};

1. 경로 설정하기

• 기존 tsconfig 파일에 작성해도 되고
• tsconfig.paths.json파일을 생성하고 작성해도 됨

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

1. config 파일에 오버라이드 설정하기

• “extends”: “./tsconfig.paths.json”
• “include”: [“src”, “craco.config.js”, “tsconfig.paths.json”]

// tsconfig.js

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

• 전체 코드

// tsconfig.js

{
  "compilerOptions": {
    "types": ["jest", "node"],
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
  },
  "extends": "./tsconfig.path.json",
  "include": ["src", "craco.config.js", "tsconfig.paths.json"]
}