리액트 시작하기

NVM(Node Version Manager)

nvm은 Node.js의 버전 관리자이고 nvm을 통해 node를 설치하면 여러 버전을 한번에 관리하고 쉽게 꺼내서 쓸 수 있다.

nvm 설치 확인하기

nvm --version

Node.js를 설치

관련 명령어들

nvm ls # nvm으로 설치한 노드 버전 리스트 확인 명령어
node -v # 노드 버전 확인 명렁어
nvm use [사용할 노드 버전]

패키지 매니저

npm, npx 그래도 사용해도 좋지만 yarn을 사용해보자.
(yarn이 조금 더 빠르다고 한다. yarn을 쓸때는 install이 아니고 add를 사용)

# npm으로 패키지를 설치할 때는 아래 명령어를 사용해요!
# 옵션은 필요한 경우에만 적어줍니다.
# npm install [옵션] [설치할 패키지 이름]

npm install -g yarn 

# 이 명령어는 "npm으로 yarn을 컴퓨터 전체에 설치한다"는 뜻입니다.
# -g 옵션은 컴퓨터 전체에서 쓸 수 있게 한다는 뜻입니다.

yarn -v

CRA(create-react-app)으로 시작하는 리액트

CRA(Create React App)는 웹사이트를 만들 때 필요한 것을 몽땅 때려넣어 만든 패키지

# 옵션 global은 전역에 이 패키지를 깔겠다는 뜻입니다.
yarn add global create-react-app

리액트 프로젝트 만들기

# yarn create react-app [우리의 첫 리액트 프로젝트 이름]
# 우리가 설치한 create-react-app 패키지를 써서 프로젝트를 만들어요.
# 주의! 꼭 sparta_react 폴더 경로에서 입력해주세요!
yarn create react-app week-1

폴더 열기 → sparta_react → week-1 폴더를 선택해 다시 열어준다.

리액트 앱 실행법

cd week-1 # week-1 폴더로 이동합니다.
yarn start