yarn이란?
yarn은 npm 동작 방식과 비슷하지만 npm의 단점을 보완해 성능과 속도를 개선한 패키지 관리 도구이다.
📝 npm(Node Package Manager)
npm은 자바스크립트 프로그래밍 언어를 위한 패키지 관리자이다. https://www.npmjs.com에서 공유되는 패키지들을 내려받아 활용할 수 있다.
💡 npm VS yarn
npm은 여러 패키지를 설치할 경우 패키지가 완전히 설치될 때까지 기다렸다가 다른 패키지로 이동한다. 작업이 패키지별로 순차적으로 실행된다는 것이다. yarn은 이 작업들을 병렬로 설치하기 때문에 성능과 속도가 향상된다는 장점이 있다.
npm VS yarn commands
yarn 설치
💻 npm으로 yarn 설치하기
$ npm install -g yarn
직접 홈페이지에서 다운받아 설치할 수도 있다.
🔎 yarn 홈페이지
https://classic.yarnpkg.com/en/docs/install#windows-stable
Alternatives에서 Operating system과 Version을 설정하고 설치 버튼을 눌러 다운받는다.
create-react-app 설치
create-react-app은 리액트 프로젝트에 필요한 패키지들을 묶어 리액트 앱을 생성해주는 도구이다.
💻 CRA 설치하기
$ yarn global add create-react-app
리액트 앱 생성 및 실행
💻 리액트 앱 생성하기
$ create-react-app <프로젝트명>
위 명령어로 현재 작업 중인 폴더 안에 <프로젝트명>에 해당되는 리액트 앱을 생성한다.
예를 들어, react 폴더에 tic_tac_toe라는 리액트 앱을 생성하려면 아래와 같이 cmd 경로를 react 폴더로 이동하여 create-react-app tic_tac_toe를 입력하면 된다.
💻 리액트 앱 실행하기
$ cd <프로젝트명> $ yarn start
cd 명령어로 해당 폴더로 이동한 후 yarn start를 입력하면 브라우저에 http://localhost:3000/ 창이 열리면서 리액트 앱이 실행되는 것을 확인할 수 있다.
