useCodeusecode logo

Yarn - 처음 보는 자바스크립트의 새 패키지 매니저

October 26, 2016

2020년 1월 24일에 Yarn 2.0 버전이 릴리즈되었습니다. 처음 이글을 번역했을 때는 초기 버전(0.x) 버전 때였기 때문에 맞지 않는 부분이 있을 수 있으니 이점 유의해주세요.

원문: 원문 링크가 사라졌네요. 원문 제목은 Yarn: First Look at the New Package Manager for JavaScript입니다.

img

얀(Yarn)은 자바스크립트의 새로운 패키지 매니저이다. 더욱더 빠르게 패키지를 인스톨하는 방법과 의존성 관리를 다양한 디바이스(across machines)에서 일관성 있게 하는 방법에 대해서 배워 보도록 하자.

자바스크립트 세계에서 개발자는 패키지를 공유하고 이를 조립하여 프로젝트를 빌드하는 도구로 패키지 매니저를 사용한다. 전 세계적으로 가장 인기 있는 자바스크립트 패키지 매니저는 npm이다. 이것은 엄청난 양의 패키지(jQuery, Bootstrap, React와 Angular 같은)를 호스팅하고 있다. 그러나 npm이 자바스크립트 커뮤니티에서 많이 사용된다고 하더라도, 단점 역시 존재한다. 이것이 페이스북, Exponent, 구글과 Tilde의 엔지니어 그룹들이 함께 협력하여 npm의 핵심 이슈를 해결하기 위해 새로운 패키지 매니저를 만든 이유이다. 이 새로운 자바스크립트 패키지 매니저가 얀(Yarn)이다. 더욱 빠르고 안정적이며 보안성이 뛰어나다고 주장하고 있다.

Yarn을 시작하기 위해 알아야 할 모든 것을 배울 것이다.

presentation

Yarn 설치

Yarn을 설치하는 방법은 여러 가지인데, 가장 쉬운 방법은 npm이 설치되어 있다면 npm을 통해 설치하는 것이다. 잘 알아들은 것이 맞다!

npm install --global yarn

이 명령어를 통해 Yarn을 글로벌로 설치 할 수 있다. 다른 방법은 Yarn 공식 문서에 운영 체제에 맞는 설치를 하는 것이다.

두 경우 모두, Yarn을 글로벌 하게 사용 할 수 있도록 터미널에서 PATH 환경 변수 설정을 잊으면 안된다.

마지막으로, 최신 버전으로 업데이트하고 싶다면 아래의 명령어를 입력한다.

yarn self-update

자, 이제 본격적으로 Yarn이 어떻게 작동하고 프로젝트에서 어떻게 사용 하는지 보자.

Discovering Yarn

Yarn이 npm을 대신 한다고 하더라도, npm과 bower 워크 플로우 모두에 호환성이 있으며 혼합된 레지스트리(mixing registries)를 지원한다. 다시 말해서, 당신은 기존의 npm 프로젝트에서 Yarn를 사용할 수 있다.

직접 확인해보자. 리액트를 의존하고 있는 프로젝트가 있다. 프로젝트에는 다음과 같은 package.json이 있다.

presentation

의존성을 설치하려면, yarn 커맨드를 arguments 없이 실행 할 수 있다. package.json의 종속성 목록에 기반해서 npm 레지스트리에서 패키지를 가져(fetch)올 것이다. 그러면 npm과 같이 node_modules 폴더가 채워진다.

presentation

Yarn CLI 명령에 대해 자세히 살펴본 후, Yarn이 프로젝트 root에 yarn.lock이라는 lockfile을 생성한 것을 아마 알아챌 것이다:

## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
## yarn lockfile v1
asap@~2.0.3:
  version "2.0.5"
  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.5.tgz#522765b50c3510490e52d7dcfe085ef9ba96958f"
core-js@^1.0.0:
  version "1.2.7"
  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
encoding@^0.1.11:
  version "0.1.12"
  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
  dependencies:
    iconv-lite "~0.4.13"
fbjs@^0.8.4:
  version "0.8.5"
  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.5.tgz#f69ba8a876096cb1b9bffe4d7c1e71c19d39d008"
  dependencies:
    core-js "^1.0.0"
    immutable "^3.7.6"
    isomorphic-fetch "^2.1.1"
    loose-envify "^1.0.0"
    object-assign "^4.1.0"
    promise "^7.1.1"
    ua-parser-js "^0.7.9"
