[리액트]앱 빌드/배포

생활코딩님의 리액트앱 배포용으로 빌드하는법 수업을 들었는데 아주 유용했다.

그냥 실행했을때

그냥 npm start로 앱을 실행했을때

디버깅 네트워크 탭에 들어가서 확인해보면 2.5MB나 갖고오고 있는걸 확인하고있다.

 

터미널에 npm build라고 치면 여러 작업을 거쳐 builld라는폴더가 하나 생긴다.
기존 프로젝트 내용들을 꽉꽉 줄여서 build폴더에 넣어놓은 모습이다.

index.html파일을 봐도 전혀 바뀌어있다.

빌드된 파일을 실행시키려면 어떻게 해야되는지도 나와있다.

serve를 npm으로 깔고 실행해야되는데

깔기 싫으면 그냥 npx serve -s build 해도 된다.

npm은 계속 설치해놓고 쓰는거고
npx는 설치하고 사용하고 바로 지운다.

실행하면 알림메시지가 뜬다. 5000포트로 접속하면

빌드한 후

갖고온 파일 크기가 작아진게 보인다. 앱 열심히 만들고 배포할 때는 빌드를 해주면 된다.