Repolode
제출하기
timarney

timarney/react-app-rewired

eject하지 않고 Create React App의 webpack, Jest, 개발 서버 설정을 커스터마이징할 수 있게 해주는 config-overrides 도구입니다.

GitHub에서 보기
스타
9,836
포크
418
열린 이슈
25
마지막 커밋
지난달

어떤 프로젝트인가요?

react-app-rewired를 사용하면 eject를 실행하거나 react-scripts를 포크하지 않고도 Create React App 프로젝트의 webpack 설정을 수정할 수 있습니다. 프로젝트 루트에 기본 webpack 설정을 인자로 받는 함수를 내보내는 config-overrides.js 파일을 만들고, 수정한 설정을 반환하면 됩니다. 플러그인이나 로더를 추가하거나 빌드 설정을 변경할 때는 이 파일만 수정하면 됩니다.

webpack 설정 외에도 같은 파일에서 Jest 설정, webpack 개발 서버 설정, CRA가 사용하는 경로를 커스터마이징할 수 있습니다. Jest 설정은 package.json의 jest 섹션을 통해 확장할 수도 있으며, 테스트용 Babel 플러그인은 babel 섹션이나 .babelrc에 정의할 수 있습니다. react-scripts-ts 같은 사용자 정의 react-scripts 포크도 명령줄 옵션으로 지원합니다.

이 도구를 사용하면 수정한 설정을 직접 관리해야 하므로 Create React App이 일반적으로 제공하는 지원을 더는 보장받을 수 없습니다. 프로젝트는 유지보수가 제한적으로 이루어지고 있다고 밝히며, customize-cra, Rescripts, craco 같은 대안도 소개합니다.

핵심 기능

  • 01config-overrides.js 함수로 CRA의 기본 webpack 설정을 확장합니다.
  • 02테스트용 Babel 설정을 포함해 Jest 설정을 커스터마이징합니다.
  • 03HTTPS 인증서 같은 webpack 개발 서버 설정을 재정의합니다.
  • 04명령줄 옵션으로 사용자 정의 react-scripts 패키지를 지원합니다.
  • 05config-overrides 디렉터리나 사용자 정의 파일 경로와 함께 사용할 수 있습니다.

활용 사례

  • eject하지 않고 Create React App 프로젝트에 사용자 정의 webpack 플러그인이나 로더를 추가합니다.
  • CRA 개발 서버의 HTTPS 인증서를 설정합니다.
  • CRA 앱의 Jest 설정이나 테스트용 Babel 플러그인을 조정합니다.

빠른 시작

  1. 1

    react-app-rewired를 개발 의존성으로 설치합니다

    npm install react-app-rewired --save-dev
  2. 2

    프로젝트 루트에 config-overrides.js를 만들고 override 함수를 내보냅니다

  3. 3

    npm의 start, build, test 스크립트에서 react-scripts 대신 react-app-rewired를 사용하도록 변경합니다

  4. 4

    개발 서버를 시작합니다

    npm start

사용 전 알아둘 점

  • 이 프로젝트는 주로 커뮤니티에서 제한적으로 유지 관리되며, 지원은 제공되지 않습니다.
  • Create React App 2.x와 Webpack 4용으로 설계되었습니다. 이전 CRA 버전에는 1.6.2로 고정된 릴리스가 필요합니다.
  • 설정을 커스터마이즈하면 관리 책임을 직접 지게 되며, CRA의 보장이 깨질 수 있습니다.

토픽

#react#webpack#create-react-app#config#jest#build-tool#eject#never

자주 묻는 질문

react-app-rewired은(는) 무엇인가요?
eject하지 않고 Create React App의 webpack, Jest, 개발 서버 설정을 커스터마이징할 수 있게 해주는 config-overrides 도구입니다. react-app-rewired를 사용하면 eject를 실행하거나 react-scripts를 포크하지 않고도 Create React App 프로젝트의 webpack 설정을 수정할 수 있습니다. 프로젝트 루트에 기본 webpack 설정을 인자로 받는 함수를 내보내는 config-overrides.js 파일을 만들고, 수정한 설정을 반환하면 됩니다. 플러그인이나 로더를 추가하거나 빌드 설정을 변경할 때는 이 파일만 수정하면 됩니다.
react-app-rewired은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
react-app-rewired은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
react-app-rewired은(는) 아직 유지보수되고 있나요?
6개월 이내 업데이트. react-app-rewired의 마지막 커밋은 2026년 10월 3일입니다.
react-app-rewired은(는) 어디에 사용할 수 있나요?
eject하지 않고 Create React App 프로젝트에 사용자 정의 webpack 플러그인이나 로더를 추가합니다. CRA 개발 서버의 HTTPS 인증서를 설정합니다. CRA 앱의 Jest 설정이나 테스트용 Babel 플러그인을 조정합니다.
react-app-rewired는 어떻게 설치하나요?
react-app-rewired를 개발 의존성으로 설치합니다: npm install react-app-rewired --save-dev 프로젝트 루트에 config-overrides.js를 만들고 override 함수를 내보냅니다 npm의 start, build, test 스크립트에서 react-scripts 대신 react-app-rewired를 사용하도록 변경합니다 개발 서버를 시작합니다: npm start
react-app-rewired은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/timarney/react-app-rewired

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트

teambit / bit

JavaScript/TypeScript 소스를 개발부터 CI와 배포까지 재사용 가능한 컴포넌트로 구성하는 빌드 시스템이자 워크스페이스 도구입니다.

개발 도구#monorepo#component-driven#typescript
1.9만+5 이번 주963TypeScriptOther업데이트 23시간 전