...

파일의 처음에 적혀 있는 대로, 직접 이 파일을 수정하면 안 된다. 이것은 Yarn CLI를 통해 의존성을 업데이트, 삭제, 또는 추가할 때, 전적으로 Yarn에서 핸들링하는 것이다.

이 파일의 목적은 npm이 가지고 있는 버전 관리와 non-determinism 문제를 해결 하기 위한 것이다. 이 프로젝트를 설치할 때 모든 시스템에 걸쳐 일관성을 보장하기 위해 정확한 버전과 설치된 각 종속성을 잠그는(locks) 역할을 한다. 이것이 프로젝트의 소스 제어 저장소에 그것(yarn.lock)을 포함해야 하는 이유이다.

CLI Commands

Yarn은 프로젝트의 새로운 프로젝트 생성부터 의존성 관리와 더 많은 것들까지 다양한 측면을 관리 할 수 있는데 도움이 되는 많은 커맨드 라인 명령어들을 제공한다. 가장 인기 있는 명령어는 아래 설명되어 있지만, 고급 명령에 대한 것은 Yarn의 공식 문서를 참조하기 바란다.

yarn init

npm과 같이 새로운 Yarn 프로젝트를 만들기 위해선 아래의 질문들에 답을 해야 한다. 그것들에 답하거나 기본값들로 설정되도록 넘기는 것은 당신 마음이다.

presentation

yarn init 명령으로 package.json이 아래와 같이 만들어진다:

{
  "name": "mynewproject",
  "version": "1.0.0",
  "description": "My new Yarn project",
  "main": "index.js",
  "repository": {
    "url": "https://github.com/gdangelo/my-new-yarn-project",
    "type": "git"
  },
  "author": "Grégory D'Angelo",
  "license": "MIT"
}

npm을 사용해 봤다면, 이 파일이 친숙할 것이다. 여기에 당신의 프로젝트에 관한 모든 정보를 담고 있다.

의존성 작업

이제 Yarn을 통해 새로운 프로젝트를 만드는 방법을 알았으니, 의존성을 어떻게 관리하는지 알아보자.

첫 번째로 할 일은 우리의 프로젝트에 패키지를 추가하는 것이다. 아래 명령을 실행하여 쉽게 할 수 있다.

yarn add [package-name]@[version-or-tag] [option]

버전 또는 태그 옵션을 지정하지 않으면 패키지의 최신 버전이 설치된다. 옵션 argument는 —dev, —peer, —optional, —exact, 또는 —tilde가 있다. 첫 세 가지 옵션을 사용하면 패키지를 각각 devDependencies, peerDependencies 및 optionalDependencies에 설치하게 된다.

presentation

위의 예제를 통해 이미 알아차렸을 수 있지만, 리액트 패키지를 추가하는 것은 매우 빠르다!

Yarn은 npm 레지스트리에서 프로젝트 디렉터리 내에 node_modules 디렉터리에 패키지를 받는다. 또한, package.json 및 yarn.lock 파일을 업데이트한다.

또한 다음과 같은 다른 위치에서 패키지를 추가할 수 있습니다:

  • 로컬 폴더 또는 로컬 tar 파일
yarn add file:/path/to/local/folder
yarn add file:/path/to/local/tarball.tgz
  • 리모트 깃 레파지토리
yarn add <git remote url>
  • 리모트 tar 파일
yarn add https://my-project.org/package.tgz

마지막으로, 패키지를 업데이트하거나 삭제하려면, 아래의 CLI 커멘드를 입력하면 된다. 이것으로 프로젝트 내의 모든 관련된 의존성을 최신 버전으로 업데이트하거나 삭제할 것이다. 두 개의 커맨드는 package.json과 yarn.lock 파일을 업데이트 할 것이다.

## upgrade all dependencies
yarn upgrade
## remove react
yarn remove react

presentation

자세한 내용은 Yarn의 공식 문서를 참조하길 바란다.

결론

이 글을 쓸 때, Yarn는 이미 Github에서 1만 6천 개 이상의 별을 받았다. 이 프로젝트는 개발자들이 다른 패키지 매니저에서 마주칠지도 모르는 흔한 문제들을 해결하고 있기 때문에 매우 인기가 있으리라 본다. 이 프로젝트는 커뮤니티에 오픈되어 있으니, 다른 엔지니어들의 도움을 받아 더 나아질 것이다.