[react] 리액트 window용 개발환경 설치하기(ft. cra, node.js npm yarn)

 

리액트 개발 환경 설치

방법입니다. 

 

1. Node.js 설치

Node.js는 크롬 v8 자바스크립트 엔진을 기반으로 한 서버사이드 자바스크립트 런타임입니다.
아래 Node.js 공식 홈페이지로 이동해주세요. 

nodejs.org/ko/

Node.js

 

node.js 첫 화면에서 오른쪽의 최신 버전으로 다운로드합니다. 

 

설치 화면

 

위의 추가적인 설치 화면이 나오면서 설치가 완료됩니다.
최신 node.js는 설치와 동시에 npm이라는 패키지 관리 도구까지 설치가 됩니다.
이제 npm을 이용하여 create react app을 설치하여 리액트 프로젝트를 시작할 수 있습니다.

윈도우 검색창에 cmd 검색 또는 명령크롬프트를 시행하여
"node -v"   명령어로 Node.js가 최신 버전으로 설치된 것을 확인할 수 있습니다. 

이렇게 Node.js 설치를 완료했습니다.

 

2. create react-app 설치 (cra)

터미널 창에서 cd 명령어를 통해 해당 폴더 위치로 이동 후 다음 명령어를 입력합니다.

npm install creat react-app [프로젝트 이름]

 

이미 만든 폴더 안에서 cra 설치할 경우

npx create-react-app .

 

예제

 

완료

프로젝트 생성이 완료 되었습니다.

 

로컬 서버 띄우기

프로젝트 생성 후  cd react-redux로 프로젝트에 접근한 후, npm start로 로컬 서버( Local: http://localhost:3000)를 띄웁니다.

cd react-redux
npm start

 

3. yarn 설치하기

기본적으로 node.js는 패키지 관리 도구로 npm을 사용하지만
리액트 프로젝트는 yarn을 사용할 것을 권장합니다.
npm과 yarn 모두 자바스크립트를 이용한 개발에 주로 사용되는 패키지 관리 도구입니다.
하지만 yarn은 npm보다 속도가 현저하게 빠릅니다.
아래의 사이트로 이동하여 윈도우용 yarn을 설치합니다.

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

Yarn

설치를 완료하였습니다. 

이제 다시 명령프롬프트로 돌아가서 다음 명령어를 입력합니다.

yarn start

 

로컬 서버가 실행됩니다.