최신 프론트엔드 개발환경 적용하기1(yarn berry)

npm과 yarn

프론트엔드 혹은 nodejs개발자라면 npm이라는 말을 다들 들어보고 사용해봤을 것이다. npm은 Node Package Manager의 약자이다. 즉 node기반의 모든 패키지들을 관리하는 툴이다. 그리고 npm과 더불어서 yarn이라는 것도 많이 사용된다. yarn은 npm 구조에 의존하고 있으며 페이스북에서 만들었고 속도나 보안측면에서 조금 장점이 있다. 그대신 디스크 용량을 조금 더 잡아먹는다고 한다. 사실상 명령어가 조금 다른것을 제외하고 눈에 띄게 차이가 나지는 않는것같다. 애초에 yarn은 npm에 의존하고 있기도 하고 차이가 심하다면 다들 yarn을 사용할텐데 그래도 아직까지는 npm 이용자 수가 더 많다.

 

문제점 인지하기

npm이나 yarn을 사용하면 큰 문제없이 패키지 관리가 가능할 것 같은데 문제가 생겼다. 과거와는 다르게 프로그래밍의 규모가 너무 커져버렸다. 라이브러를 많이 설치하고 프로젝트가 커지다보면 너무 느리고 의존성에도 문제가 생겼다. 기존의 npm과 yarn의 문제점을 살펴보자.

비효율적인 의존성 검색

npm은 파일시스템을 기반으로 의존성을 관리한다. require.resolve.paths() 명령어로 npm이 검색하는 디렉토리 목록을 볼 수 있는데 명령어를 입력해보면 상위 디렉토리까지 타고 올라간다. 이는 굉장히 비효율적이다. 또한 환경에 따라 동작이 달라질 수 있다. 예를 들어서 내 컴퓨터에는 상위 디렉토리에 react17.1이 설치가 되어있고 동료의 컴퓨터의 상위 디렉토리에는 react17.5가 설치가 되었다면 문제가 발생할지도 모른다.(기본 디렉토리에 react가 설치되지 않았다고 가정)

비효율적인 설치

node_modules 폴더는 굉장히 많은 공간을 차지한다. 또한 의존성을 검증하기도 어렵다. 그래서 npm이나 yarn에서도 기본적인 의존성만 검사하고 상세하게는 검사하지 않는다.

유령 의존성

여러개의 라이브러리를 설치했을 때 중복되는 라이브러리가 존재할 수 있다. 그리고 이런 중복 설치를 줄이기 위해서 npm에서는 hoisting을 이용한다. 그런데 문제는 직접 설치하지 않은 라이브러리가 있을 수 있다는 것이다. 예를 들면 redux toolkit에는 immer라는 라이브러리가 내장되어 있다. 그러면 immer를 설치하지 않아도 immer를 사용할 수 있다. 이는 매우 혼란스러운 상황을 야기시킨다. 또한 redux toolkit을 제거하게 된다면 immer도 같이 제거되게 된다. a라는 라이브러리를 제거했는데 b에도 사이드이펙트가 있는 것이다.

- 사진 출처 : 토스 기술블로그

yarn berry

이런 문제점을 해결해주는 패키지 매니저가 있다. 그건 바로 yarn berry다. 위에서 적은 yarn과 같은 yarn이다. 정확히는 위에서 말한 yarn은 yarn version1이고 yarn berry는 yarn version2이상을 의미한다.

Plug’n’Play (PnP)

yarn berry에서는 PnP를 이용해서 문제들을 해결했다. 일단 모든 문제의 근원은 node_modules다. 그래서 이걸 없애버렸다. 

.yarn/cache폴더에 의존성의 정보를 zip으로 저장하고 .pnp.cjs파일에 의존성을 찾을 수 있는 정보를 저장한다.

zip으로 저장하기 때문에 용량이 많이 줄었다. 또한 의존성을 따로 관리하기 때문에 의존성을 찾는 시간도 줄었다. 또한 유령 의존성도 사라졌다.

Zero-Install

이것말고도 또 하나의 혁신적이 기능이 있다. 그건 바로 zero install이다. 말 그대로 설치를 안한다. 정확히는 의존성있는 파일들을 git에 올려버린다. 이게 가능한 이유는 압축파일을 사용했기 때문이다. 예를들어서 라이브러리가 새롭게 추가된 브랜치로 이동해서 dev 서버를 구동시키기 위해서는 서버를 끄고 npm install을 한 후에 다시 서버를 켜야한다. 그런데 이제는 그냥 이동만 시키면 된다. 즉 개발자의 불필요한 낭비시간이 줄어들게 되었다.

 

yarn berry로 cra 시작하기

이제 왜 사용해야되는지를 알았으니 직접 사용해봐야한다. 사용법은 어렵지 않다. 모두가 알고있는 cra로 예시를 들어서 설명해보겠다.

참고로 nodejs는 16.17.0, yarn은 3.2.3버전을 사용했습니다.

 

먼저 cra를 만들어주자.

yarn create react-app blog-yarn-berry --template typescript

cd blog-yarn-berry

 

다음 명령어로 yarn berry를 세팅해주자

 

yarn set version berry

 

.yarn이라는 폴더와 .yarnrc.yml파일이 생성될것이다. 

만약 .yarnrc.yml이라는 파일에 nodeLinker가 node-modules를 가리키고 있다면 삭제시켜줘야한다.

 

.yarnrc.yml

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

 

이제 node modules와 lock 파일을 지워주자.

rm -rf node_modules
rm -rf package.lock.json
rm -rf yarn.lock

 

그리고 yarn 명령어를 통해서 의존성을 설치해주자.

 

gitignore에 설정을 추가해주자. 나는 zero install을 사용하기 땜누에 아래와 같이 사용했고 주석의 설명처럼 zero install을 사용하고 싶지 않다면 맨 밑에 두개 옵션을 바꿔주면 된다. 

 

.gitignore

.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

# Swap the comments on the following lines if you don't wish to use zero-installs
# Documentation here: https://yarnpkg.com/features/zero-installs
!.yarn/cache
#.pnp.*

 

다음 명령어를 통해서 vscode 오류를 없애주자.

yarn dlx @yarnpkg/sdks vscode

 

설치가 끝나면 오른쪽 아래에 아래 설정이 뜬다. 허용을 눌러주자.

 

yarn start로 리액트를 실행해주자.

 

그런데 지금 버전의 cra에서 오류가 뜬다. 왜지?? 다음 명령어로 라이브러리를 설치해주자.

yarn add -D @types/testing-library__jest-dom

 

package.json

{
  "name": "blog-yarn-berry",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/jest": "^27.0.1",
    "@types/node": "^16.7.13",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.4.2",
    "web-vitals": "^2.1.0"
  },
  "devDependencies": {
    "@types/testing-library__jest-dom": "^5.14.5"
  },
  "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"
    ]
  },
  "packageManager": "yarn@3.2.3"
}

 

참고글

https://techblog.woowahan.com/7976/

https://toss.tech/article/node-modules-and-yarn-berry

https://velog.io/@seokunee/Yarn-Berry%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EC%9E%90

https://velog.io/@altmshfkgudtjr/yarn2%EC%99%80-%ED%95%A8%EA%BB%98-Plug-n-Play%EB%A5%BC-%EC%A0%81%EC%9A%A9%ED%95%B4%EB%B3%B4%EC%9E%90

https://velog.io/@juunini/yarn2%EB%A1%9C-%EB%A7%88%EC%9D%B4%EA%B7%B8%EB%A0%88%EC%9D%B4%EC%85%98-%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95

https://minify.tistory.com/40

https://seogeurim.tistory.com/12