Hiio.com

https://docs.github.com/ko/pages/getting-started-with-github-pages/creating-a-github-pages-site

github pages를 사용하기 위해서는 3가지가 필요합니다.

1. git

2. github repo

3. gh-pages

먼저 https://git-scm.com/downloads 에서 파일을 다운로드 받아 설치해 줍니다.

github에 회원가입 후 접속하면 repository를 만들 수 있습니다.

New 버튼을 클릭하면 repository 생성 페이지로 이동하게 되고, 필요한 내용을 작성합니다.

github pages를 사용하기 위해서 repository는 <username>.github.io 의 이름을 가져야하고, public으로 만들어줘야 합니다.

git 초기화 후 원격 레포지토리를 등록해 줍니다.

git init
git remote add origin "https://github.com/hongsamhc2/hongsamhc2.github.io.git"

gh-pages 를 이용해 배포를 진행하기위해서 설치해 줍니다.

npm install gh-pages --save-dev

package.json 의 scripts 부분에 명령어를 추가해 줍니다.

    "deploy": "gh-pages -d build",
    "predeploy": "npm run build"​

이제 npm run deploy를 실행하면 build 후에 생성된 파일들이 원격 레포지토리 gh-pages 브랜치에 반영되게 됩니다.

npm run deploy

github의 settings 탭에서 pages로 들어갑니다.

Branch 섹션에서 gh-pages를 선택하고 save해 줍니다.

원격 레포지토리에 코드를 올리고 실제 사이트에 반영되기 위해서는  조금 시간이 필요합니다.

이제 https://hongsamhc2.github.io/ 에 접속하면 build된 코드가 반영된것을 볼 수 있습니다.

React 개발환경을 구성하는 방법은 webpack + babel 부터 하나씩 하나씩 하는 방법도 있으나, 그냥 CRA ( create-react-app) 을 해서 리액트 프로젝트에 필요한 부분을 만들어 주자

npx create-react-app <프로젝트명>

https://create-react-app.dev/

공식 사이트로 접속을 하면 필요한 Document들을 보고 따라해 볼 수 있다. 

추가적으로 --template 인자를 통해서 원하는 template 프로젝트를 만들수 있는데, typescript,pwa등등 나는 이번에는 pwa로 한번 포트폴리오 프로젝트를 시작해 보려고 한다.

npx create-react-app <프로젝트명> --template cra-template-pwa

PWA (Progressive Web App) 프로그레시브 웹 앱
웹 앱과 네이티브 앱의 장점을 모두 제공하는 진보된 형태의 웹 애플리케이션 개발
Google I/O 2016에서 처음 소개
오프라인에서 동작설치가 가능쉬운 동기화푸시 알림, 등을 만족해야한다.
출처 - https://developer.mozilla.org/ko/docs/Web/Progressive_web_apps/Introduction

설치가 쭉쭉쭉 되고, 완료되면

위와 같이 디렉토리와 파일들이 생성된 걸 볼 수 있다.

--template cra-template-pwa로 생성된 프로젝트와 기본 cra와 다른점 중 하나는 service-worker 의 유무이다.

pwa에 관련된 포스팅이 아니므로 우선 넘어가기로 하고, 정상적으로 실행이 되는지 npm run start를 해보자.

npm run start

정상적으로 잘 실행이 된다 !!! 야호