[코드잇] 리액트 웹 개발 시작하기 (6)

1. 빌드하기 

 

1) 개발된 프로젝트 빌드하기 

npm run build

 

2) 빌드한 것 로컬에서 실행하기 

 - serve 프로그램을 다운 받고 build 폴더에서 서버 실행

npx serve build

 

2. 웹 사이트 배포하기 (AWS S3)

- 클라우드 컴퓨팅 서비스에서 제공하는 웹 서버를 사용

- 스토리지 -> S3 (구글 드라이브 같은 저장소)

- 1년간 무료 그 이후 유료 

- 버킷 만들기 

- 모든 퍼블릭 차단 버튼 해제 

- 정적 웹 사이트 호스팅 -> S3에 올린 파일을 웹 사이트로 만듬 -> 활성화 체크

- 인덱스 문서, 오류 문서 둘다 index.html을 넣어줌

 ( 오류 문서 = 파일이 없는 경로로 접속하는 경우에 보여 줄 HTML 파일)

 ( 경로 처리를 리액트로 가능)

- 버킷 정책 = 웹 브라우저가 버킷에서 할 수 있는 권한을 설정 해줌

- 정책 생성기 이용

- principal : *

  Action : 1 Action(s) Selected

 

 

3. 브라우저가 리액트를 알아듣는 방식

 

- 웹 브라우저에서는 JSX 문법 사용 불가

- JSX는 순수한 자바스크립트로 번역해서 실행 되어야 함

- Babel을 통해 JSX가 어떻게 순수 자바스크립트로 번역되는지 확인 가능 

- Babel은 대표적인 자바스크립트 트랜스파일러

- JSX로 작성한 파일들은 트랜스파일링을 통해 순수 자바스크립트로 번역

-  번들(Bundle) = 묶음 파일

 build의 js 파일 -> 소스 코드의 파일들을 압축해서 묶어놓은 파일

- 번들링 : 번들 파일을 만드는 것

- 번역된 코드들은 번들링을 통해 웹브라우저가 다운받기 좋도록 묶음으로 만들어짐