[React] package.json 명령어 npm start / npm run build 스크립트 차이점

package.json 파일에 실행 스크립트는 start, build, test, eject 4가지 명령어가 있습니다.

일반적으로 start는 개발모드, build는 배포용이라고 알려져있다.

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

1) npm run start

- 개발 모드로 프로그램을 실행하는 명령어이다.

- HMR(Hot Module Replacement)가 동작해 수정과 동시에 화면이 변경된다.

- 개발 모드에서 코드에 에러가 있을 경우 브라우저에 메시지를 출력한다.

- HTTPS 실행 옵션을 통해 https 인증서 없이 임시로 https 형태로 url을 만들 수 있다.

$ npm start
$ npm run start

> HTTPS 실행 옵션 사용해 실행

$ HTTPS=true npm start

 

2) npm run build

- 배포 환경에서 사용할 파일을 만들어준다.

- 압축 형태로 제공

$ npm build
$ npm run build

 

> 정적 파일 서비스 실행

serve 패키지는 노드(node.js) 환경에서 동작하는 웹 서버 애플리케이션

npx 로 실행하며 build 된 정적 파일을 서비스 할 때 간단하게 사용하기 편리하다.

$ npx serve -s build

 

3) npm test

- 테스트 코드를 실행합니다.

- create-react-app 에는 제스트(jest) 테스트 프레임워크가 기본 동작

 

> 테스트 대상

- __test__ 폴더에 밑에 있는 모든 자바스크립트 파일

- 파일 이름이 .test.js로 끝나는 파일

- 파일 이름이 .spec.js로 끝나는 파일

 

CI(continuous integration)와 같이 watch 모드가 필요 없는 환경에서는 다음 명령어로 테스트 코드를 실행

$ CI=true npm test

 

4) npm run eject

- 숨겨져 있던 create-react-app 내부 설정 파일의 노출한다.

- 바벨이나 웹팩 설정을 변경할 수 있다. (단점은 익숙해야 가능)

- npm run eject 외에도 방법이 존재한다.

• 방법 1: react-scripts 프로젝트를 포크(fork) 해서 나만의 스크립트를 만든다.
• 방법 2: react-app-rewired 패키지를 사용한다.

 

추천할 글 > Yarn이란?

https://frogand.tistory.com/82

[yarn] Yarn이란? 의존성 관리 / 패키지 매니저