build & GitHub Pages로 배포

build는 왜해?

우리가 만든 react 프로젝트를 웹에 배포하려면 build용 파일을 생성 후 그걸 웹에 올려야 한다.

왜냐면, 브라우저는 HTML, CSS, JS 3개의 언어만 해석할 수 있다.

리액트의 이상한 state, JSX 같은 문법은 해석할 수 없다.

 

그래서 react 프로젝트 build라는걸 하게 되면 브라우저 친화적인 HTML, CSS, JS파일로 바꿔준다.

이것을 컴파일 또는 build라고 한다.

---

GitHub Pages 배포를 위해 GitHub 계정을 만들도록 하자!

---

 

배포하기 전 체크사항

1. npm start 로 미리보기 시 콘솔창, 터미널에 에러가 있으면 안된다.

2. 경로문제

사이트를 배포할 때 http://sitename.com/에 에 배포하는 경우엔 따로 설정이 필요하지 않지만

http://sitename.com/react/ 처럼 하위 경로에 배포할 때는 프로젝트 설정이 필요하다.

 

package.json 파일에 homepage라는 키 값을 추가해야 한다.

{
    "name": "shop",
    "homepage": "https://aluvy.github.io/react_shop",
    ...

 

그리고 react router가 설치되어 있다면 라우터가 제공하는 basename="" 속성을 추가한다.

자세한 내용 : https://create-react-app.dev/docs/deployment/#building-for-relative-paths

// src/index.js
<BrowserRouter basename="/react_shop">

 

---

build

별 문제가 없다면 이제 터미널에 build 명령어를 입력한다.

build가 완료되면 작업폴더 내에 build폴더가 생성된다. 이것을 서버에 올린다.

npm run build

 

---

질문

Q1. 첫 페이지 로딩 속도를 빠르게 하려면?

원래 리액트, 뷰로 만든 웹앱들은 첫 방문시 필요한 파일을 전부 로드합니다.
트래픽을 조금이라도 줄이고 싶으면 컴포넌트들을 lazy하게 로딩하는 방법을 사용할 수도 있습니다.
공식 튜토리얼에 있는 lazy 함수 : https://reactjs.org/docs/code-splitting.html#route-based-code-splitting  

Q2. build 시 압축 시키지말고 남기고 싶은 파일은?

/public/ 폴더 안에 넣는다.

/public/ 폴더 안에 있는 파일을 사용하려면 페이지 상단에 절대경로로 import 한다.

Q3. 메인페이지 말고 왜 특정 페이지로 접속하면 404 에러가 뜨나요?

서버단 언어로 해결하거나

URL에 # 기호가 붙는 hashRouter를 사용해야 한다. (단점: 검색엔진이 읽지 못함)