배포 deploy를 하는 이유

이전에 만든 프로젝트를 터미널에 npm run start 를 입력해 웹브라우저에 열고 개발자도구를 활성화 하여 네트워크 탭을 누른다.

그리고 페이지 리로드 버튼을 우클릭 하면 캐시 비우기 및 강력 새로고침을 눌러 캐시를 가 제거해준다.

전체 용량이 2.2 MB resiurces 즉 2.2MB를 다운 받은것을 알 수 있다.

그런데 그저 뒤에 바탕색과 Hello, React!!를 출력하는것 뿐이고 아무런 기능이 없는데 2.2MB나 차지하다니 터무니 없다.

이는 리액트가 개발의 편의성을 위해 여러가지 기능을 추가해놓은 상태이기 때문이다.

하지만 사용자 입장에서는 이 용량은 무겁고 사용할 수 없다.
그리고 여러가지 보안적인 문제가 발생할 가능성이 크다.

build

이전에는 npm run start를 썼는데 이 명령어가 무엇을 뜻하는지 package.json 파일을 열어보면

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

스크립트 명령어를 단축했다는 것을 확인할 수 있다.

사용자 기준으로 원할하게 사용할 수 있는 파일을 배포하려면 build 명령어를 사용해야 한다.
터미널에 npm run build를 입력해보자.

해당 명령어 실행 후 build라는 폴더가 생성된 것을 확인할 수 있다.

해당 build파일에 있는 index.html을 열어보면 공백이 하나도 없고 눈으로 알아볼 수 없게 코드가 적혀있는 것을 알 수 있다.

이는 배포환경에서 사용할 앱을 만들기 위해 이전 src 가지고 있는 index.html과 다른 파일들 내에 필요없는 용량을 차지한 정보를 다 제거하여
(예로들어 보안적으로 개인적인 주석등등 포함..)
build폴더 내에 create-react-app이 알아서 처리해준다.

터미널을 보면 serve -s build라는 명령어가 보인다
터미널에 해당 명령어를 입력해보자.

만약 오류가 발생한다면 터미널에 npm install -g serve를 입력하고 이는 파일 어디서나 npm이 serve라는 명령어를 통해 웹서버를 설치할 수 있단 뜻이다.

다른 방법으로는 npx serve -s build serve라는 웹서버를 다운로드를 받아 실행하고 -s는 디렉토리의 위치를 가르키는 뜻이며 build를 Document루트로 한다는 것이다.

해당 링크 중 아무데나 클릭하여 접속해 본다.

아까처럼 개발자도구에 있는 네트워크 탭을 눌러 "캐시 비우기 및 강력 새로고침"을 실행하고
용량을 확인해 본다.

2.2 MB에서 676 kB로 줄어든 걸 확인할 수 있다.

개발환경의 App은 동작하는 것은 같지만 2.2 MB 씩이나 하는 큰 용량을 가지며
사용자환경의 App은 676 Kb로 작은용량에 같은 기능을 하는 앱을 사용할 수 있다.