정정지용
기술스택 목록
도구

craco

프로젝트 1개에서 사용했습니다. 각 프로젝트에서 어떤 역할로 썼는지 아래에 정리했습니다.

이 기술은 무엇인가요?

Create React App의 내부 설정을 eject 없이 오버라이드하는 설정 커스터마이징 도구

craco(Create React App Configuration Override)는 Create React App(CRA)으로 만든 프로젝트의 webpack, babel, eslint, jest 등 내부 빌드 설정을 eject 하지 않고도 수정할 수 있게 해주는 도구입니다. CRA는 설정을 캡슐화해 별도 파일로 노출하지 않기 때문에 경로 별칭, 추가 플러그인, 프록시 설정 같은 커스터마이징이 필요할 때 eject로 전체 설정을 노출시키는 방법밖에 없었는데, craco는 이 문제를 해결하기 위해 만들어졌습니다. 프로젝트 루트에 craco.config.js 파일을 두고 react-scripts 명령을 craco 명령으로 대체하는 방식으로 동작합니다.

이럴 때 사용합니다

  • eject 없이 webpack 경로 별칭이나 로더 설정을 추가하고 싶을 때
  • CRA 프로젝트에 CSS 전처리기나 커스텀 babel 플러그인을 붙여야 할 때
  • eslint, jest 설정을 프로젝트 요구에 맞게 세밀하게 조정하고 싶을 때
  • CRA의 관리 편의성은 유지하면서 최소한의 빌드 설정 커스터마이징만 필요할 때

핵심 개념

eject
CRA가 감춰둔 webpack, babel 등의 설정 파일을 프로젝트로 꺼내는 되돌릴 수 없는 작업으로, craco는 이를 피하기 위한 대안입니다.
craco.config.js
webpack, babel, eslint, devServer 등의 설정을 오버라이드하는 내용을 담는 craco의 설정 파일입니다.
CLI wrapper
craco는 react-scripts의 start, build, test 명령을 감싸서 내부적으로 커스텀 설정을 적용한 뒤 CRA 빌드 파이프라인을 실행합니다.
plugin
craco-alias, craco-less 같은 서드파티 플러그인을 통해 자주 쓰는 설정 변경을 재사용 가능한 형태로 적용할 수 있습니다.

craco.config.js 기본 예시

src 폴더에 대한 경로 별칭(@)을 추가하고, 개발 서버에서 /api 요청을 백엔드로 프록시하도록 설정하는 예시입니다.

JavaScript
const path = require('path');

module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  devServer: {
    proxy: {
      '/api': 'http://localhost:4000',
    },
  },
};

처음 쓸 때 흔한 함정

  • package.json의 scripts를 react-scripts에서 craco로 바꾸지 않으면 설정이 적용되지 않습니다
  • CRA 메이저 버전이 바뀌면 craco가 호환되지 않아 업그레이드가 지연될 수 있습니다
  • webpack 설정 전체가 아니라 CRA가 노출한 범위 안에서만 오버라이드가 가능합니다

위 개요는 기술 학습을 돕기 위해 자동 생성된 일반 설명입니다. 정확한 사양과 최신 정보는 공식 문서를 확인하세요.

프로젝트별 활용 방식

위 개념이 실제 프로젝트에서 어떻게 쓰였는지 보여줍니다.

함께 사용한 기술

위 프로젝트들에서 같이 쓰인 다른 기술입니다.

Create React AppReactTypeScript