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

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

npm run build

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

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

npx serve build

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

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

- 1년간 무료 그 이후 유료

- 버킷 만들기

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

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

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

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

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

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

- 정책 생성기 이용

- principal : *

Action : 1 Action(s) Selected

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

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

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

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

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

- 번들(Bundle) = 묶음 파일

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

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

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

JuSoft