Read Original
#Frontend

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

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

Summary

Lodash보다 10배 빠르다? 토스가 만든 es-toolkit이 글로벌 생태계를 뒤흔든 비결

성능 최적화와 글로벌 커뮤니티 영업으로 증명한 K-오픈소스의 저력

토스 사내 유틸리티로 시작해 글로벌 2,000만 다운로드를 기록한 es-toolkit의 탄생부터 글로벌 오픈소스 성장기까지를 다룹니다. 현대 웹 표준을 활용한 성능 극대화 전략과 마이그레이션 장벽을 낮춘 설계를 통해 전 세계 개발자들을 설득한 실전 노하우를 공유합니다.

  • 01불필요한 레거시 로직 제거를 통한 드라마틱한 성능 향상(최대 10배)
  • 02ESM 지원과 트리 쉐이킹을 통한 번들 사이즈 97% 감소 실현
  • 03기존 lodash 유저를 흡수하기 위한 Drop-in Replacement 전략과 compat 레이어 활용
  • 04Reddit과 해외 기술 뉴스레터를 활용한 전략적 글로벌 커뮤니티 빌딩
  • 05Yarn Berry, Storybook 등 대형 오픈소스 프로젝트 채택을 이끌어낸 영업 기여

RECOMMENDATION

웹 서비스의 초기 로딩 성능과 번들 사이즈 최적화가 고민인 시니어 개발자에게 lodash의 현대적 대안으로 es-toolkit 도입을 강력히 추천합니다.

The Problem

기존의 lodash 라이브러리는 오래된 브라우저 지원을 위한 방어적 로직이 포함되어 성능이 비효율적이었고, ESM 미지원으로 인해 트리 쉐이킹이 어려워 번들 사이즈가 불필요하게 커지는 문제가 있었습니다.

The Solution

현대적인 JavaScript 환경에 맞춰 레거시 대응 코드를 제거하고 ESM을 기본 지원하도록 설계했으며, 기존 lodash 사용자들이 쉽게 마이그레이션할 수 있도록 인터페이스를 유지한 'es-toolkit/compat' 레이어를 도입했습니다.

The Result

성능은 lodash 대비 2배에서 10배가량 빨라졌으며, 번들 사이즈는 최대 97%까지 절감하는 성과를 거두었습니다. 현재 주간 NPM 다운로드 2,000만 회를 돌파하며 Yarn, Recharts 등 주요 오픈소스 프로젝트의 의존성으로 채택되었습니다.

Trade-off

80%의 주요 유스케이스 최적화에 집중하였기에 모든 엣지 케이스를 지원하는 lodash와 완벽하게 일치하지 않을 수 있으며, 이를 보완하기 위해 별도의 호환성 레이어를 사용해야 하는 번거로움이 있을 수 있습니다.

03

Key Concepts

Concept · 01

Tree-shaking

사용하지 않는 코드(Dead Code)를 빌드 결과물에서 제외하여 최종 번들 파일의 크기를 줄이는 최적화 기술입니다.

  • es-toolkit은 ESM 구조를 채택하여 트리 쉐이킹이 원활하게 작동하도록 설계되었습니다.
  • 기존 lodash 대비 번들 사이즈를 최대 30배 이상 줄이는 핵심 기술로 작용했습니다.
Concept · 02

ESM (ECMAScript Modules)

JavaScript의 표준 모듈 시스템으로, import와 export를 통해 코드의 정적 분석이 가능하게 해줍니다.

  • 빌드 도구가 의존성 관계를 명확히 파악하게 하여 효율적인 최적화를 지원합니다.
  • es-toolkit은 ESM을 기본으로 지원하여 현대적 웹 개발 환경에 최적화되었습니다.
Concept · 03

Drop-in Replacement

기존의 코드 수정 없이 라이브러리 교체만으로 기능을 동일하게 대체할 수 있는 방식을 의미합니다.

  • lodash와의 호환성을 유지하기 위해 es-toolkit/compat 레이어를 별도로 제공했습니다.
  • 사용자가 기존 코드를 하나씩 수정해야 하는 마이그레이션 부담을 획기적으로 낮췄습니다.