[React] 리액트 설치 및 실행 방법 (Window 환경)

 

- 리액트 설치 및 실행 방법 -

 

제목처럼 window 환경에서 리액트 개발환경을 세팅했지만

MAC도 상관없이 해당 내용으로 문제 없이 설치 및 실행이 가능하다.

 

그리고 

나는 phpStorm을 사용했지만 이에 상관없이

VSCode나 기존에 사용하는 에디터로 세팅하면 된다.

 

1. node.js 설치

 

https://nodejs.org/ko

Node.js

 

링크로 들어가서 node.js를 다운로드한다.

버전은 LTS와 현재 버전 중 원하는 버전으로 다운로드하면 되는데

어느 버전을 다운 받든 딱히 상관은 없다.

 

나는 안정적인 LTS버전으로 다운을 받았다.

 

 

다운로드받은 node.js 파일을 실행하여 아래과 같이 설치를 진행한다.

 

 

2. npm 버전 확인

설치한 node.js가 제대로 설치되었는지

cmd 명령창에서 " npm-v "를 입력해서 버전을 확인한다.

아래 사진 처럼 버전이 나오면 이상없이 설치가 된 것이다

 

(MAC은 터미널을 열고 입력하면 된다.)

 

3. React 개발환경 세팅 (프로젝트 생성)

 

명령창 또는 터미널에

" npx create-react-app [생성할 프로젝트명] " 을 입력한다.

나는 프로젝트명을 " helloreact "로 할 것이다. 

 

 

그럼 아래와 같이 프로젝트를 생성하는데

생각보다 시간이 다소 걸릴 수 있으니

참고 기다리면 된다.

 

 

아래처럼 cmd 또는 터미널에 해당 문구들이 나오고

마지막에 " Happy hacking! " 이라고 나오면

정상적으로 프로젝트가 생성된 것이다.

 

 

" cd [파일명] " : 생성된 프로젝트 파일로 이동한다.

 

" cd [파일명]  " : 해당 파일로 이동

" cd.. " : 이전 파일로 이동

 

꼭 명령어를 입력하지 않고

메뉴창에 File -> Open 으로 생성한 프로젝트 파일을 찾아 열어도 된다.

 

정상적으로 생성된 프로젝트 구조

 

 

cmd 또는 터미널에 " npm start " 를 입력한다.

 

 

" npm start "가 성공적으로 실행된 cmd 명령창 내용이다.

 

그리고 아래와 같은 " localhost:3000" 주소를 가진

미리보기 페이지가 나오고

리액트 개발환경이 세팅된 것이다.