[React] React 로 To-Do List 만들기 (2) - yarn 설치 및 CRA로 react 환경 만들기

NVM으로 node와 npm을 설치해주었으니, yarn을 설치해보자.

yarn이나 npm이나 똑같이 패키지 관리 툴인데, 듣기로는 yarn이 좀 더 안정적이라고 하는 것 같다.

(나는 npm이 더 익숙하고 차이가 잘 느껴지진 않는다..)

 

vs code에서 git bash를 열어 yarn을 설치한다.

$ npm install -g yarn

 

그리고 CRA를 설치해주자 (create-react-app)

$ yarn global add create-react-app

설치가 잘 된 것을 확인할 수 있다.

 

 

 

이제 react 환경을 만들어보자. git bash에 아래와 같이 치면 알아서 만들어진다.

$ npx create-react-app todo-list

create-react-app은 리액트 환경을 만들어주는 거고, todo-list는 만들고자 하는 폴더명이다.

todo-list 부분은 원하는 대로 수정해도 상관없다.

 

한 2분 정도 소요되며 다 되면 Happy hacking! 이라는 문구가 나온다.

 

 

터미널에서 cd todo-list를 통해 폴더로 이동해도 되고, vs code를 열어서 todo-list 폴더를 열어도 된다.

그리고 git bash에서

$ yarn start

 

잘 실행이 되면 자동으로 localhost:3000번이 열리면서 react 페이지가 나타난다.

Compiled successfully!

You can now view todo-list in the browser.       

  Local:            http://localhost:3000        
  On Your Network:  http://0000000000:3000     

Note that the development build is not optimized.
To create a production build, use yarn build.