Yarn berry

그동안 여러 번의 웹 프로젝트를 진행하면서 yarn install을 진행하는 시간, yarn start로 프로그램이 실행되기까지 시간이 꽤 걸린다는 것을 체감하였다. 왜 이렇게 오래 걸리는 걸까..? 라는 생각을 하며 node_modules 폴더 구조를 이해하고자 했다.

NPM...?

NPM은 Node Package Manager의 줄임말로 Node.js 설치 시에 자동으로 설치되는 기본 패키지 관리자이다.

npm은 파일 시스템을 이용해 의존성을 관리하고, 누구나 온라인 플랫폼인 npm 레지스트리에 게시된 캐피지를 사용할 수 있도록 공유 공간을 만들어 준다. 더불어 이런 온라인 플랫폼과 상호작용하기 위해 명령 줄 인터페이스를 사용하면서 패키지 설치 및 제거가 가능하다.

Yarn

Yarn은 페이스북에서 개발한 패키지 관리자이고, 리액트와 같은 프로젝트를 진행하며 겪었던 어려움을 해결하고자 나왔다.

NPM vs Yarn

1. 속도
   npm은 패키지를 한 번에 하나씩 가져오고 순서대로 설치하지만, yarn은 여러 패키지를 동시에 가져오고 설치하도록 최적화되어있다.
   즉, 패키지 설치 속도 측면에서 yarn이 npm보다 빠르다.
2. 보안
   npm은 다른 패키지를 바로 포함시킬 수 있는 코드를 자동으로 실행하지만, 여러가지 취약성이 보인다.
   다만, Yarn은 yarn.lock, package.json 파일에 있는 파일만 설치한다. 이 때문에 Yarn이 NPM 패키지보다 보안에 더 강하다.

특징

1. 비효율적인 설치
   npm에서 구성하는 node_modules 디렉토리 구조가 매우 큰 공간을 차지한다. 더불어 용량 뿐만 아니라 큰 node_modules 디렉토리 구조를 만들기 위해서는 많은 I/O작업이 필요하다.
   즉, 패키지가 서로를 의존하고 있는 의존성 트리에서 node_modules의 디렉토리 구조는 더욱 복잡해지게 된다.
2. 많은 수의 I/O 호출
   디스크 I/O 호출은 메모리의 자료구조를 다루는 속도보다 느리다.
   즉, Yarn v1, NPM 은 각 패키지의 내용이 맞는지에 대한 확인은 진행하지 않는다.
3. 유령 의존성(Phantom Dependency)
   NPM 및 Yarn v1에서는 중복되는 node_modules을 방지하기 위해서 Hoisting기법을 사용하는데, 해당 기법에 따라서 의존하고 있지 않은 라이브러리를 require할 수 있게 된다.
   즉, 유령 의존성이 나타나면 package.json에서 의존성을 하나 삭제했을때, 같이 사라지게 되는 현상이 나타나 혼란을 야기할 수 있다.

Yarn Berry

node_modules 없이 node를 사용할 수 있도록 해주는 패키지 관리자이다.

Yarn Berry는 위에서 언급한 3가지의 문제를 Plug n Play로 해결해준다.
pnp는 버전, 위치, 의존성을 담고 있으며 node_modules를 생성하지 않고 기본 캐시 폴더에 zip파일로 저장해 .pnp.js에 작성하게된다.

장점

1. pnp에서 제공하는 자료구조를 이용해 위치를 찾게 된다.
2. 패키지 중복설치가 되지 않는다.
3. zero-install을 사용하면 라이브러리 설치 없이 사용이 가능하다.
4. 용량과 파일이 적기 때문에 이를 git으로 관리할 수 있다.

이러한 장점때문에 IN-SOPT : APPJAM 프로젝트인 Pic.me에 적용해보기로 했다.

---

Yarn Berry + React + Typescript

기본 설치

일단 react + typescript인 프로젝트를 생성한다.

yarn create react-app . --template typescript

기존의 npm 기반으로 되어 있는 의존성 관리를 아래의 명령어로 지워준다.

rm -rf node_modules
rm -rf yarn.lock

yarn berry 버전으로 변경해준다.

yarn set version berry

이렇게 되면 폴더에 yarnrc.yml과 .yarn/release 폴더 안에 yarn-3.3.1.cjs가 생성된다.
여기서 .yarnrc.yml파일에 들어가서 아래로 변경해준다.

우리는 styled-components를 사용하고 typescript 프로젝트이기에 이에 대한 plugin을 작성해주어야 한다.

nodeLinker: 'pnp'

packageExtensions:
  styled-components@*:
    dependencies:
      react-is: '*'

plugins:
  - path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
    spec: '@yarnpkg/plugin-typescript'

yarnPath: .yarn/releases/yarn-3.3.1.cjs

작성했다면 yarn installl을 진행해준다.

Typescript 설치 및 적용

먼저, package.json을 살펴보면 아래처럼 node, reat, react-dom, jest가 설치되어 있을 것이다.

     "@types/jest": "^27.5.2",
    "@types/node": "^16.18.11",
    "@types/react": "^18.0.26",

그게 아니라면 아래의 명령어로 설치를 진행해주면 된다.

yarn add -D typescript @types/node @types/react @types/react-dom @types/jest

이후 vscode를 보게 되면, 수많은 빨간 줄이 나타나게 된다. 왜냐하면 yarn berry의 PnP기능을 사용하기 위해서는 Typescript의 추가적인 구성이 필요하고 안전상의 이유로 VSCode에서는 Typescript 설정을 명시적으로 활성화 해야한다.

이를 위해 yarn에서는 Editor SDK를 배포하고 있기에 이를 설치해준다. 더불어 별도의 타입 정의를 설치해주어야 하는 작업을 자동화 해주는 플러그인도 함께 설치한다.

yarn dlx @yarnpkg/sdks vscode

yarn plugin import typescript

작업이 성공적으로 완료되면 ctrl + shift + p를 사용해 Typescript 버전을 검색하여 나오는 작업 영역 버전 사용을 눌러 sdk를 설정하면 된다.

eslint + prettier 설정

yarn berry에서 eslint와 prettier를 사용하기 위해서 필요한 과정은 아래와 같다.

// eslint 를 설정하고
yarn dlx eslint --init

// eslint와 prettier를 같이 사용하면서 충돌이 나는 스타일을 비활성화 시킨다.
yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

이렇게 사용하는 확장을 eslint에게 알리면 된다.

"extends": [
      "react-app",
      "airbnb",
      "prettier" //여기서도 꼭 마지막에 추가
],

Zero-Install

라이브러리 설치 없이 프로젝트를 실행하고자 한다면 .gitignore에 아래와 같은 명시를 해주면 된다고 한다.

# Zero-installs
.yarn/*
!.yarn/cache
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

느낀점

비록 zero-installs 까지 완벽하게 적용시킨건 아니었지만, 확실히 Yarn berry를 사용하니 프로젝트의 빌드 속도가 빨라졌다.
하지만 지원되지 않는 라이브러리가 아직은 많기에 진행하는 프로젝트에 따라 사용여부를 결정할 것 같다.pnpm도 알아보면서 적합한 패키지 관리자를 선택해보고 싶다.

참고한 자료

• node_modules로부터 우리를 구원해 줄 Yarn Berry
• Yarn berry (yarn pnp) 환경으로 React + Typescript 프로젝트 세팅하기