[ 코딩애플 ] React 리액트 기초 Part5

✏️ 만든 React 사이트 build & Github Pages로 배포

0. 배포하기 전 체크할 사항
(1) 일단 미리보기 띄워볼 때 콘솔창, 터미널에 에러가 나면 안된다
(2) 혹시 사이트를 배포할 때
http://codingapple.com/ 여기에 배포하는 경우엔 따로 설정이 필요없이 대충 해도 되지만 http://codingapple.com/blog/ 이런 하위 경로로 배포하고 싶으면 프로젝트에 설정이 따로 필요하다.

프로젝트 파일 중 package.json 이라는 파일을 오픈해 

"homepage": "http://codingapple.com/blog",

homepage라는 항목을 추가한 후, 배포할 사이트 경로를 뒤에 추가하면 된다. (혹은 /blog 이렇게 경로를 써도 됨)
그리고 리액트 라우터가 설피되어 있다면 라우터가 제공하는 basename="" 속성을 추가하는게 라우팅이 잘 됨!
- 자세한 내용: https://create-react-app.dev/docs/deployment/#building-for-relative-paths

Deployment | Create React App

 

1. 별 문제가 없다면 이제 터미널에 build 명령어를 입력
- state, JSX, <컴포넌트>, props 이런 문법들은 브라우저가 해석할 수 없어 그대로 배포할 수 없다.
- 따라서 이러한 문법들을 CSS, JS, HTML 문법으로 바꿔주는 작업이 필요하다.( 이것을 컴파일 또는 build 라고 한다. ) 
- build 하려면 리액트 프로젝트에서 터미널을 켠 후 아래 입력

npm run build

- 그럼 작업 프로젝트 폴더 내에 build 라는 폴더가 하나 생성되는데 앞서 짰던 코드를 전부 .html, .css, .js파일로 변환해서 거기 담아줌!
- build 폴더 안에 있는 내용을 모두 서버에 올리면 끝! (index.html이 메인 페이지)

 

2. 근데 우린 무료 호스팅해주는 github pages에 올릴 것
(1) guthub.com 로그인
(2) 우측 상단 + 버튼 누르고 New Repository 생성
(3) Repository name은 꼭 왼쪽에 뜨는 본인아이디.github.io 라고 입력, READM 파일 생성도 체크

 

3. Repository에 html 파일 올리기
- repository에 build 폴더 내의 파일을 전부 드래그 앤 드롭
- 주의! build 폴더를 드래그 앤 드롭 아님, build 폴더 안의 내용물을!

 

Q. build 할 때 압축 시키지 말고 남기로 싶은 파일은?
./ 부터 시작하는 경로로 첨부한 이미지, .js 파일들은 전부 이름은 변한다. 이름이 변하지 않게 하고 싶으면 public 파일 안에 넣고 build.

---

본 포스팅은 << React 리액트 기초부터 쇼핑몰 프로젝트까지! >> 강의를 참고합니다.