[리액트] package.json 명령어 npm start, npm run build 스크립트 차이점

반응형

package.json 파일에 실행 스크립트를 보면 다음과 같이 start, build, test, eject 4가지 명령이 있습니디. 일반적으로 start는 개발 모드 build는 배포용 빌드라고 알고 있습니다. 리액트(React) 에서 처음 공부할 때 중요하다고 생각되서 정리하는 차원에서 조금 더 자세히 차이점을 알아보고 실행하는 옵션들에 대해서 알아보겠습니다.

 

 

(1) npm start

  • 개발 모드로 프로그램을 실행하는 명령어 입니다.
  • HMR(hot-module-replacement)가 동작해 수정과 동시에 화면이 변경됩니다.
  • 개발 모드에서 코드에 에러거 있을 경우에는 브라우저에 메시지를 출력합니다.
  • https 실행 옵션을 통해 https 인증서 없이 임시로 https 형태로 url을 만들 수 있습니다.

 

실행 코드

 

https 실행 옵션 사용해서 실행

 

(2) npm run build

  • 배포 환경에서 사용할 파일을 만들어준다.
  • 압축 형태로 제공

 

실행 코드

 

정적 파일 서비스 실행

serve 패키지는 노드(node.js) 환경에서 동작하는 웹 서버 애플리케이션 입니다. npx 로 실행하며 build 된 정적 파일을 서비스 할 때 간단하게 사용하기 편리합니다.

 

(3) npm test

  • 테스트 코드를 실행합니다.
  • create-react-app 에는 제스트(jest) 테스트 프레임워크가 기본 동작합니다.

테스트 대상

  • __test__ 폴더에 밑에 있는 모든 자바스크립트 파일
  • 파일 이름이 .test.js로 끝나는 파일
  • 파일 이름이 .spec.js로 끝나는 파일

 

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

 

(4) npm run eject

  • 숨겨져 있던 create-react-app 내부 설정 파일의 노출합니다.
  • 바벨이나 웹팩 설정을 변경할 수 있습니다. (단점은 익숙해야 가능)
  • npm run eject 외에도 방법이 존재합니다.
    • 방법 1: react-scripts 프로젝트를 포크(fork) 해서 나만의 스크립트를 만든다.
    • 방법 2: react-app-rewired 패키지를 사용한다.
반응형

댓글

Designed by JB FACTORY