깃허브로 내가 만든 리액트 페이지를 올려보자

프런트엔드 페이지를 만들면서 구글링을 하다보면, 종종 다른 분들이 만들어놓은 페이지에 들어가 이것저것 눌러볼 수 있었다. 주소를 보니 깃헙을 통해 만든것 같았는데 어떻게 만드는지 도무지 몰랐지만, 이 역시도 구글링을 통해 알게되어 다른 분들도 쉽게 만들 수 있도록 도움을 드릴겸 공부한 기록도 할겸 적어본다.

기본 VSCode 설정

리액트로 개발을 하기 위해서는 먼저 Nodejs를 설치해야한다.

Nodejs 설치

VSCode 터미널에서 npx를 추가로 설치해야한다

npm install npx -g

프로젝트 생성

원하는 프로젝트명을 넣어 리액트 기본 페이지를 생성한다.

npx create-react-app "프로젝트명"

나는 네이버 메인화면을 만들어보고 싶어서 "naver-page" 를 프로젝트명으로 사용했다.

성공적으로 실행되면 Happy hacking!이라는 문구와 함께 완료가 된다.

이제 내가 만든 프로젝트 폴더로 들어간다.
그래야 내가 만든 프로젝트에서 명령어를 실행할 수 있다.
그리고 리액트 프로젝트를 실행해서 잘 작동하는지 확인한다.

cd "프로젝트명"
npm start

리액트 기본화면이 잘 나온다.

깃헙 환경설정

깃헙에 내가 만든 프로젝트를 public으로 올린다.

그 후 깃헙 프로젝트에 들어가서
상단 톱니바퀴 Settings 클릭

맨 밑에서 두번째 GitHub Pages의 Check it out here! 클릭

Source의 branch가 None으로 되어있을텐데, 이를 master로 바꾸고 Save를 하면 상단에 내가 publish한 페이지 주소가 뜬다. 이를 확인하고 클릭해본다.

뭐야...? 내가 만든 페이지가 아니라 README가 뜨네...?
여기서 추가로 설정을 해주어야 내가 만든 화면을 보이게 할 수 있다.

추가 환경설정

gh-pages를 설치하고, package.json에 코드를 수정한다.

npm install gh-pages

package.json 파일의 scripts 부분에 코드 추가

"predeploy": "react-scripts build",
"deploy": "gh-pages -d build"

마지막 부분에 페이지 링크 추가

"homepage": "깃헙프로젝트링크"

그리고 deploy 명령어를 실행한다.

npm run deploy

변경된 package.json과 package-lock.json 커밋-푸쉬한다.

그리고 깃헙 프로젝트 화면에 돌아와보면 gh-pages 라는 브랜치가 새로 있는게 보인다.

다시 Settings-GitHub Pages-Check it out here! 클릭

Source의 Brance를 gh-pages로 변경하고 Save한 후 상단의 링크로 확인한다.

주의사항

바로 바뀌진 않고, 몇분정도의 시간이 걸린다.

그리고 추가로 수정을 한 후 수정한 코드만 커밋-푸쉬한다고 바뀌지 않는다.
꼭 deploy를 추가로 해주어야한다!

npm run deploy