[Develog] Craco란? Craco 설치 방법

Craco란?

Create-React-App Configuration Override의 약어로, 말 그대로 CRA에 config 설정을 덮어쓰기 위한 패키지
Webpack의 번거로운 설정을 줄이기 위해 다양한 오버라이딩 패키지들이 등장했으며, 대표적으로 
Craco, react-app-rewired 등이 있다.

 

일단 craco를 이해하려면 eject를 알아야 한다.
CRA 즉 Create React App으로 프로젝트를 만들고 나면 최소한의 필요한 기능만으로 설정이 되어 있다.
이 때 package.json 파일에서 script 파일을 보면 eject 라는 명령어를 볼 수가 있다.

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

eject는 "꺼내다"라는 뜻으로 프로젝트를 커스터마이징 하기 위해  숨겨진 모든 설정을 밖으로 추출해주는 명령어이다.
자세한 리액트 앱의 구성을 공부하고 싶다면 eject를 실행해서 보면된다. Webpack, Babel, ESLint, etc. 앱을 build하기 위한 모든 구성요소들을 한번에 볼 수 있다.

하지만 이를 실행하고 나면 모든 구성과 스크립트를 직접 유지관리해야 하므로 번거로울 수 있다.
Craco는 eject하지 않고도 프로젝트 루트에 있는 단일 구성 파일을 사용하여 ESLint, Babel, PostCSS 등의 구성을 사용자 지정 할 수 있다.

---

Craco 설정 방법

1. 크라코 최신 버전 설치

npm i -D @craco/craco

2. 프로젝트 루트 디렉토리에 Craco config파일 생성

  my-app
  ├── node_modules
+ ├── craco.config.js
  └── package.json

3. package.json파일 수정

"scripts": {
- "start": "react-scripts start"
+ "start": "craco start"
- "build": "react-scripts build"
+ "build": "craco build"
- "test": "react-scripts test"
+ "test": "craco test"
}

eject를 대체하는 것이니 eject는 안건드려도된다

 

추가로 타입스크립트 사용시 다음 설치를 진행한다.

npm i -D @craco/types

 

출처

[Craco] Craco 란?

[React] create-react-app eject란?

Getting Started | CRACO