React 개발 환경 구축 - yarn과 CRA 설치

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/ 창이 열리면서 리액트 앱이 실행되는 것을 확인할 수 있다.

---

📚 Reference

• https://javascript.plainenglish.io/npm-vs-yarn-choosing-the-right-package-manager-a5f04256a93f