node.js와 npm, yarn 그리고 React

이번에는 내가 궁금했던 것들을 구글링해봤고, 정리하려고 한다.

node.js

Node.js®는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. Node.js는 이벤트 기반, Non 블로킹 I/O 모델을 사용해 가볍고 효율적입니다.

 

 

node.js와 npm 설치는 간단하다. npm의 경우는 Node Package Manager이기 때문에 node.js를 설치하면 같이 설치된다. 

 

node.js를 운영체제에 맞춰 다운로드

https://nodejs.org/en/

 

node -v

터미널에서 코드 입력하면 node.js가 설치된 버전을 확인할 수 있다.

버전이 확인된다면 설치가 정상적으로 된것이다.

 

 

npm과 yarn

 

npm이란?

- 노드 패키지 매니저라는 프로그램으로, 노자바스크립트 라이브러리 설치하고, 버전을 관리한다.

 

npm은 https://www.npmjs.com에서 node_modules라는 폴더에 라이브러리를 내려받아 저장하고, package.json이라는 파일에 설치된 라이브러리의 정보를 적어서 저장한다.

 

1. 첫 번째 역할은 온라인 플랫폼 (opens new window)입니다. 사람들이 노드 패키지를 만들고, 업로드하고, 공유할 수 있는 공간으로 누구나 온라인 플랫폼(npm 레지스트리)에 게시된 패키지를 사용할 수 있습니다.
2. 두 번째 역할은 명령 줄 인터페이스입니다. 온라인 플랫폼과 상호 작용하기 위해 명령 줄 인터페이스를 사용하며 패키지 설치 및 제거가 가능합니다.

npm -v

위에서 node.js를 하면 npm도 함께 설치된다.

그래서 위 코드를 입력해보면 설치된 버전이 몇인지 알 수 있다. 

 

 

 

 

yarn이란?

- yarn은 2016년 페이스북에서 개발한 패키지 관리자이다.

 

 리액트(React)와 같은 프로젝트를 진행하며 겪었던 어려움을 해결하기 위해 개발되었고, npm 레지스트리와 호환하면서 속도나 안정성 측면에서 npm보다 향상되었다. 2016년 페이스북이 공개한 아티클 (opens new window)을 참고하기

 

npm install -g yarn

nvm을 통해 node 버전을 관리하고 있다면 npm을 통해 설치하는 것을 추천한다.

 

맥이용자라면 brew로 설치 할 수 있다.

brew update
brew install yarn

 

---

npm과 yarn의 차이점

 

 

속도

npm과 yarn의 주요 차이점 중 하나는 패키지 설치 프로세스를 처리하는 방법입니다. npm은 패키지를 한 번에 하나씩 순차적으로 설치합니다. 그에 비해 yarn은 여러 패키지를 동시에 가져오고 설치하도록 최적화되어 있어 패키지 설치 속도 측면에서 yarn이 npm보다 빠릅니다.

 

보안

yarn은 보안 측면에서 npm보다 더 안전한 것으로 알려져 있습니다. npm은 자동으로 패키지에 포함된 다른 패키지 코드를 실행합니다. 이로 인해 보안 시스템에 몇 가지 취약성이 발생하며 나중에 심각한 문제가 발생할 수 있습니다. 반면에 yarn은 yarn.lock 또는 package.json파일에 있는 파일만을 설치합니다. 보안은 yarn의 핵심 기능 중 하나이지만 최근 npm의 업데이트에서 npm의 보안 업데이트도 크게 향상되었습니다.

 

 

 

npm과 yarn은 모두 종속성을 관리하고 패키지를 관리하기 좋은 툴이다. 둘 다 지속적으로 관리되고 있으며 폭넓은 사용자 커뮤니티를 가지고 있고, 업데이트를 통해 추가된 기능 덕분에 거의 차이 나지 않게 됐다. 결론적으로 둘 중에 무엇을 선택해야 할지는 개인의 취향, 성능(패키지 설치 속도), 커뮤니티에 따라 달라질 수 있을 것이다.

 

---

 

 

React 이란?

React는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리이다.

 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다.

리액트는 싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발에 사용될 수 있다. 대규모 또는 복잡한 리액트 애플리케이션 개발에는 보통 라우팅, API통신 등의 기능이 요구되는데 리액트에는 기본적으로 제공되지 않기 때문에 추가 라이브러리를 사용해야 한다.

 

 

 

리액트 설치 &사용법

ls #현재 내가 위치하고 있는 곳이 어디인지 확인해보세요.

cd 폴더이름 #리액트 프로젝트를 생성하고 싶은 폴더로 들어갑니다.

yarn create react-app test01 #프로젝트 생성!

cd week-1 # test01 폴더로 이동합니다.

yarn start # 프로젝트 구동!

 

 

 

 

 

 

---

참고한 사이트

 

빠르게 배우는 Node.js와 NPM 설치부터 개념잡기

 

Yarn 톺아보기 · 안녕 프로그래밍

 

npm VS yarn | Cracking Vue.js

 

 

Home | Dan DevLog