nvm으로 nodejs 설치하기

첫 react 프로젝트 만들기

 

vsc 터미널에서 설치해줄 게 좀 있다 !

1.  nvm으로 노드js를 설치해줬다.

nvm install [설치할 버전]

나는 16.14.2버전을 설치해줬다.

nvm install 16.14.2

이렇게 vsc 터미널에 적어주면 된다.

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

+) nvm에서 사용 중인 노드 버전 바꾸기

nvm use [사용할 노드 버전]

이렇게 간단하게 노드 버전도 터미널을 통해 변경해줄 수 있따.

 

2. npm으로 yarn설치하기

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

npm install -g yarn 

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

잘 설치되었다면 아래처럼 yarn -v 명령어로 yarn의 버전을 확인하실 수 있다.

yarn으로 패키지를 설치할 때는? yarn으로 패키지를 설치할 때는 아래 명령어를 사용한다. 명령어가 조금 더 직관적이다.

 

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

 

3. yarn으로 CRA를 설치하자!

 

yarn add global create-react-app

• CRA가 뭘까? 👉 React는 레고같은 친구. 어린이들이 레고로 성을 만드는 것처럼 우리는 React로 웹사이트를 만듭니다.

 

4. 첫번째 프로젝트 파일 생성하기 !

 

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

 👉 React에서는 프로젝트를 앱이라고 부른다. 리액트 프로젝트와 리액트 앱은 같은 말이니, 편한 쪽으로 말하면 된다.

 

설치가 끝났다면 터미널 창에 또 입력해줘서 리액트 앱을 실행시킨다 !

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

이러면 브라우저가 열리면서 리액트 앱이 실행된다 ~~~신기방기

 

설치 완료 ~

내가 나중에 보기 위해 포스팅하기 ! 

미래의 나를 위해 ㅎㅎ