React Craco 설정하기

 

React Craco 설정하기

 

React에서 Craco를 이용하여 절대경로를 설정하는 방법에 대해 알아보겠습니다.

 

 

 

1. Craco

---

Craco(Create React App Configuration Override)는 보다 쉽게 CRA 설정이 가능하도록 지원해주는 라이브러리입니다.

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

 

일반적으로 CRA에서 page, component 등을 import할 때 상대경로를 이용하는데 다음과 같이 구조에 따라 depth가 깊어져서 가독성이 떨어지고 사용이 번거로워지는 경우가 있습니다.

import SelectBoxCategory from '../../../../components/select-box/SelectBoxCategory';
import SelectBoxSingle from '../../../../components/select-box/SelectBoxSingle';
import Pagination from '../../../../components/pagination/Pagination';
import {CommonService} from '../../../../services/commonService';
import {StringUtils} from '../../../../utils/stringUtils';
import {DateUtil} from '../../../../utils/dateUtils';

 

이러한 경우에 Craco를 사용하면 절대경로를 이용한 경로 설정이 가능합니다.

 

 

1.1. Craco 설치

 

아래 명령어를 실행해서 craco를 설치해줍니다.

$ yarn add @craco/carco
$ yarn add craco-alias

 

 

1.2. craco.config.js 작성

 

루트 디렉터리 하위에 craco.config.js 파일을 다음과 같이 작성해줍니다.

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

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

 

 

1.3. tsconfig.paths.json 작성

 

다음으로 tsconfig.paths.json 파일을 작성해줍니다. path에 따라 사용할 alias를 지정해주는데 일반적으로 가독성과 에러 방지를 위해 src 하위의 디렉터리 단위로 설정해줍니다.

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@hooks/*": ["src/hooks/*"],
      "@pages/*": ["src/pages/*"],
      "@services/*": ["src/services/*"],
      "@utils/*": ["src/utils/*"],
      "@screens/*": ["src/screens/*"],
      ...
    }
  }
}

 

 

1.4. tsconfig.json 설정

 

앞서 작성한 tsconfig.paths.json 파일의 사용을 위해 tsconfig.json에 extends 프로퍼티를 다음과 같이 추가해줍니다.

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

 

 

1.5. package.json 설정

 

마지막으로 package.json의 scripts 프로퍼티를 다음과 같이 수정해줍니다.

{
  "dependencies": {
    ...
  },
  "scripts": {
    "start": "craco start",
    "build:dev": "craco start",
    "build:prod": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    ...
  }
}

 

여기까지 설정하고 애플리케이션을 실행해보면 다음과 같이 craco로 설정한 절대경로의 사용이 가능한 것을 확인할 수 있습니다.

import SelectBoxCategory from '@components/select-box/SelectBoxCategory';
import SelectBoxSingle from '@components/select-box/SelectBoxSingle';
import Pagination from '@components/pagination/Pagination';
import {CommonService} from '@services/commonService';
import {StringUtils} from '@utils/stringUtils';
import {DateUtil} from '@utils/dateUtils';

 

이상으로 React에서 Craco를 이용하여 절대경로를 설정하는 방법에 대해 알아봤습니다.

 

 

※ Reference

 

• github.com/gsoft-inc, craco, https://github.com/gsoft-inc/craco
• velog.io/@kokoball0, [React] craco를 이용한 프로젝트 절대 경로 설정, https://velog.io/@kokoball0/React-craco%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%A0%88%EB%8C%80-%EA%B2%BD%EB%A1%9C-%EC%84%A4%EC%A0%95
• spookyjelly.tistory.com, (21.07.19) CRA로 만든 react의 webpack 수정하기 (with CRACO), https://spookyjelly.tistory.com/42
• bgradecoding.tistory.com, [React] 상대경로 지옥에서 벗어나기 (craco), https://bgradecoding.tistory.com/14