본문으로 이동
node_modules로부터 우리를 구원해 줄 Yarn Berry
문서

node_modules로부터 우리를 구원해 줄 Yarn Berry

박서진 토스 · 토스 기술 블로그

원문 보기

AI 핵심 요약

토스 프론트엔드팀은 node_modules의 느린 탐색과 큰 설치 용량, 환경에 따라 달라지는 의존성 동작, 유령 의존성 문제를 해결하기 위해 Yarn Berry의 Plug'n'Play(PnP)를 도입했습니다. PnP는 node_modules 대신 Zip 아카이브 캐시와 .pnp.cjs에 의존성 위치·관계를 기록해 패키지를 빠르고 명시적으로 찾으며, Zero-Install을 적용하면 캐시를 Git에 포함해 설치 없이 바로 사용할 수 있습니다. 그 결과 의존성 용량과 설치·CI 시간을 줄이고, 기기와 CI 환경 간 재현성을 높이며 선언되지 않은 의존성 사용을 막았습니다. 플러그인, 워크스페이스, 패치 명령도 제공해 의존성 관리와 모노레포 작업을 확장하기 쉽다는 점을 확인했습니다.

  • PnP는 패키지별 의존성 정보를 .pnp.cjs에 기록해 node_modules 탐색 없이 패키지 위치를 찾습니다.
  • Zero-Install은 Yarn 캐시와 PnP 파일을 저장소에 포함해 복제 직후나 오프라인에서도 의존성을 사용할 수 있게 합니다.
  • PnP는 끌어올리기를 하지 않으므로 package.json에 선언하지 않은 유령 의존성을 차단합니다.
  • Zip 아카이브 기반 캐시는 중복 파일과 디스크 I/O를 줄이고, 체크섬으로 패키지 변경 여부를 확인하기 쉽습니다.
  • PnP 도입 시 Node 명령 대신 yarn node를 사용하고, 도구 호환성을 확인해야 합니다.

소개

토스 프론트엔드 레포지토리 대부분에서 사용하고 있는 패키지 매니저 Yarn Berry. 채택하게 된 배경과 사용하면서 좋았던 점을 공유합니다.

비슷한 학습 자료

컨퍼런스 SLASH

수많은 사용자와 서비스로부터 만들어지는 로그, 어떻게 관리하면 좋을까요? Yarn을 활용하여 속도와 정확성, 개발자 경험까지 모두 잡은 방법을 소개합니다. 전성 / 토스 Frontend Platform Engineer 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-24 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #토스 #개발자컨퍼런스 #SLASH #SLASH24 #frontend #yarn #yarnplugin 유의 사항 *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에 게재하는 행위는 연사가 동의한 저작권 및 배포전송권에 위배됩니다. *토스가 다루는 모든 개인...

프론트엔드 개발 도구

문서 박서진/이다용

*This is the English version of a previously published article. Hello! We're Sojin Park, Head of Frontend Engineering at Toss, and Dayong Lee, Frontend Developer at Toss Bank. Today, we'd like to share the story of es-toolkit: how it started as a small utility function library inside Toss and grew i...

프론트엔드 프로그래밍 언어

문서 박서진/이다용

안녕하세요, 토스 Frontend Engineering Head 박서진, 토스뱅크 Frontend Developer 이다용입니다. 오늘은 토스의 작은 유틸리티 함수 라이브러리로 시작한 es-toolkit이 어떻게 일주일에 2천만 회 이상 다운로드되고, Yarn이나 Recharts 같은 핵심 라이브러리에서도 사용되었는지 그 성장한 과정을 소개해 드릴게요. [서진] es-toolkit의 시작 프론트엔드 개발자로서 throttle, debounce 나 uniq 같은 함수들이 자주 필요해요. 그런데 지금까지는 자신 있게 이러한 유틸리티 함...

프론트엔드 프로그래밍 언어

문서 문동욱

A drop-in lodash replacement built for how JavaScript actually works today — ES Modules, TypeScript, and significantly smaller bundles. Adopted by Microsoft, Storybook, and Yarn. 10M+ weekly npm downloads.

프론트엔드 프로그래밍 언어

문서 장지훈

100개가 넘는 라이브러리를 관리하면서 마주했던 문제들을 플러그인 시스템으로 풀어낸 방법을 공유합니다.

프로그래밍 언어 데브옵스 · 인프라

문서 박서진

토스는 왜 패키지 매니저로 Yarn을 선택했을까요? 이번 라이트닝 토크에서는 JavaScript의 패키지 매니저, 동작 방식, 그리고 토스의 선택과 앞으로의 방향성에 대해 이야기해 보려고 해요.

프론트엔드 개발 도구