React 디플로이 하는 방법과 명령어

디플로이란? 그냥 개발한 환경을 배포한다? 쯤으로 이해하고있다. 

 

일단 React 가 보여준 브라우저의 사용량을 확인해 보자! 

=> 개발자 화면은 키고 network 메뉴를 보면 하단에 사용량을 확인 할 수 있다.

별 내용이 없어도 상당히 많은 양을 사용하고 있다. 

 

이는 create-react-app 이 제공하는 용량이 많기 때문이다. 이 상태로 사용자에게

제공하면 사용자로 하여금 로딩이 느리고, 불필요한 내용까지 제공 될 수 있기 때문에 

디플로이를 위한 디렉토리가 필요하다. 

 

그래서 build 디렉토리를 설치할 것이다.

bulid 디렉토리안에 파일들은 create-react-app 에 의해서 코드상에서 불필요한 줄바꿈 등등을 제거해 준다.

( public 이나 src 디렉토리 안에 있는 파일들의 코드를 정리해서 bulid 안에 index.html 파일로 옮겨준다. )

실제로 서비스 할 파일들은 bulid 디렉토리 안에 만들면 된다. 

 

1. npm run bulid 를 입력한다. 

그러면 우리가 만들었던 파일 안에 bulid 라는 디렉토리가 생긴걸 확인 할 수 있다. 

 

2. npx serve -s bulid 를 입력한다. 

=> npx ( 한번만 serve를 설치하는데, )

-s bulid ( build 디렉토리를 documentById('root) 로 하겠다 라는 뜻이다.

 

,

,

 

그러면 create-react-app 이 열심히 일을 해서 URL 을 알려주는데 

이 URL 의 코드는 build 안에 index.html 파일에 있는 코드들이다. 

 

이로써 디플로이를 위한 준비와 실습을 해보았다. 

 

기초적인 내용이지만 작동원리와 파일들을 이해하려고 노력했다. 

3번째 정주행이지만 이제서야 조금씩 이해가 가고 보이는 느낌이다. 

 

앞으로 몇번을 더 봐야 할 지 모르지만 익숙하지 않아 어려운것이라 생각한다. 

익숙해 질때까지 공부하고 연습해야 할 것이다.