React 프로젝트 만들기 - 기본세팅

1. NVM 과 VSCODE 설치

2. 폴더 생성

     macintosh HD → 사용자 → [내 컴퓨터 이름] 아래에 만든다.

 

※ NVM 으로 노드 버전을 관리해보자

    NVM(Node Version Manager)을 왜 써야하는이유!!!

    nvm은 Node.js의 버전 관리자입니다.

    우리 컴퓨터에 node를 설치하는 툴인데 수많은 버전을 마음대로 골라 설치할 수 있게 해주는 친구

    여러버전의 Node.js 버전을 쉽게 관리 할 수 있도록 해준다.

 

3. nvm 설치 확인하기

    vs code 터미널을 통해 nvm --version 으로 확인

4. nvm 으로 노드설치하기

https://nodejs.org/ko/

Node.js

노드 공식사이트에서 버그가 가장 적은 버전 LTS버전이라고 불리우는 녀석을 설치해보자.

 

명령어 : nvm install 설치할버전

 

버그가 가장 적다는 LTS 버전으로 설치를 해보자!

 

설치가 되었다면 아래 명령어로 설치되었는지 확인가능

 - nvm ls # nvm으로 설치한 노드 버전 리스트 확인 명령어

 - node -v # 노드 버전 확인 명렁어

 

참고로, nvm에서 사용중인 노드 버전을 바꾸기위해서는 아래와같이 명렁어를 쓰면된다.

nvm use 사용할 노드 버전

 

다음으로, npm 으로 yarn이라는 친구를 설치해보자!

 

- NPM(Node Package Manager)은 무수히 많은 third-party 패키지를 활용할 수 있게 해준다.

   (NPM은 노드를 설치하면 자동으로 같이 설치된다고한다.)

- 비슷한 친구로는 yarn이 있는데,  둘 다 "프론트엔드 의존성"을 관리하기 위한 "패키지 매니저"

   → "누가 만들어 놓은 좋은 것"(= 패키지)

 

* yarn 설치 명령어

npm install -g yarn 

 

→ 필요한경우 [옵션] [설치할 패키지이름] 도 사용가능

→ -g 컴퓨터 전체에 사용할 수 있도록 설치한다는 의미 

 

또한, yarn 으로 패키지를 설치할때에는 조금더 직관적으로 명령어를 사용한다.

yarn add [옵션] [설치할 패키지 이름]

 

이제 yarn으로 CRA를 설치해보자. → CRA(create-react-app)으로 시작하는 리액트

yarn add global create-react-app

→ -g 와 global 은 같은의미

 

CRA란?

React는 레고같은 녀석이라고한다. 내가 이해한 바로는 여러가지의 레고 블럭을 가지고 해리포터 성을 직접 만드는건 어렵지만

이미 만들어진 해리포터 성 패키지를 산다면 만드는건 어려운일이 아닌것처럼

웹사이트를 만들때에도 여러가지 패키지를 사용해서 만든다면 어려운일은 아닐것이다. 이 CRA는 웹사이트를 만들떄 필요한 것을 모두 모아 만든 패키지이다!

 

이제 마지막으로, 첫 리액트 프로젝트를 만들어보자.

yarn create react-app week-1

그러면, 리액트에 필요한 기본 폴더는 자동으로 생성을 해주고 이제 yarn start 를 하면 실행되는것을 볼 수 있을 것이다.