[React] CRACO: Create React App(CRA)의 설정을 쉽게 할 수 있는 도구

 

CRA (Create React App)

: React 프로젝트의 기본 설정을 쉽게 커스터마이즈할 수 있게 해주는 도구

• 프로젝트 설정(ex. Webpack, Babel)을 자동으로 관리해 준다.
  👉  복잡한 설정 없이 바로 기본 리액트 프로젝트를 만들 수 있다.
• 그러나 CRA는 기본적으로 설정 파일이 감춰져 있어  Webpack, Babel 등의 세부 설정을 변경하고자 할 때는 제한이 있다.
  👉 CRACO를 사용하면 CRA의 설정 파일을 직접 수정하지 않고도 프로젝트의 설정을 커스터마이즈할 수 있다.

 

 

CRACO (Create React App Configuration Override)

: CRA의 한계를 보완하기 위해 사용되는 도구

• CRA의 설정을 수정하고 싶을 때 CRACO를 사용하면, CRA의 기본 설정 파일을 직접 수정하지 않고도 프로젝트 설정을 오버라이드(덮어쓰기)할 수 있다.
• 사용 예시
  
  • Webpack 설정을 변경하거나 플러그인을 추가하는 작업을 할 때
  • CRA로 만든 프로젝트에 Alias 설정, SASS/LESS 지원, 플러그인 추가 등의 작업

---

 

CRACO 설치 단계

 

1. craco 설치

pnpm i -D @craco/craco

 

 

2. package.json의 scripts 수정

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

// 기존
/*
"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
}
*/

 

 

3. craco.config.js 파일 생성 및 설정 변경

// craco.config.js
module.exports = {
  babel: {
    presets: ['@emotion/babel-preset-css-prop'],
  },
    webpack: {
    alias: {
      '@components': path.resolve(__dirname, 'src/components/')
    }
  }
}

 

 

---

 

@craco/craco