React / TS ] CRA로 프로젝트 생성 시, 절대경로 사용하기 (feat. craco)

1. craco를 설치한다.

yarn add @craco/craco craco-alias

 

2. tsconfig.path.json 파일 생성 후 

아래와 같이 paths 안에 등록하고 싶은 경로와 그 경로의 별칭을 추가해준다.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@src/*": ["src/*"],
      "@hooks/*": ["src/hooks/*"],
      "@components/*": ["src/components/*"],
      "@layouts/*": ["src/layouts/*"],
      "@pages/*": ["src/pages/*"],
      "@typings/*": ["src/typings/*"],
      "@utils/*": ["src/utils/*"]
    }
  }
}

 

3. craco.config.js 파일 생성 후, 2번에서 설정한 내용을 아래처럼 옵션에 설정해준다.

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

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

 

4. tsconfig.json에 위의 내용들 연결하기

{
  "extends": "./tsconfig.paths.json", //tsconfig.path.json의 설정을 상속받고
  "compilerOptions": {
  	//설정 내용~~
  },
  "include": [
    "craco.config.js", // 위에서 추가한 설정들을 컴파일 범위에 포함시킨다.
    "src"
  ],
}

 

5. 마지막으로 package.json 파일의 script 명령어 부분을 아래와 같이 수정한다.

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

 

6. 프로젝트를 다시 실행하면

yarn start

 

7. import 할 때 2번에서 설정한 별칭을 사용해서 절대경로를 사용할 수 있다~!!!

const SignUp = loadable(() => import("@pages/Signup/index")); //이렇게 절대경로 사용 가능

 

참고한 글:

craco git: https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md#setting-a-custom-location-for-cracoconfigjs

GitHub - gsoft-inc/craco: Create React App Configuration Override, an easy and comprehensible configuration layer for create-rea

 

이 블로그가 더 정리 잘 되어있음: https://velog.io/@shin6403/React-Typescript-%EC%A0%88%EB%8C%80%EA%B2%BD%EB%A1%9C-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0feat.React-CRA

React Typescript | 절대경로 적용하기(feat.React-CRA)