[Github] 리액트 깃허브 배포

 

 

html css js 작업 후 작업 후 복습겸 간단하겠거니하고 리액트로 변환한 뒤 깃허브로 배포 하려고 하는데 깃허브 배포부분에서만 반나절 이상을 썼다.

구글링을 하니 여러방법이 있었는데 git, github를 제대로 이해하지 못하고 따라하기만하니 여러가지 에러가 발생했다.( node 전체 삭제 후 최신버전 재설치, yarn 재설치, 터미널 대참사)  찾은 방법 중 유일하게 된 이해가 된 방법으로 정리하려고 한다.

 

 

참고: create app react 로 제작된 리액트 페이지입니다. (설치법은 생략)

1. Github repositories 생성  

     1.GIthub 계정을 만든후 New repository를 클릭한다.

 

2.Build, Compile 

Q:html, css, js 업로드 하듯  app.js 드래그 해서 올리면 배포가 안되는거죠?

A: 웹브라우저는 HTML CSS JS 언어만 해석이 가능하기 때문에 리액트 문법인 state, JSX를 해석하지 못한다.

리액트 프로젝트를 build 라는걸 하면 브라우저가 해석 가능한 HTML, CSS, JS 파일로 바꿔줍니다. ==> compile, build라고 한다

 

작업한 폴더 vscode 에서 터미널창에 입력

npm run build

yarn build 
//둘중 하나를 입력해줍니다.

 

실행이 올바르게 된다면 build 폴더가 형성된걸 볼 수 있다.

 

 

폴더를 열어서 build 클릭 >> 내부에 있는 모든파일을 좀전에 새로 만들어둔 github repository에 드래그 & 드랍 해준다.

주의: build 폴더 자체를 드래그드랍 하면 안되고 클릭부 내부 파일들을 드래그드랍해줘야한다.

 

 

이후 세팅 > pages 들어가 source 부분을 main으로 바꿔준다 그러면 상단에 홈페이지 주소가 뜨는데 약 10분 후 링크 접속하면 페이지 배포가 끝난다.

 

 

 

업데이트가 된다면 

npm run build

yarn build 
//둘중 하나를 입력해줍니다.

를 또 해주시고 이전과 같이 build 폴더내 파일들을 업로드 하면 됩니다.

 

 

 

올바르게 배포가 된 모습이다.

 

회고)

1. git, github에 대한 추가적인 공부가 필요하다고 느꼈다.

2.나중에 백엔드와 협업시 네트워크가 어떻게 이뤄지는지에 대한 공부가 필요할 것 같다. (http기본, 네트워크 기본방식 등)