pile·
프론트엔드·토스 SLASH토스 SLASH·

es-toolkit, 사내 작은 라이브러리가 전세계적인 라이브러리가 되기까지

토스팀이 lodash의 한계(ESM 미지원, 레거시 코드 비대)를 해결하기 위해 개발한 JavaScript 유틸리티 라이브러리 es-toolkit이 NPM 주간 다운로드 2천만 회를 돌파하며 전 세계 주요 오픈소스 프로젝트에 채택됐다. 사내 작은 프로젝트로 시작해 Storybook, Mermaid, Yarn Berry 등이 의존성을 전환한 과정과, lodash drop-in replacement인 es-toolkit/compat 전략을 최초 개발자 서진과 외부 기여자로 시작해 토스뱅크에 합류한 다용, 두 개발자의 시각으로 다룬다.

핵심 포인트
  • lodash는 ESM 미지원으로 Tree-shaking이 안 되고 불필요한 레거시 코드가 많아 현대 웹 환경에 맞지 않는다는 문제의식에서 시작됐다.
  • 함수별 최소 2배~최대 10배 속도 향상, 번들 사이즈 30배 이상 감소라는 구체적 성능 개선을 달성했다.
  • lodash와 동일한 인터페이스를 유지하는 es-toolkit/compat(drop-in replacement) 레이어로 기존 코드베이스의 채택 장벽을 낮췄다.
  • Storybook, Mermaid, Yarn Berry 등 메이저 오픈소스 프로젝트가 의존성을 전환했고 NPM 주간 다운로드 2천만 회를 돌파했다.
  • 외부 기여자가 오픈소스 기여를 통해 설계 원칙을 익히고 결국 토스뱅크 합류로 이어진 커뮤니티 사례도 담겼다.
상세 정리
  • 배경: 프론트엔드 팀이 throttle/debounce/uniq 등 유틸리티 함수를 반복 사용하지만, lodash는 ESM을 지원하지 않아 Tree-shaking이 어렵고 불필요한 레거시 로직이 섞여 있었다.
  • 설계 철학: 브라우저 기본 API를 최대한 활용하고 불필요한 코드를 제거하는 것을 핵심 원칙으로 삼았다. "80% 이상 유스케이스에 최적화"를 목표로 했다.
  • 성능 결과: 함수별 최소 2배~최대 10배 이상 속도 향상, 번들 사이즈 30배 이상 감소를 달성했다.
  • 초기 반응: 첫 버전 공개 후 토스 프론트엔드 SNS에서 반응을 얻고 Reddit에서 100개 이상 추천을 받으며 수만 명이 레포지토리를 방문했다.
  • 커뮤니티 자발 기여: lodash를 es-toolkit으로 대체하는 번들러 플러그인이 커뮤니티에서 자발적으로 개발됐고, 여러 유명 라이브러리가 의존성을 변경했다.
  • compat 레이어 전략: 기존 lodash 사용 코드를 최소한의 변경으로 전환할 수 있도록 인터페이스 호환성을 유지하면서 내부 구현만 현대화한 es-toolkit/compat을 개발했다.
  • 생태계 채택: compat 전략이 주효해 Storybook, Mermaid, Yarn Berry 등 메이저 오픈소스 프로젝트가 의존성을 전환했고, NPM 주간 다운로드 2천만 회를 넘어섰다.
  • 외부 기여자 경험: 다용 개발자는 트위터에서 es-toolkit을 발견해 작은 이슈부터 기여를 시작했고, 인터페이스 설계 원칙과 JavaScript 심화 지식을 쌓으며 결국 토스뱅크 합류로 이어졌다.
  • 향후 계획: Map/Set 등 자료구조 유틸리티 추가, Node.js/Deno/Bun 환경 함수를 제공해 프론트엔드 전용에서 범용 JavaScript 라이브러리로 확장할 계획이다.
왜 읽나오픈소스 라이브러리를 처음 만들어 글로벌 생태계에 채택시키는 전략(compat 레이어, 커뮤니티 활성화)을 실제 사례로 배우고 싶은 JavaScript/프론트엔드 개발자에게.
토스 SLASH
토스 SLASH 블로그
원문은 여기서 이어서 읽을 수 있어요
원문 읽기
읽음 (0)

이 글과 비슷한

  1. 프론트엔드·LINE EngineeringLINE Engineering·

    AI로 웹 엔지니어 없이 LINE 앱 안에서 그룹 영상 통화 서비스 만들기

    LINE Planet 팀의 PM과 Android 엔지니어 두 명이 웹 전문 엔지니어 없이 LINE 앱 내에서 그룹 영상 통화 서비스를 개발한 과정을 다룬다. LIFF(LINE Front-end Framework)와 LINE Planet SDK를 활용해 React/Vite 기반 웹 앱을 구성했고, Firebase Cloud Functions로 별도 서버 인프라 없이 구현을 완료했다.

    #react#webrtc#firebase+2
  2. 프론트엔드·vercel-blogVercel Blog·

    Vercel과 Shopify의 Hydrogen 전면 재설계

    Vercel과 Shopify가 Hydrogen을 오픈소스·런타임 무관 프레임워크로 전면 재설계했다. 기존 Hydrogen은 빠른 헤드리스 스토어프런트 배포를 지원했지만 플랫폼 종속성이 있었고, 새 버전은 Svelte, Nuxt, Next.js 등 어느 JavaScript 프레임워크에서도 동작한다. 3레이어 아키텍처(코어/클라이언트/서버)로 재구성하면서 각 레이어가 명확한 역할을 분담한다.

    #react#nextjs#i18n+2
  3. 프론트엔드·토스 SLASH토스 SLASH·

    es-toolkit: 사내 소형 라이브러리에서 글로벌 프로젝트로

    토스 프론트엔드 팀이 사내 공유 유틸리티 라이브러리를 발전시켜 만든 es-toolkit이 주간 npm 다운로드 2,000만 건을 넘기며 글로벌 오픈소스 프로젝트로 자리 잡은 과정을 다룬다. lodash의 구조적 한계를 넘어 현대 웹 개발 환경에 최적화된 유틸리티 라이브러리를 처음부터 설계한 경험을 정리한다.

    #lodash#open-source#tree-shaking+2