yarn과 dependencies / devDepedencies / peerDependencies

매일 yarn을 통해 새로운 라이브러리를 다운 받고, 애플리케이션을 실행한다. yarn을 통해 패키지들을 다운 받고, package.json 파일을 들여다보다가 궁금증이 생겨 글을 작성해본다.

 

yarn은 무엇일까? docs에서는 `Yarn is a package manager for your code. It allows you to use and share code with other developers from around the world. Code is shared through something called a package.` 요롷게 이야기한다.

 

yarn은 npm과 같은 패키지 매니저이다. 거인의 어깨에 올라타라~ 바퀴를 다시 만들지 말라~ 뭐 요론 말들도 있지 않은가. 세상의 훌륭한 개발자들이 만들어 올려놓은 패키지들을 다운 받아 사용할 수 있는데, yarn은 이런 패키지 설치 및 관리를 쉽게 효율적으로 할 수 있도록 도와주는 패키지 관리 툴이다.

 

왜 yarn 일까? 패키지 매니저는 반드시 사용해야 하는 걸까?

우리는 프로젝트를 진행하면서 다양한 패키지를 설치한다. 이 프로젝트에 어떤 패키지를 설치했는지, 해당 패키지의 몇 버전을 사용하고 있는지 등의 관리가 필수적인데, yarn으로 패키지들을 쉽고 효율적으로 관리하는 데 도움을 준다.

 

yarn은 패키지 데이터를 캐시하여, 설치 시에 보다 빠르게 패키지를 다운로드 가능하게 만들어준다. 또한 yarn.lock 이라는 패키지 잠금 파일로 개발자들 사이에서 동일 패키지 설치를 보장한다.

 

package.json과 yarn.lock으로 패키지/버전을 알 수 있고 이 두 파일을 참고하여 yarn install 명령어를 통해 손쉽게 관련 패키지들을 모두 다운받을 수 있기 때문에, 프로젝트 패키지들이 담겨 있는 node_modules와 같은 큰 용량의 무거운 디렉토리도 git에 올릴 필요도 없어졌다는 이점도 있다.

 

yarn은 어떻게 사용하나요?

- package.json 생성

yarn init 명령어를 통해서 프로젝트 정보를 입력하고 프로젝트의 package.json을 생성한다.

$ yarn init

{
  "name": "myProject",
  "version": "1.0.0",
  "description": "yarn init 적용 예제",
  "main": "index.js",
  "license": "MIT"
}

 

- package dependencies 설치

yarn add 명령어를 통해 원하는 package를 설치할 수 있다. 해당 프로젝트를 실행할 경우, dependencies에 기술된 버전의 패키지 반환을 보장하게 된다.

$ yarn add {package name}

{
   "name": "myProject",
  "version": "1.0.0",
  "description": "yarn init 적용 예제",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "eslint": "^8.24.0"
  }
}

 

- package devDependencies 설치

type 관련된 패키지, eslint, webpack, test library 등 빌드나 컴파일에 관련된(애플리케이션 동작에 필요하지 않은) 패키지는 devDependencies로 설치하면 좋다. 이렇게 분리했을 경우, 해당 프로젝트를 빌드/배포 시에 devDependencies에 포함되어있는 패키지들은 제외되어 빌드 결과물 크기를 최적화할 수 있는 이점이 있다.

$ yarn add -D {package name}
$ yarn add {package name} --dev

{
  "name": "myProject",
  "version": "1.0.0",
  "description": "yarn init 적용 예제",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {},
  "devDependencies": {
    "eslint": "^8.24.0"
  }
}

 

- package peerDependencies 설치

해당 프로젝트를 사용하려면 필요로는 하지만, 프로젝트 내에서는 직접적으로 패키지를 가지고 있지는 않은 경우, peerDependencies로 패키지를 명시한다. 해당 프로젝트를 배포하고, 패키지로 사용하는 사용처에서 peerDependencies에 명시된 패키지를 설치해주어야만 해당 패키지를 사용할 수 있다.

 

예를 들어 프로젝트에 airbnb eslint 룰을 적용한다고 했을때, eslint-config-airbnb를 설치하게 되면, 아래와 같은 warning을 받게 된다.

warning " > eslint-config-airbnb@19.0.4" has unmet peer dependency "eslint@^7.32.0 || ^8.2.0".
warning " > eslint-config-airbnb@19.0.4" has unmet peer dependency "eslint-plugin-import@^2.25.3".
warning " > eslint-config-airbnb@19.0.4" has unmet peer dependency "eslint-plugin-jsx-a11y@^6.5.1".
warning " > eslint-config-airbnb@19.0.4" has unmet peer dependency "eslint-plugin-react@^7.28.0".
warning " > eslint-config-airbnb@19.0.4" has unmet peer dependency "eslint-plugin-react-hooks@^4.3.0".

eslint-config-airbnb 를 적용하기 위해서는 사용하려는 프로젝트 내에 eslint, eslint-plugin-import, eslint-plugin-react, eslint-plugin-react-hooks, eslint-plugin-jsx-a11y 이런 package들이 존재해야 한다. (eslint-config-airbnb를 설치한다고 해서 같이 설치되지 않는다.). 이렇게 패키지를 사용하는 사용처에서 갖고 있어야 하는 패키지들을 peerDependencies에 명시한다. 실제로 안내에 나온 패키지들은 eslint-config-airbnb package.json에서 확인할 수 있다.

 

이렇게 peerDependencies를 사용하는 이유는, peerDependencies로 명시된 패키지가 하나의 프로젝트 내에서 여러개의 버전이 아니라 단 하나의 버전으로만 존재할 수 있도록 보장하기 위해서이다.

$ yarn add -P {package name}
$ yarn add {package name} --peer

{
  "name": "myProject",
  "version": "1.0.0",
  "description": "yarn init 적용 예제",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {},
  "devDependencies": {},
  "peerDependencies": {
    "eslint": "^8.24.0"
  }
}