[생활코딩-React] 배포하는법

[출처 : Youtube - 생활코딩]

https://youtu.be/E_-ua6uCQOU?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi

 

 

'캐시 비우기 및 강력 새로고침'을 누른다.

 

 

전체 용량이 1.7MB나 된다.

(React가 개발의 편의성을 위해 여러가지 기능을 추가해놔서 create-react-app은 파일의 무게가 상당히 무겁다)

 

그러나 용량이 커서 보안쪽의 문제가 생길 수 있어서 완성한 후에는 

npm run build

라는 명령어를 쓴다.

 

터미널에 npm run build를 입력하면

build라는 폴더가 생성된다.

 

 

build 폴더 안에 index.html 파일로 들어가면

 

 

아래와 같이 공백이 하나도 없는 복잡한 코드가 있다.

이유는 create-react-app이 index.html 파일의 불필요한 용량을 차지하는 곳을 싹 살균시켰기 때문이다.

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

 

 

npm을 통해서 설치할 수 있는 간단한 서버가 있다.

npm install -g serve

설치하면 컴퓨터 어디서든지 serve 라는 명령어를 통해서 웹 서버를 설치할 수 있다.

 

 

또, 한 번만 실행시킬 웹 서버를 실행시키는 방법이 있다.

npx serve -s build

'serve라는 웹 서버를 다운받아서 실행시킬 때 build라는 디렉토리를 document root로 하겠다' 는 뜻이다.

 

명령어를 실행시켜보면 다음과 같이 주소를 알려준다.

 

 

http://localhost:5000 주소로 들어가본다.

용량이 확 줄어든 것을 확인할 수 있다.

 

 

<잘 알아둘것>

✔ 개발할 때는 npm run start --> 이것저것 기능들이 많이 들어있어서 엄청 용량이 크다.

✔ 어플리케이션을 완성한 후에는 npm run build --> 용량을 엄청 줄여준다.