npm 과 yarn 라이브러리

node로 프로젝트를 진행할 때, 많이 쓰이는 패키지 관리 툴로는 npm과 yarn이 있다.

1. 패키지 관리자 라이브러리를 사용하는 이유
2. npm과 yarn의 차이점
3. npm
   1. npm 개념
   2. npm 특징
   3. npm 명령어
4. yarn
   1. yarn 개념
   2. yarn 특징
   3. yarn 명령어

 

1. 패키지 관리자 라이브러리를 사용하는 이유

• 리액트는 JavaScript 기반으로 만들어진 라이브러리이며, 다양한 모듈과 라이브러리를 필요로 합니다. 이러한 모듈과 라이브러리들은 각각이 다른 의존성(dependency)을 가지고 있고, 이 의존성 관리를 위해서 패키지 관리자 라이브러리를 사용합니다.

 

• npm과 yarn은 이러한 의존성들을 관리하는 패키지 관리자 라이브러리 중 대표적인 라이브러리입니다. 이 라이브러리들은 프로젝트에 필요한 모듈들을 설치하고, 업데이트하고, 삭제하는 등의 기능을 제공하여 프로젝트 개발을 더욱 용이하게 만듭니다.
• 또한, npm과 yarn은 프로젝트의 의존성을 자동으로 관리해주는 기능을 제공합니다. 예를 들어, 프로젝트에서 사용하는 모듈 A가 모듈 B를 사용하고, 모듈 B가 모듈 C를 사용한다면, npm이나 yarn은 이러한 의존성을 자동으로 파악하고, 필요한 모듈들을 순서대로 설치해줍니다.

=> 따라서, 패키지 관리자 라이브러리를 사용하면, 프로젝트의 의존성 관리를 효율적으로 할 수 있으며, 코드를 보다 쉽게 관리할 수 있습니다.

2. npm과 yarn의 차이점

 

3. npm

   3.1. npm 개념

•  NPM(Node Package Manager)은 자바스크립트 언어를 위한 패키지 관리자로, Node.js의 기본 패키지 관리자이다.
•  이러한 관리 툴을 이용하여 Node.js로 만들어진 모듈을 웹에서 받아서 쉽게 설치하고 관리해주는 프로그램으로 개발자 입장에서는 단 몇 줄의 command로 기존 공개된 모듈들을 설치하고 활용할 수 있다.
• 설치된 모듈들이 업데이트되었는지를 체크해주는 등 JavaScript로 진행하는 프로젝트를 굉장히 편하게 진행할 수 있도록 도움을 준다.

 

3.2. npm특징

• 구성 :   npm( command-line client) +  npm registry
• 이러한 npm이 없었을 때에는 필요로 하는 기능을 추가하기 위해서 직접 작성하거나 github를 통해 다운로드하여 사용해야 했다 -> npm은 이러한 불편을 해소하기 위해 나타났으며, Node.js를 설치하기만 하면(기본적으로 npm은 Node.js 내에 내장되어 있습니다) 명령어 한 줄로 기능의 추가가 가능하다.

3.3. npm명령어

npm을 사용하기 위해서는 몇가지 명령어를 알아둘 필요가 있는데, 프론트엔드 개발을 위해서 사용하는 npm 명령어는 대표적으로 아래와 같다.

 

• npm init : package.json 생성
• npm install : package.json 파일 및 해당 종속성에 나열된 모든 모듈을 설치
• npm install package_name@버전 : 특정 패키지의 특정 버전 설치
• npm install 주소 : 특정 저장소 내 패키지 설치. 주로 github을 이와 같이 설치합니다.
• npm install package_name -g : 옵션. 글로벌로 설치. 로컬의 다른 프로젝트도 이 패키지를 사용 가능하게 됩니다.
• npm uninstall : 패키지 삭제 명령어입니다.
• npm update : 설치한 패키지들을 업데이트해줍니다.
• npm dedupe : 중복 설치된 패키지들을 정리해주는 명령어입니다.

❓ package.json이란?
package.json은 프로젝트 정보와 의존성(dependencies)을 관리하는 문서입니다.
우리가 어떤 패키지(오픈소스)를 사용하는지, 어떤 버전을 사용하는지 등을 기록함으로써 어느 곳에서도 동일한 개발 환경을 구축할 수 있게 해줍니다.

 

// package.json
{
  "name": "yongseong",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

4. yarn

그렇다면 이렇게 편리한 NPM이 있는데 yarn이라는 것은 왜 만들어지게 된 것일까?

 4.1. yarn 개념

• yarn은 페이스북에서 만든 자바스크립트 패키지 매니저이다.  npm과 같은 기능을 수행한다.
• yarn은 기본적으로 npm의 단점을 느꼈기에 이를 향상시키기 위해 만들어진 매니저 툴이다. (그래서, 둘 다 사용해보면 yarn이 조금 더 가볍다는 느낌을 받을 수 있다.)

 4.2. yarn특징

• yarn은 기본적으로 npm의 단점을 느꼈기에 이를 향상시키기 위해 만들어진 매니저 툴이다.
• npm의 단점 : 속도(performance), 안정성(stability), 보안성(security)
  
  • 속도(perfomance)
    • 이론적으로 npm에 비해 패키지 설치속도가 매우 빠르다. 또한 여러개의 패키지를 설치할 때 병렬로 처리하기 때문에 performance와 speed가 증가 된. (npm은 순차적)
  • 안정성(stability)/보안성(security)
    • npm은 패키지가 설치될 때 자동으로 코드와 의존성을 실행할 수 있도록 허용함 -> 이 특징은 편리한 기능이지만 안정성을 위협할 수 있음. +) 특히나 보장된 정책 없이 등록한 패키지가 존재할 수 있다는 점에서 더욱 위험도가 높음.
    • yarn은 yarn.lock이나 package.json으로 부터 설치만 하며, yarn.lock은 모든 디바이스에 같은 패키지를 설치하는 것을 보장하기 때문에 버전의 차이로 인해 생기는 버그를 방지해줄 수 있습니다

4.3. yarn명령어

• yarn init : package.json 생성
• yarn or yarn install : package.json 파일 및 해당 종속성에 나열된 모든 모듈을 설치
• yarn add package_name@버전 : 특정 패키지의 특정 버전 설치
• yarn add 주소 : 특정 저장소 내 패키지 설치. 주로 github을 이와 같이 설치합니다.
• yarn global add package_name : 옵션. 글로벌로 설치. 로컬의 다른 프로젝트도 이 패키지를 사용 가능하게 됩니다.
• yarn remove : 패키지 삭제 명령어입니다.
• yarn upgrade : 설치한 패키지들을 업데이트해줍니다.
• npm dedupe : 중복 설치된 패키지들을 정리해주는 명령어입니다.