본문 바로가기
내마음대로만들어보자/React

[복습]React 주요 개념 정리 - React프로젝트 만들기

by 소농민! 2021. 9. 19.
728x90

- 첫 React 프로젝트를 만들기위한 폴더부터 생성해주자.

macintosh HD 아래 사용자 폴더안에 만들어주자

 

필수 패키지에 대해서 설치해두었던 NVM에 대해서 간단히 알아두면,

Node.js의 버전 관리자인데 수많은 버전을 마음대로 골라서 설치할 수 있도록 도와준다! 이걸 직접 관리하기란 쉽지 않기때문이다.

 

- OS 내 터미널에서 NVM을 설치해줬기때문에 VS CODE에서 정상적으로 설치가 되어있는지 버전을 확인해보면된다.

 

nvm --version

 

- 이제 nvm 으로 노드를 설치하자.

https://nodejs.org/ko/

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

 

공식문서에서 버그가 가장 적은 버전인 LTS 라고 부르는데 해당 버전을 설치하면된다.

 

nvm install 설치할버전

 

설치되었는지 확인이 필요한경우,

 

nvm ls

node -v

 

사용할 노드 버전을 바꾸고싶다면,

 

nvm use 변경할 버전

 

- npm으로 yarn 을 설치하기.

NPM은 노드를 설치하면 함께 설치되므로 따로 설치해줄 필요는 없으며, NPM은 무수히 많은 third-party 패키지를 활용할 수 있도록 도와준다. 

 

비슷한 친구로 yarn 이 있다.

둘다 프론트엔드의 의존성을 관리하기 위한 패키지 매니저라고 보면된다!

 

npm install -g yarn 

 

- CRA으로 시작하는 리액트

yarn으로 CRA을 시작해보자. CRA는 create react-app 

 

React는 레고의 한 불럭을 가지고 완성된 모양을 만드는것과 같다.

CRA는 웹사이트를 만들때 필요한 것을 몽땅 넣어둔 패키지이다. 

 

yarn add global creat-react-app

 

이제 첫 프로젝트 만들기

yarn create react-app 프로젝트명