윈도우 ReactJS 개발환경 구축하기 create-react-app

 

Node.JS와 npm 설치하기

https://nodejs.org/ko/download/

다운로드 | Node.js

 

윈도우 인스톨러 버튼을 클릭하면 가장 적합한 버전을 다운받을 수 있다.

 

 

별 다른 과정없이 NodeJS와 npm 설치를 끝마쳤다.

 

 

 

yarn 설치하기

https://yarnpkg.com/en/docs/install#windows-stable

Yarn

 

yarn 은 자바스크립트의 새로운 패키지 매니저다.

npm 은 의존하는 라이브러리가 많아지면 속도가 저하된다고 한다.

위 주소에서 Download Installer를 통해서 도구를 받을 수 있다.

 

 

 

NodeJS, npm, yarn의 버전 확인하기

명령프롬프트(cmd)에서 node -v npm -v yarn -v를 입력한다.

 

버전을 확인할 수 있다.

 

 

CRA(create react app) 설치 + 리액트 앱 만들기

npm install -g create-react-app

 

cmd 창에 입력한 후에 설치가 완료되면

 

create-react-app 프로젝트명

 

 

위에서 깔아준 패키지 매니저 yarn을 통해 패키지 설치를 한다. 

설치는 꽤 오래 걸리는 편이다. 

 

만약 기본 설정되어 있는 디렉터리가 아닌 다른 곳에서 작업을 진행하고 싶다면 cd 명령으로 디렉터리를 이동한 후 진행하면 된다.

 

설치가 완료되면 지정했던 곳에 프로젝트명으로 된 디렉터리가 생겨있는 것을 확인할 수 있다.

 

 

react-scripts 실행

cd 명령을 이용하여 프로젝트명으로 생성된 디렉터리에 들어간 후

yarn start

명령으로 react-scripts를 실행시킨다.

 

컴파일이 성공적으로 완료되었다는 메세지와 함께 로컬서버와 네트워크 IP 주소도 볼 수 있다.

브라우저가 하나 열리는데, Edit src/App.js and save to reload라고 적혀있다.

 

이제 용도에 알맞게 소스를 편집하면 되겠다.

간단하게 ReactJS 개발환경 구축 완료 :D