MS Azure로 갈아타기 - 4. React 어플리케이션 만들기

이번 포스트에서는 기본적인 React 어플리케이션을 생성하고 Github에 등록하여 소스 관리가 가능하도록 구성해보겠습니다. 다음 과정으로 진행하겠습니다.

• React 어플리케이션 생성
• Github 등록

React 어플리케이션 생성

1. react app을 생성합니다. 로컬 머신의 nvm을 통해 Node 8.10.0 버전 이상을 설치하고 진행하시기 바랍니다. 만약 하위 버전을 사용해야 한다면, create-react-app 모듈을 별도 설치해 진행해주셔도 무방합니다.

   node --version # v8.10.0 이상
   npx create-react-app my-react-app

2. react app을 실행해봅니다. 브라우저에 정상적으로 뜬다면 성공입니다.

   cd my-react-app
   npm start
   

   Compiled successfully!
   
   You can now view my-react-app in the browser.
   
     Local:            http://localhost:3000/
     On Your Network:  http://xxx.xxx.xxx.xxx:3000/
   
   Note that the development build is not optimized.
   To create a production build, use npm run build.

3. 빌드를 해봅시다. 생성된 결과물은 추후 가상머신 웹서버에서 서빙할 예정입니다.

   npm run build

   > playground@0.1.0 build /Users/a1101041/Workspace/playground
   > react-scripts build
   
   Creating an optimized production build...
   Compiled successfully.
   
   File sizes after gzip:
   
     34.71 KB  build/static/js/1.fa92c112.chunk.js
     763 B     build/static/js/runtime~main.229c360f.js
     713 B     build/static/js/main.52fd3884.chunk.js
     510 B     build/static/css/main.d4a37200.chunk.css
   
   The project was built assuming it is hosted at the server root.
   You can control this with the homepage field in your package.json.
   For example, add this to build it for GitHub Pages:
   
     "homepage" : "http://myname.github.io/myapp",
   
   The build folder is ready to be deployed.
   You may serve it with a static server:
   
     npm install -g serve
     serve -s build
   
   Find out more about deployment here:
   
     http://bit.ly/CRA-deploy

Github 등록

1. git log를 실행해봅니다. create-react-app v2.1.3 기준으로 커밋이 자동 생성됩니다. 만약 git 프로젝트 생성되지 않았다면, git init을 해줍시다.

   git log

   commit c9f306ff948b94a3d34d35d42868a852dc76754c (HEAD -> master)
   Author: Youngkyun Kim <yg.kim@sk.com>
   Date:   Sun Jan 27 13:07:15 2019 +0900
   
       Initial commit from Create React App

2. github에 새 프로젝트를 생성합니다.
3. 생성된 프로젝트로 remote 설정을 한 뒤 소스를 푸시합니다. github 계정에 SSH 설정이 되어있지 않은 경우 미리 해주도록 합시다.

   git remote add origin git@github.com:chancethecoder/my-react-app.git
   git push -u origin master

4. github 세팅이 완료됐습니다. 이제 본인이 개발하고자 하는 react 어플리케이션을 개발하면 됩니다.