[생활코딩] REACT 시작하기(환경설정, 배포)

 

node --version

npm -v

npm install -g create-react-app

: 한 번 다운로드를 받고 이후 추가적인 다운로드가 필요없다. 최신버전을 사용하지 못할 수 있다.

npx create-react-app

: 항상 최신버전의 react를 사용할 수 있다. 매번 새롭게 다운로드 받아야 한다.( 다운로드 이후 삭제되기 때문에 용량차지X)

 

개발을 원하는 폴더에 

create-react-app .

 

(npx create-react-app 만들폴더이름)

 

 

개발을 원하는 폴더로 vscode 를 연 후

npm run start

 

기본적으로 index.html 에 id="root" 인 태그 안에 react를 통해 만든 태그들이 들어간다. (src 폴더안에 있는 파일들을 이용해서 수정)

 

 

 

*react 배포

현재 hello react! 라는 문자밖에 없지만 1.8MB 크기이다. 현재 리액트는 개발 편의성을 위해 여러가지 기능들을 추가해놓은 상태이기 때문에 무거운 상태이다. 그래서 완성한 후 npm run build 라는 명령어를 입력하면 build 폴더가 생성된다. build 폴더 안에 index.html 파일을 보면 공백이 하나도 없는 코드를 볼 수 있는데, create-react-app 이 index.html 파일의 불필요한 용량을 차지하는 곳을 싹 살균시켰기 때문이다. 그러면 실제로 서비스할 때에는 bulid 안에 파일들을 사용하면 된다.

(* 개발할 때는 npm run start : 용량이 크다. *어플리케이션을 완성한 후에는 npm run build : 용량을 줄여준다.)

 

npm run build 을 실행하면 다운로드가 되고,

build 폴더가 추가된다.

build 폴더에 index.html 파일은 create react app이 실제 production 환경에서 사용되는 app을 만들기 위해 이미 가지고 있는 index.html 에서 불필요한 공백과 같은 것들을 지우고 나타난다.

 

 

 

npm install -g serve 를 실행하면 컴퓨터 어디에서나 serve 명령어를 사용하여 web serve를 설치할 수 있고

npx serve를 실행하면 한번만 실행시킬 web serve를 다운로드 받아 실행시킨다.

npx serve -s build 를 실행하면 seve라는 web serve를 다운로드 받아 실행시킬 때 build 폴더를 document root로 하겠다라는 뜻이다.

 

 

수업 : 생활코딩 https://www.youtube.com/watch?v=E_ua6uCQOU&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=9