react-scripts

scripts

CRA로 프로젝트를 생성하면 package.json에 아래와 같은 명령어가 추가되어있다.

  // package.json

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "serve": "serve -s build",
    "build-and-serve": "npm run build && npm run serve"
  },

react-scripts

react-scripts는 뭘까?
설치된 패키지 중 하나다.

   // package.json

  "dependencies": {
    "react-scripts": "5.0.1",
  },

Webpack

package.json에 Webpack은 안 보인다. 하지만 react-scripts 패키지를 통해 내부적으로 실행된다.
"start", "build", "test", "eject" 명령어가 해당된다.

scripts 살펴보기

• start: 개발 서버를 시작하고, 이 서버에서는 코드 변경 시 자동으로 다시 빌드하여 화면을 갱신해줌. 이 과정에서 내부적으로 Webpack Dev Server가 실행됨.
• build: 프로덕션용 빌드 수행. 최종 소스 코드 번들 생성. 이때 내부적으로 Webpack이 사용됨.
• test: 테스트 스크립트 실행. 이 스크립트는 Jest와 함께 사용되며, Jest가 내부적으로 Webpack을 사용하여 테스트 환경을 구성.
• eject: CRA(React)의 내부 설정을 외부로 추출할 때 사용. 이 과정에서 Webpack 설정 파일이 생성되고, 이 설정 파일을 편집할 수 있음.
• serve, build-and-serve: 프로덕션용 빌드 결과물을 서빙