[React] 개발환경 설정 (기초)

React Basic

React 설치 전, 가장 먼저 해야할 일 → node.js 설치

(npx 실행하기 위해서 !)

 

Node.js 공식 홈페이지 https://nodejs.org/ko

안정적인 좌측의 LTS 버전(이전 버전) / 최신 버전 중 원하는 버전으로 다운로드하여 사용하면 됩니다.

버전 확인 방법  

node --vertion

npm -v

 

 

1. 개발환경 설정

terminal 혹은, 프로젝트 폴더를 vs Code로 열고 터미널에 아래 명령어 입력

npx create-react-app .

//작업할 폴더를 생성하지 않았다면 프로젝트 폴더명 함께 입력
npx create-react-app ‘프로젝트명’

npx으로 create react app 생성하기
npx는 일회용으로 설치, 실행, 삭제까지 한번에 가능(항상 최신 버전으로 설치)

 

2. 개발환경 실행

npm start 
//개발환경 실행

Create React App 이용

src폴더에 index.js 파일이 동작파일

npm start 명령으로 실행한 것은 개발을 위한 애플리케이션

배포하기에 용량 크고 불필요한 요소 포함

http://localhost:3000 → 실제 서비스해서 사용할 수 있는 버전, 서비스된 모습

 

아래 이미지처럼 브라우저 열리면 리액트가 정상적으로 실행되었습니다.

 

3. build

npm run build
//배포판을 만드는 과정(build) 

build시, build 폴더가 생성되고 index.html을 의존하는 파일들이 존재

index.html에는 공백없이 빌드됨

 

4. 결과물 실행

npm install -g serve
npx serve -s build

웹서버 serve 의 옵션 -s추가 하면 어떤 경로든 index.htm 파일 서비스

http://localhost:3000 → 실제 서비스해서 사용할 수 있는 버전, 서비스된 모습