React 개발 환경 세팅

필수 프로그램

1. 크롬 브라우저
   우리가 만드는 웹은 브라우저에서 구동된다.
2. VScode
   코드를 작성하기 위한 에디터 프로그램
3. Git
   우리가 작성한 코드를 저장 및 관리하고, 협업자와 공유하기 위한 툴
4. Node
   우리가 작성하는 JS 코드는 Node라는 플랫폼에 의해서 실행됨
5. Yarn
   npm과 동일한 역할을 하지만 npm보다 성능적으로 조금 더 개선된 것

yarn설치하기
npm install -g yarn
yarn설치 확인하기
yarn -v
yarn으로 패키지 설치하는 법
yarn add [설치할 패키지 이름]

npm과 yarn

npm(Node Package Manager)이란?
무수히 많은 third-party 패키지들이 모여있는 집합소, 개발자는 npm에서 여러 패키지를 다운받아 활용할 수 있다.

공통점

1. 둘다 자바스크립트 런타임 환경
2. 애플의 앱스토어, 구글의 플레이스토어처럼 전 세계의 많은 개발자들이 본인들이 만든 유용하고 다양한 패키지들 또는 프로그램을 온라인 데이터베이스에 올려놓는데, 그것을 쉽게 설치하고 삭제할 수 있도록 지원하는 관리자

차이점

1. NPM
   a. node.js를 설치할 때 자동으로 생성
   b. Node Package Manager의 약자
   c. NPM 플랫폼 자체
2. YARN
   a. 2016년 페이스북에서 개발한 패키지 관리자
   b. npm과의 호환성이 좋고, 속도나 안정성 측면에서 npm보다 월등히 좋음
   c. 플랫폼은 아님, 패키지 관리자 혹은 명령어의 개념
3. 요약
   a. 속도 : Yarn wins
   b. 보안 : Yarn wins

명령어

명령어	npm	yarn
dependencies 설치	npm install	yarn
패키지 설치	npm install [패키지명]	yarn add [패키지명]
dev 패키지 설치	npm install --save-dev [패키지명]	yarn add --dev [패키지명]
글로벌 패키지 설치	npm install --global [패키지명]	yarn global add [패키지명]
패키지 제거	npm uninstall [패키지명]	yarn remove [패키지명]
dev 패키지 제거	npm uninstall --save-dev [패키지명]	yarn remove [패키지명]
글로벌 패키지 제거	npm uninstall --global [패키지명]	yarn global remove [패키지명]
업데이트	npm update	yarn upgrade
패키지 업데이트	npm update [패키지명]	yarn upgrade [패키지명]

javascript 런타임 환경의 종류

런타임이란?

프로그래밍 언어가 구동(running)되는 환경(environment)을 말한다.

1. 브라우저
2. node환경