[REACT] CMD를 이용해 REACT 개발환경을 설치하는 2가지 방법 - npm과 yarn

 

PC에 리액트 앱을 생성하기 위한 방법은 크게 2가지 이다.

npm과 yarn

 

NPM

NPM은 node.js 에서 제공하는 패키지 매니저(Package manager)이다. 

패키지를 다루는 작업을 편리하고 안전하게 수행하기 위해 수행되는 툴 패키지를 안전하게 배포받기 위해 사용된다.

 

YARN

Javascript 패키지 매니저이다. NPM과 마찬가지로 프로젝트 패키지 의존성을 관리하는 툴이라 할 수 있다. 

 

 

 

---

 

 

[ NPM을 사용한 REACT 설치 ]

1. Node.js

NPM은 node.js 에서 제공하는 패키지 매니저(Package manager)이므로 npm을 사용하기 위해서는 node.js를 먼저 설치해야한다. 

Node.js는 확장성 있는 네트워크 애플리케이션 개발에 사용되는 소프트웨어 플랫폼이다.

 

Install

설치방법은 그리 어렵지 않다. 홈페이지에가서 다운 받아 설치해주기만 하면 끝.

 

https://nodejs.org/en/

Node.js

 

 

 

2. NPX 설치

npx는 npm의 5.2.0버전부터 새롭게 추가된 도구로서, 패키지를 임시 설치해서 실행하는 역할을 한다.

npx는 시행하려는 패키지가 존재하는지 파악하고, 패키지의 최신 버전을 설치하고 실행한 뒤 자동으로 삭제까지 해주는 역할을 한다. 

 

WHY?

그럼 react작업 시 왜 npx가 필요할까.

 

npm을 사용하게 되면 create-react-app을 설치할 때마다  패키지가 중복으로 설치 될 수 있다는 단점이 있다. 그럼 create-react-app를 실행할 때마다 컴퓨터의 용량이 점점 줄어 들게 될 것이다. 

 

이를 방지하기 위해서 사용되는 것이 npx이다. npx create-react-app이라는 명령어를 통해 react를 설치하게 되면 npx는 최신 버전의 패키지를 설치하고 실행한 뒤에 해당 패키지를 제거한다. 

 

Install

2-1. npm확인

npx는 npm이 제공하는 기능이므로 우선 npm이 깔려있는지 확인 되어야 한다. node.js를 깔았다면 자동으로 깔려있을 것이다.

npm

npm이 제대로 설치 되어있다면 npx를 설치할 수 있다.

 

2-2. npx설치

명령어

npm install npx -g

npm을 통해 npx를 설치한다. -g는 global로 선택하겠다는 뜻이다. 

설치중

설치완료

 

 

3. React설치

프로젝트를 만들 폴더로 이동한 뒤 설치해준다.

npx create-react-app [프로젝트명]

 

 

4. 확인

npm run start

실행화면

 

 

 

---

 

 

[ yarn을 사용한 REACT 설치 ]

1. yarn 설치

npm을 통해 yarn설치

npm install --global yarn

 

yarn 버전확인

yarn --version

 

2. create react-app

yarn 명령어를 통해 react를 설치한다.

yarn create react-app [프로젝트명]

 

3. 확인

설치되었다면 해당 경로에 프로젝트 폴더가 생성 되었을 것이다.

폴더로 이동해서 리액트를 시작해보자

yarn start

그럼 브라우저에서 다음과 같은 화면이 열린다.

실행화면

 

 

 

---

 

 

두가지 방식 다 제대로 깔리고 실행되는 것을 확인

 

 

 

 

 

참고자료

https://basemenks.tistory.com/232

https://velog.io/@gth1123/npx-%EB%9E%80

https://geonlee.tistory.com/32

https://hanamon.kr/npm-npx-%EC%B0%A8%EC%9D%B4/

https://joonfluence.tistory.com/659

https://pakss328.medium.com/yarn%EC%9D%B4%EB%9E%80-b4e8edf1638b

https://velog.io/@khy226/Yarn-%EC%9D%B4%EB%9E%80