[React] 앱 개발 환경 구성하기

React 앱의 개발환경 구성을 위하여 아래 대로 따라해봅니다.

1. Node.js 설치 및 VS Code 설치 (아래 공식 사이트에서 다운로드하여 설치)

 https://nodejs.org

 https://code.visualstudio.com/

2. VS Code 열어 Reactjs code snippets 익스텐션 설치 (편리한 React 코드 작업을 위한 옵션)

 

3. 명령행(또는 파워셸)에서 설치된 버전 확인하기

node -v

npm -v

 

4 . React app 만들어 실행하기

명령행(또는 파워셸)에서 아래명령으로 create-react-app 스타터 를 설치한다. 

※ https://github.com/facebook/create-react-app 에서 제공하는 React 앱의 초기 템플릿을 만들어주는 npm 패키지임

npm install -g create-react-app

설치 완료시 아래 명령어로 첫번째 앱을 생성해 본다.

create-react-app myapp

만들어지면 아래 명령으로 실행한다

cd myapp

npm start (개발 모드로 앱을 시작한다, Ctrl+C 로 중지 가능함)

크롬 웹브라우저 등에서 http://localhost:3000로 이동하여 결과 확인

 

※ 개발후 배포시

npm run build 명령시 앱이 build 폴더에 생성되어 웹서버에 배포가능합니다.