React - 깃허브 배포

브라우저는 HTML CSS JS 이 세개의 언어만 해석가능
그러므로 빌드해서 요 언어로 바꾼 다음에 배포해야함

1. cmd창에 npm run build

2. 우측상단 new repository 에 들어간 후
   Repository name에 깃허브아이디.github.io

3. dist에 있는 파일 올리기

음 쌤이 알려준 방법은 배포파일을 직접 올리는 형태이고 이러면 바로바로 수정한걸 배포하기 어렵다.
깃의 기능을 사용하지 않는 그저 사이트만 띄우기 위한 방법인듯 싶음
보통 깃에는 코드를 올리고 브랜치로 배포를 따로 파는 방법을 씀
수정사항 있을때마다 Repository 만들건 아니잖아

깃연결 및 배포

1. 프로젝트에 깃 연결
   sh에 git init > git remote add origin https://github.com/사용자이름/저장소이름.git

   git add . //내 프로젝트 전부 깃에 올림 > git commit -m "첫 커밋" > git push -u origin main

2. 배포 branch 파기
   npm install --save-dev gh-pages //branch 패키지 설치> 깃허브에 Settings > Pages > Build and deployment > Branch > branch를 gh-pages로 저장

3. package.json에 스크립트 추가

"scripts": {
  "predeploy": "npm run build",	//npm run deploy 하기전에 dist로 빌드 먼저 자동으로 해줌
  "deploy": "gh-pages -d dist"	//branch에 배포파일 보내겠다.
}

4. 배포
   npm run deploy

---

생각보다 깃에 반영되는데 시간걸림
하다보면 병합,충돌 문제 발생할수 있음. 알아서 하시고

그 이후부턴
저장 > git add . > git commit -m "수정comment" > git push -u origin main > npm run deploy
순서대로 하면 됨

아니면 진짜 극도의 귀차니즘을 갖고있다면 package.json에

"predeploy": "git add . && git commit -m 'Deploy updated site' && git push origin main",  
"deploy": "npm run build && gh-pages -d dist" 

이런식으로 할수도 있다. npm run deploy만 누르면 전부 자동으로 되서 진짜 편하다
내가 한것만 배포하고 싶으면 이렇게 하면 안되겠지