[React] 리액트 개발환경 구축

1. 노드 버전 매니저 (NVM) 설치

리액트는 javascript 기반이라 노드제이에스(Node.js) 런타임으로 돌리겠습니다.

그래서 편하게 NVM 깔고 버전 관리하면서 구축하는 방향으로 고고~!

 

https://github.com/coreybutler/nvm-windows/releases

Releases · coreybutler/nvm-windows

여기 들어가서 Assets에 있는 nvm-setup.zip 설치

 

2. NVM 설치 확인하기

명령 프롬프트 (윈도우면cmd) 열어서

> nvm -v
Running version 1.1.7.

Usage:
어쩌구저쩌구
....

이렇게 나오면 성공입니다.

안되면 재부팅, 파일패스나 환경변수 확인

 

3. NVM으로 노드제이에스 설치

명령 프롬프트에서 아래처럼 입력 (버전은 원하는데로)

> nvm install 14.15.4

그럼 막 머라고 나오면서 뭔가 깔리는 느낌이 듭니다.

 

마지막으로 아래처럼 사용 설정 입력

> nvm use v14.15.4
Now using node v14.15.4 (64-bit)
> node -v
v14.15.4
> npm -v
6.14.10

노드 패키지 매니저(npm)는 라이브러리 관리해주는데

요놈보다 페이스북에서 개발한 yarn 더 좋다고 하니

더 좋은거 써야겠지요~ 참고로 리액트도 페북에서 개발 d^^b

 

4. yarn 그리고 create-react-app 설치

윈도우는 여기서 설치

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

Yarn

그 외는 명령 프롬프트에서

> npm install -g yarn

yarn 설치 끝나면 create-react-app 설치

> yarn global add create-react-app

안되면 재부팅, 파일패스나 환경변수 확인

 

마지막으로 리액트 앱 생성 및 구동

--scripts-version 생략은 최신버전 (참고 링크)

> yarn create react-app 프로젝트이름 --scripts-version 원하는버전
> cd 프로젝트이름
> yarn start

 

그러면 본인의 기본 브라우저에서 로컬호스트로 스타트 페이지가 나옵니다!

5. 리액트 프로젝트에 라이브러리 추가

각각의 프로젝트마다 필요한 라이브러리가 다르기 때문에

프로젝트 루트 폴더에 가보면 package.json 요놈으로 관리합니다.

많이 중요한 분이니 잘 관리하시고, 이것저것 추가한 다음에 루트에서

> yarn

딱 저거 치면 혼자서 난리부르스 경고 뜨고 하니, 매의 눈으로 잘 살펴봅니다.

 

그럼 오늘은 여기까지! 참 쉽죠?

---

2020/08/21 - [Web프론트엔드/리액트] - [React] Visual Studio Code 및 관련 플러그인 설치