zzou

CRACO(Create React App Configuration Override)는 Create React App (CRA)의 기본 설정을 덮어쓸 수 있도록 하는 도구입니다.

CRA는 매우 강력하고 유연한 도구이지만, 일부 요구 사항에 따라 프로젝트의 설정을 수정해야 할 때가 있습니다.

CRACO는 이러한 경우에 CRA의 설정을 쉽게 수정하고 확장할 수 있도록 합니다.

주요 기능

설정 오버라이드: CRACO를 사용하면 CRA의 기본 설정을 덮어쓸 수 있습니다. 예를 들어, Babel, ESLint, 웹팩 등의 설정을 변경하거나 확장할 수 있습니다.

플러그인 지원: 다양한 CRACO 플러그인을 사용하여 프로젝트의 특정 요구 사항에 맞게 설정을 수정할 수 있습니다. 이러한 플러그인은 CRA의 설정을 확장하고 새로운 기능을 추가할 수 있습니다.

유연성: CRACO는 CRA와 함께 사용할 수 있으며, CRA의 내부 동작을 변경하지 않고도 프로젝트의 설정을 조정할 수 있습니다.

CRACO 설치

npm install @craco/craco --save-dev

CRACO 설정 파일 생성

이 예제에서는 @을 프로젝트의 src 디렉토리로 매핑하여 절대 경로를 설정합니다.

// craco.config.js

const path = require('path');

module.exports = {
  webpack: {
    configure: (webpackConfig, { env, paths }) => {
      // 기존의 경로 설정을 사용하기 전에 설정합니다.
      webpackConfig.resolve.alias = {
        ...webpackConfig.resolve.alias,
        // src 디렉토리를 기본 경로로 설정합니다.
        '@': path.resolve(__dirname, 'src')
      };

      return webpackConfig;
    }
  }
};

절대 경로 사용

// src/components/ExampleComponent.js

import React from 'react';
import OtherComponent from '@/components/OtherComponent'; // @를 사용한 절대 경로

const ExampleComponent = () => {
  return (
    <div>
      <h1>Example Component</h1>
      <OtherComponent />
    </div>
  );
};

export default ExampleComponent;

이제 CRACO를 실행하고 절대 경로를 사용하여 모듈을 가져올 수 있습니다. 이를 통해 프로젝트의 디렉토리 구조를 더욱 깔끔하게 유지할 수 있습니다.

이제 프로젝트가 CRA와 CRACO의 설정을 함께 사용하여 실행됩니다.

사용 사례:

코드 스플리팅 조정: CRA의 코드 스플리팅 설정을 수정하여 번들 크기를 최적화합니다.

환경 변수 설정: CRA의 환경 변수를 조정하여 다양한 환경에서 프로젝트를 구성합니다.

외부 라이브러리 통합: 외부 라이브러리를 추가하여 CRA의 기능을 확장합니다.

모듈 경로가 변경되더라도 코드를 변경하지 않고도 쉽게 경로를 수정할 수 있습니다.

CRACO는 Create React App의 설정을 더욱 유연하게 만들어주는 강력한 도구입니다. 개발자가 프로젝트의 요구 사항에 맞게 설정을 조정하고 확장할 수 있도록 합니다.