프로젝트 소개

react-app-rewired는 개발자가 'eject' 명령을 사용하지 않고 Create React App(CRA) 프로젝트의 webpack 구성을 재정의하고 커스터마이즈할 수 있게 해주는 개발자 도구입니다. 이 도구는 CRA의 제로 구성(zero-config) 설정의 이점을 유지하면서도 개발자에게 필요한 플러그인, 로더 및 기타 사용자 정의를 추가할 수 있는 유연성을 제공합니다. 이 도구는 표준 react-scripts 명령(start, build, test)을 가로채서 config-overrides.js 파일에서 사용자 정의 재정의를 적용하는 방식으로 작동합니다. 이 파일은 webpack 커스터마이즈를 위한 단일 함수를 내보내거나, webpack, Jest, devServer 및 paths 구성을 위한 별도의 함수를 가진 객체를 내보낼 수 있습니다. 주요 기능은 다음과 같습니다: 개발 및 프로덕션 빌드를 위한 webpack 규칙과 플러그인 커스터마이즈; 테스트 경로 패턴 및 Babel 프리셋을 포함한 Jest 테스트 구성 수정; HTTPS 인증서 및 프록시 설정을 위한 Webpack Dev Server 구성 재정의; webpack 및 Jest에 전달되는 프로젝트 경로 조정. 이 프로젝트는 CRA 1.x(Webpack 3) 및 CRA 2.x(Webpack 4) 버전을 모두 지원하며, 버전 2.0에서는 rewire 헬퍼 함수를 제거하고 직접 구성을 사용합니다. 또한 --scripts-version 플래그를 통해 사용자 정의 react-scripts 패키지를 지원하여 react-scripts-ts와 같은 TypeScript 변형과 함께 사용할 수 있습니다. 일반적인 사용 사례를 위한 대규모 커뮤니티 생태계의 rewire 플러그인이 존재합니다: Babel 플러그인(emotion, lodash, styled-components), webpack 플러그인(favicons, imagemin, bundle analyzer), 로더(TypeScript, SCSS, SVG, YAML) 등이 포함됩니다. config-overrides 파일은 모듈식 구성을 위해 디렉토리로 지정하거나 유연성을 위해 명령줄을 통해 전달할 수도 있습니다. 중요한 주의사항: react-app-rewired를 사용하면 CRA의 공식 보증이 깨지므로, 구성에 대한 책임을 지고 공식 지원을 받을 수 없습니다. 저자는 광범위한 사용자 정의 webpack 구성이 필요한 프로젝트에는 Next.js 또는 Razzle을 권장합니다. customize-cra, Rescripts, craco와 같은 대안도 CRA 2.0+ 호환성을 위해 사용할 수 있습니다.