React JS를 Github Pages에 호스팅하기

  • 페이스북의 React JS 라이브러리를 Github Pages에 호스팅하는 방법을 알아보는 글 입니다.

React JS란

  • 웹은 기본적으로 front-end와 back-end로 나뉩니다.
  • front-end는 client쪽의 작업을 말합니다.
  • back-end는 server쪽의 작업을 말합니다.
  • React JS는 페이스북에서 만든 프론트엔드 라이브러리입니다.
  • React JS를 정확히 정의하려면 별도의 글을 써야할만큼 복잡하지만.
  • 쉽게 말해 user interface 만드는 것을 도와주는 라이브러리입니다.

Github Pages란

  • Github Pages는 정적인 페이지를 호스팅 해주는 서비스입니다.
  • 많은 호스팅 서비스 중에 Github Pages를 선택한 이유는 다음과 같습니다.
  • 호스팅하는 소스코드를 공개할 경우 무료입니다.
  • 깃허브 리포지토리의 소스코드를 직접 호스팅해줍니다.
  • 무료인것도 좋지만, 깃허브 리포지토리를 직접 호스팅해주는 것은 굉장한 강점입니다.
  • 버전 관리 시스템인 Git을 통해 안정적으로 코드를 관리할 수 있습니다.

웹 앱 호스팅하기

  • 이제 React JS로 만든 웹 앱을 Github Pages에 호스팅하는 방법을 알아보겠습니다.
  • 준비사항 : 코드 에디터, Git, Node.js, npm, Github 계정
  • 위 준비사항을 본인 컴퓨터에 준비해주세요.
  • React JS 앱을 만들 디렉토리로 이동합니다.
$ cd /Users/username
  • npm으로 React 패키지를 설치합니다.
$ npm install -g create-react-app
  • 새로운 React JS 앱을 생성합니다.
$ create-react-app appname
  • 생성된 앱을 실행합니다.
$ cd appname
$ npm start
  • 이제 Github에 새로운 리포지토리를 생성합니다.
react-js-github-pages-deploy
  • 로컬 React 프로젝트에 Git을 추가해 리포지토리로 만듭니다.
$ git init
$ git add .
$ git commit -m 'initial commit'
  • Git을 push 합니다.
$ git remote add origin https://github.com/username/repository-name.git
$ git push origin master
  • npm을 사용해 gh-pages 패키지를 설치합니다.
$ npm install --save gh-pages
  • React 프로젝트의 package.json 파일을 수정합니다.
  • homepage 주소를 수정하고 predeploy와 deploy를 scripts에 추가합니다.
react-js-github-pages-deploy
  • 마지막으로 React 앱을 deploy합니다.
$ npm run deploy