- 개발 모드로 실행하기
npm start : 개발모드로 프로그램을 실행하는 명령어. HMR이 동작하기 때문에 코드를 수정하면 화면에 즉시 반영된다. HMR이 없다면 코드를 수정하고 브라우저에서 수동 새로고침해야한다.
개발모드에서 에러가 있으면 브라우저에서 에러 메세지가 출력된다.
때에 따라서 API 호출을 위해 https로 실행해야 할수도 있는데 그때의 명령어는 아래와 같다.
- 맥 : HTTPS=true npm start
- 윈도우 : set HTTPS=true&&npm start
: 자체 서명된 인증서와 함께 https 사이트로 접속한다. 자체 서명된 인증서이기 때문에 안전하지 않다는 경고 문구가 뜨지만 무시하고 진행하면됨.
- 빌드하기
npm run build : 배포 환경에서 사용할 파일을 만들어 준다.
npx serve -s build : serve 패키지는 노드환경에서 동작하는 웹 서버 애플리케이션이다. 정적 파일을 서비스 할떄 간단하게 사용하기 좋다. build/static 폴더 및에 생성된 파일의 이름에 해시값이 포함되어 있다. 파일의 내용이 변경되지 않으면 해시값은 항상 같다. 새로 빌드를 하더라도 변경되지 않은 파일은 브라우저에 캐싱되어있는 파일이 사용된다. 따라서 재방문의 경우 빠르게 페이지가 랜더링 되는 효과를 볼 수 있다.
자바스크립트 파일에서 import 키워드를 이용해서 가져온 CSS파일은 다음 경로에 저장된다.
build/static/css/main.{해시값}.chunk.css :
여러 개의 css 파일을 임포트 하더라도 모두 앞의 파일에 저장된다. 자바스크립트 파일에서 import 키워드를 이용해서 가져온 폰트, 이미지 등의 리소스 파일은 build/static/media 폴더 및에 저장된다. 이미지 파일의 크기가 10킬로바이트보다 작은 경우에는 별도의 파일로 생성되지 않고 data url 형식으로 자바스크립트 파일에 포함된다. 파일의 크기가 작다면 한 번의 요청으로 처리하는 게 효울적이기 때문이다.
- 테스트 코드 실행하기
npm text : 테스트 코드가 실행된다.
- 설정 파일 추출하기
npm run eject: 숨겨져 있던 create-react-app의 내부 설정 파일이 밖으로 노출된다. 이 기능을 사용하면 바벨이나 웹팩의 설정을 변경할 수 있다. 이 기능의 단점은 create-react-app에서 개선하거나 추가된 기능이 단순히 패키비 버전을 올리는 식으로 적용되지 않는다는 점이다. 이 기능은 리액트 툴체인에 익숙한 사람이 아니라면 추천하지 않는다. npm run eject 외에도 create-react-app의 설정을 변경할 방법이 있다.
- 방법1 : react-script프로젝트를 포크(fork)해서 나만의 스크립트를 만든다.
- 방법2: react-app-rewired 패키지를 사용한다.