[React] 리액트 시작하기 (CRA로 생성) - npm,npx,yarn이 뭐야?

1. 환경 세팅

1) node.js 설치하기 

 https://nodejs.org/ko/

//버전 확인: 최신버전 말구 권장 버전을 설치했다.
node -v

2) 패키지 모듈: yarn 설치 (NPM보다 개선된 모듈)

- npm과 Yarn 명령어 차이 : https://classic.yarnpkg.com/en/docs/migrating-from-npm#toc-cli-commands-comparison

- NPM(node package manager)은 node.js에 내장되어있어 별도 설치 X

-  NPM은 자바스크립트 언어를 위한 패키지 관리자로, Node.js의 기본 패키지 관리자이다. npm을 통해 github에서 별도 기능을 다운로드 하지 않고도 명령어를 통해 패키지를 설치 할 수 있다. 

- yarn은 다운받은 패키지 데이터를 캐시에 저장하여 중복되지 않게 하기 때문에 설치 속도가 빠르며  npm에 비해 안전성, 보안성등이 개선되었지만  brew나 npm을 통해 설치를 해줘야하는 불편함이 있다. 

- npm/yarn 추가 설명: https://velog.io/@kysung95/%EA%B0%9C%EB%B0%9C%EC%83%81%EC%8B%9D-npm%EA%B3%BC-yarn

2️⃣ 두가지 방법!서술
// 📌brew로 
brew install yarn

// 📌npm으로 -> npm install로 저장소에 패키지를 설치할 수 있기 때문에 설치 전 저장소를 생성해야된다.
npm init //저장소 생성
npm install yarn 

npm저장소 생성 이유
(npm init을 하지않고 yarn을 설치하면 오류가 발생)

npm WARN saveError ENOENT: no such file or directory

그 이유는  npm도 git처럼 저장소를 만들어주고 사용해야되기 때문이다. 때문에 npm init을 통해 package.json을 생성하여 node.js 프로젝트의 기본적인 정보와 의존성 모듈의 정보를 담는 저장소를 만들어줘야한다. 나는 다른거 건들지 않고 다 엔터치고 저장소를 생성했다! 

 

3) CRA 프로젝트 생성 (모듈)

리액트는 프레임 워크이기 때문에 UI만 제공한다. 때문에 전역 상태관리, 라우팅, 빌드시스템을 개발자가 직접 구축해야된다. 

하지만 모든것을 직접 구축하는 것은 진입장벽을 높게 만들기 때문에 CRA라는 것이 생기게 되었다. (리액트로 프로젝트 생성하는 2가지 방법 중 CRA를 이용해 생성하는 방법 ↓) 

// 📍(내가한방법) yarn으로 설치할 시 
yarn create react-app my-app

// 버전확인
create-react-app --version

// 폴더 이동 후 실행하기
cd 폴더명 
yarn start

 

- 나는 yarn을 통해 설치해서 해당이 안되지만  NPM으로 설치시! 이제는 npm global 옵션으로 create-react-app을 설치할수가 없다.
// NPX를 이용해 CRA로 프로젝트를 생성해야한다. (npx는 npm 버전 5.2 이상부터 가능) 

// 1️⃣이전에 global 옵션으로 설치한 CRA삭제 필요 
npm uninstall -g —-save create-react-app

// 2️⃣global 옵션 대신 아래처럼 설치 
npx create-react-app my-app

// 번외) npm으로 설치시
npm init react-app my-app

npm : 패키지 모듈
npx : npm의 실행 도구 (패키지 다운받지않고 실행만 함) -> 상세한 설명: https://geonlee.tistory.com/32
yarn : npm의 개선된 패키지 모듈

만일 CRA를 통해 프로젝트를 생성하지 않고  yarn init(yarn 사용시) 명령을 통해 package.json파일(Node 프로젝트에 대한 정보를 담고 있는 파일)을 생성시켜줘야한다.