React 개발 환경 구성, 실행

Win10 운영체제를 기준으로 작성된 게시물입니다.

---

React를 사용하기 위해서는 npm을 필요로 하고 npm을 설치하려면 Node.js의 홈페이지에서 Node.js를 설치해야 한다.

(2020.09.12 기준)홈페이지에 들어가보면 설치 선택사항에 LTS버전과 Current버전이 있는데, LTS는 장기적으로 지원이 되는 버전이며 Current는 현재 최신버전이다.

취향대로 설치하여 사용하면 되고 필자는 Current버전으로 설치하였다.

Node.js 홈 

설치가 끝났으면, 설치가 제대로 되었는지를 확인하기 위해 cmd를 열어 npm 버전 체크를 한다.

npm -v

출력 결과로 버전이 나온다면 설치가 제대로 되었다는 것 이다.

---

그럼, 이제 리액트를 사용하기 위해 cmd에서 npm를 이용해 create-react-app을 설치하면 된다.

이때 create-react-app을 어디에서든지 실행하기 위해 -g 옵션을 사용한다. 

npm install -g create-react-app

설치가 끝난다면 이것 역시 마찬가지로 설치가 잘 되었나 확인차 버전 체크를 한다.

create-react-app 에서는 버전 체크를 할 때 v를 대문자로 해줘야 알아듣는다.

아니면 -V 대신 --version으로 해도 알아듣는다.

create-react-app -V

버전이 나온다면 이것 역시 설치가 잘 되었다는 뜻이다.

이제 이 create-react-app을 이용해서 원하는 곳에 프로젝트 폴더를 만들면 된다.

필자는 바탕화면에 폴더를 생성하였다.

이떄 폴더명에 대문자가 들어가면 프로젝트가 만들어지지 않기 때문에, 폴더명은 소문자로 하면 된다.

cmd 경로 표시 -> C:\Users\(UserName)\Desktop>

create-react-app myfirstreact

이후, 설치가 끝났으면 이제 프로젝트 폴더 안에서 리액트를 시작하면 된다.

cmd 경로 표시 -> C:\Users\(UserName)\Desktop\myfirstreact>

npm run start

그럼 이제 브라우저에 새 탭으로 리액트를 실행한 화면이 나올 것이다.

React 실행화면