[React] React 시작하기(+Node.js 설치)

Cloud SIEM을 만들기 위해 웹 UI를 제작하고자 React를 사용했다.

 

 

1. Node.js와 NPM 설치

https://nodejs.org/en/

Node.js

위 사이트에 들어가서 Node.js를 설치해준다.

 

나는 Windows10을 사용중이므로, Windows x64를 위한 LTS를 다운로드 받아주었다.

 

그냥 계속 Next를 눌러서 기본 설정으로 설치해준다.

 

cmd창을 열어서 제대로 설치되었는지 확인해보자.

node -v
npm -v

위 코드를 통해 node js와 npm이 제대로 깔렸는지 버전확인을 통해 확인해볼 수 있다. npm은 node js가 설치될 때 자동으로 같이 설치된다.

잘 깔렸군 ㅋ

 

 

2. npx 설치

npm install npx -g

npx도 설치해준다.

npm install -g create-react-app

위 명령을 실행해  create-react-app을 설치해준다.

 

./npm install -g create-react-app

이때 npm 명령이 먹히지 않는다면, npm이 설치된 경로(C:\Program Files\nodejs)에 들어가서 위 명령을 실행해준다.

 

 

 

3. 프로젝트 생성

npx create-react-app 원하는 이름

그 후 원하는 폴더에 가서 프로젝트를 생성해준다.

 

그러면 원하는 프로젝트명(react_test)으로 생성된 폴더가 생긴다.

 

 

 

4. VSCode에서 React 프로젝트 실행

이 폴더를 vs code를 사용해 열어주면 다양한 파일들이 생성된 것을 볼 수 있다.

 

터미널을 실행해준다. 터미널이 보이지 않는다면 상단에서 [터미널 -> 새 터미널]을 눌러 실행시켜준다.

npm start

명령을 사용해 프로젝트를 실행시켜주자. 

 

그러면 http://localhost:3000 을 url로 한 react 프로젝트가 잘 실행되는 것을 볼 수 있다.

 

완성~!