👷🏻‍♂️

Yarn Berry 알아보기

분류

Dev Log 💻

작성자

1 more property

테스트뱅크 페이지로 돌아가기

[zero-install 과 non-zero-install]

[마치며]

[들어가기 전, 핵심 키워드]

1) zero-install 방식과 그리고 pnp

2) non-zero-install 방식과 그리고 node_modules

[도입 배경]

테스트뱅크에서는 프론트엔드와 백엔드 간 API 관련 커뮤니케이션을 효율화 하기 위한 방안으로, buf.build 사이트에서 제공하는 buf 패키지를 사용하고 있는데요. 그런데 공식 문서에 따르면 buf는 yarn classic에 대한 지원을 하지 않는 모양입니다.

 Yarn compatibility

Yarn versions greater than v1.10.0 and less than v2 are not supported.

https://docs.buf.build/bsr/remote-generation/js#yarn

그렇다고 이 buf를 버리기에는 커뮤니케이션 효율화에서 오는 장점이 많기 때문에, 이번 기회에 yarn 버전을 업데이트 해서 한번 사용해보도록 합시다.

buf에 대해 좀 더 알고 싶다면 ⇒ 여기 클릭

자 이제 그러면 본격적으로 yarn berry를 알아봅시다.

참고로 yarn berry는 yarn 2.x 버전 혹은 그 이상 버전의 yarn을 가리키는 별칭입니다. yarn 1.x 버전은 yarn classic이라 부릅니다.

참고로 yarn 공식 사이트에 들어가면, yarn 2이상 버전에 대한 설명을 먼저 보여줍니다. yarn 측에서도 yarn berry을 밀어주고 있는 것으로 보이네요.

[설정하기]

터미널 창에서 현재 작업중인 프로젝트 폴더로 이동합니다

아래 명령어를 입력합니다

yarn set version berry
Plain Text
복사

위의 명령어를 입력하면 root에서 node_modules 가 사라지고 아래의 디렉토리와 파일이 생성될텐데요 1. .yarn 디렉토리 2. .pnp.cjs 파일 3. .pnp.loader.mjs파일 이에 대해선 잠시 후 아래에서 자세하게 알아보도록 합시다

아래 명령어를 통해 버전 확인, 버전이 2.x 이상이면 성공적으로 업데이트가 완료된겁니다. 

yarn --version 
Plain Text
복사

[특징 알아보기]

자 이제 새로운 yarn의 특징을 살펴보죠

yarn berry는 zero install 방식과 non zero install 방식이라는 2가지 워크플로우를 지원하고 있습니다.

전자는 yarn berry가 지원하는 완전히 새로운 메커니즘의 패키지 매니징 방식이고, 

후자의 경우 기존의 node_modules를 사용하는 방식의 업그레이드 방식입니다. yarn classic방식과 다른 점은, 기존 방식이 node_modules에 들어있는 파일들을 직접 순회해서, 패키지 의존성을 파악하는 구조였다면, yarn v2 부터는 .yarn 디렉토리에 zip형태로 저장된 패키지들이 node_modules의 트리 구조를 통해, 의존성 정보만 참조하는 형태가 됩니다. 

apollo server를 기준으로 테스트를 진행한 결과 기존의 yarn classic에서 50초 이상 걸리던 패키지 다운로드가 1번의 pnp + zero-install 방식의 경우 3초가 걸렸고, 2번의 node_modules + non-zero-install 방식의 경우 7초가 걸렸습니다.

이렇게 되면 프로젝트를 새로 클론해서 패키지를 새로 다운받아야할 때나, 빌드 및 배포를 할 때 걸리는 시간을 줄일 수 있어, 보다 효율적이겠죠

그렇다고 pnp 방식이 무조건적으로 더 좋다고 말할 순 없습니다 패키지와의 호환성 여부에 따라, node_modules 방식을 채택해야할 때도 있기 때문입니다. 실제로 yarn에서도 pnp방식에도 단점이 있으니, node_modules 방식의 패키지매니징 방식에 대한 지원을 중단할 예정이 없다고 공식 문서에서 언급하고 있습니다.

[zero-install 과 non-zero-install]

위에서 yarn berry는 2가지 워크플로우를 모두 지원한다고 언급 했는데요, 이번에는 이 2가지에 대해서 좀더 깊게 알아보도록 하겠습니다.

이 2가지 워크플로우를 구분을 명확히 해야 작업시 헷갈리지 않습니다. 각 방식의 설정법과 디렉토리 구조가 다소 다르기 때문이죠.

자 그러면 이 사항을 염두 해두고 계속 보도록 합시다.

zero-install과 non-zero-install 두 방식 모두 yarn 명령어 입력 시, root에 .yarn 디렉토리가 생성됩니다.

패키지 매니징을 pnp + zero-install 방식으로 하고 싶다면 프로젝트 root의 .yarnrc.yml에 아래와 같이 설정해줍니다. 

## .yarnrc.yml
nodeLinker: 'pnp' 
Markdown
복사

위와 같이 설정 후, yarn install을 하면, node_modules 디렉토리가 존재하는 경우 node_modules 폴더가 사라지고 root에 .pnp.cjs 파일과 .pnp.loader.mjs 파일이 생성됩니다. 이 파일들에는 .yarn/cache 에 있는 패키지 파일들에 대한 의존성에 대한 정보가 담겨있습니다 .yarn/cache에 zip 형태로 들어있는 패키지 파일들은 이 파일들을 참조합니다.

패키지 매니징을 node_modules + non-zero-install 방식으로 하고 싶다면 .yarnrc.yml에 
아래와 같이 설정합니다.

## .yarnrc.yml
nodeLinker: 'node-modules'
Markdown
복사

위와 같이 설정 후, yarn install을 하면, .pnp.cjs와 .pnp.loader.mjs가 존재하는 경우 두 파일이 사라지고, root에 node_modules 디렉토리가 생성됩니다. .yarn 디렉토리는 그대로 유지됩니다.

.yarn/cache에 zip 형태로 들어있는 패키지 파일들은 node_modules를 참조하여, 자신들의 의존성에 대한 정보를 파악합니다.

yarn berry부터는 yarn이 참조할 설정파일을 .npmrc 나 .yarnrc 파일이 아니라 .yarnrc.yml 에 작성하여 프로젝트 root에 놓아야 합니다. 파일명을 혼동하지 않도록 주의합니다

[마치며]

yarn berry에 대한 기본적인 내용은 이정도면 충분할 듯 싶습니다. yarn berry의 작동방식에 대해 보다 깊이 있게 알고 싶다면 아래의 글이 도움이 될겁니다 :)

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

고원진 Software Engineer

실제로 동작하는 것을 만들어내는 즐거움으로 여기까지 왔고, 이제는 유저에게 효익을 주는 서비스를 개발합니다.