[React] React 설치 및 환경 설정

 

VSCode 설치

 

아직 VSCode가 설치되어 있지 않으면 먼저 설치해줍니다.

 

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

Node.js 설치

 

https://nodejs.org/en/

Node.js

 

오른쪽 버전이 더 최신 버전인데, 저는 왼쪽이 가장 많이 사용하고 있어서 왼쪽 버전으로 설치 했습니다.

 

 

node -v
# (윈도우) CMD 창(혹은 VSCode 내 터미널 창) 열어서 버전 확인하기

 

React 설치

 

npx create-react-app '프로젝트명'
# '프로젝트명' 이름의 프로젝트 파일을 기본 세팅

 

 

이처럼 탐색기에 들어가 보면, 파일들이 세팅되어 있는 것을 보실 수 있습니다.

 

 

cd 프로젝트명
# 자신이 만든 프로젝트 폴더 안으로 들어옵니다.

npm start
# 처음에 설치한 Node.js에 내재되어 있는 npm을 실행합니다.

 

 

터미널 창에 저런 문구가 뜨면 성공입니다. 위 로컬, 네트워크 주소 아무거나 들어가시면 다음과 같은 창이 뜹니다.

 

리액트 초기 화면

 

이 화면까지 보인다면 다 끝난 겁니다. 지금까지 파일들을 세팅하면서 설치 된 파일들로 가장 기본적인 리액트 화면을 보여주는 창이 열립니다. 본인이 하는 작업물이 이 페이지에 나타나 이제 작업을 하실 수 있는 환경이 다 세팅 되었습니다.

 

ctrl + c