공부 하면서 진행했던 React 프로젝트 GitHub Pages 배포하기 🌝

모든 프로젝트는 create-react-app으로 생성했습니다.😁

1. Github 저장소 만들기 🧐

• 프로젝트를 배포할 저장소를 하나 생성해야한다.
  👉 여기는 앞으로 build된 프로젝트를 업로드 하는 공간.

2. 프로젝트 Build

프로젝트를 배포하기 전 package.json 이라는 파일을 오픈하여 다음과 같은 명령어를 추가해야 한다.*

"homepage": "https://daekyeongp.github.io/blog"

👉 형식은 http://{사용자 이름}.github.io/{저장소 이름}로 작성해야한다.

• 위의 내용을 더 자세히 확인하려면 여기를 참고하면 된다.
• 그 후, 리액트 프로젝트를 배포하기 위해서는 Build를 해야한다.
  👉 생성한 프로젝트의 state, props, JSX, 컴포넌트 등의 문법은 브라우저가 해석할 수 없음!
• 이러한 문법을 전통적인 css, js, html 문법으로 바꿔주는 작업을 Build 또는 컴파일 이라고 이해하자. ❗
• 아래의 명령을 통해 Build 해보자.

//npm
$ npm run build

//yarn
$ yarn build

• 위의 작업을 하면 아래의 그림과 같이 작업 프로젝트 폴더 내에 build라는 폴더가 생성된다.

3. 저장소에 업로드

• 자세한 업로드 방법은 [Github] 로컬 저장소와 연동하기를 참고하여 업로드 하면 된다.

• 정상적으로 업로드 했다면 업로드 된 폴더를 들어가서 확인해보자.

• 폴더를 확인 해보면 정상적으로 Build된 파일을 확인할 수 있다.
  👉 만약 실수했다면 과감하게 저장소를 삭제하고 다시 만들자.
• 추가로, 업데이트 사항이 생기면 배포는 어떻게 해야할까 ?🤔
  👉 Build 명령어를 통해 재빌드를 하게되면 css, js 파일 명이 무작위로 다시 생성되기 때문에 모든 파일을 다시 github에 업로드하면 된다.

4. 결과

👉 https://daekyeongp.github.io/blog

• 위의 주소를 확인 해보면 프로젝트가 정상적으로 배포된 것을 확인할 수 있다.👍

Tip ❗❗

• Build 할 때 파일명이 이상하게 바뀌지 않도록 하고 싶은 경우
  👉 ./ 부터 시작하는 경로로 첨부한 이미지, js 파일들은 전부 이름이 변하기 때문에, 파일명이 변하는게 싫다면 public 폴더안에 넣고 Build 하면된다.

• 경로는 반드시 정확하게 지켜주어야 하고, 2 절에서 진행한 package.json 파일에 설정했던 homepage 주소를 제대로 입력하고 Build 하자.

end