[부스트코스/웹 프론트엔드 시작하기(리액트&리덕스)] 리액트 맛보기 - 배포

저번 포스트까지 사용하던 리액트 앱을 개발자 화면에서 '캐시 비우기 및 강력 새로고침'한다.

그런 후에 네트워크 탭을 확인하면 전체 용량 1.7MB를 다운받은 것을 알 수 있다.

용량이 아주 큰 상태인데, 이는 리액트가 개발의 편의를 위해 여러가지 기능을 추가한 상태이기 때문이다.

하지만 사용자들은 이런 기능이 필요 없고, 보안의 문제가 있기 때문에 이대로 배포하면 안된다.

 

create-react-app은 빌드 할 때 'npm run build' 명령을 사용하면 디렉토리에 'build'라고 하는 파일이 생성된다.

이 build 폴더의 index.html 파일을 보면 공백이 하나도 없는 것을 볼 수 있다.

이는 create-react-app이 실제 프로덕션 환경에서 사용되는 앱을 만들기 위해 index.html 파일에서 공백과 같이 불필요한 정보를 제거했기 때문이다.

또한 'src' 폴더에서 작업했던 파일들도 용량을 줄이는 작업을 수행하고 index.html 파일이 그 파일들을 로드할 수 있도록 처리한다.

 

결론적으로 실제로 서비스할 때는 build 안에 있는 파일들을 사용하게 된다.

Web server가 문서를 찾는 최상위 디렉토리 'Document root'에 build 디렉토리 안 쪽에 있는 파일들을 위치시킨다.

이 과정을 통해 실서버환경이 완성된다.

 

'serve' 라고하는 npm을 통해 설치할 수 있는 간단한 웹서버가 있다.

npx serve -s build

콘솔에서 위 명령어를 실행하면 serve라는 한번만 실행시킬 수 있는 웹서버를 다운로드 받을 수 있다.

'-s build' 옵션은 build라는 디렉토리를 document root로 하는 옵션이다.

 

이 서버를 다운로드 받고 해당 서버로 접속해보면

162KB로 1.7MB에 비해 현저하게 준 용량을 볼 수 있다.

---

부스트코스의 강의 내용을 정리한 포스트입니다.

https://www.boostcourse.org/web231/lecture/1387390

웹 프론트엔드 시작하기 (리액트&리덕스)