97% 더 작고 2배 더 빠르게: es-toolkit이 주간 다운로드 1,000만 회를 달성한 방법
요약
Toss 프론트엔드 팀이 개발한 현대적인 JavaScript 유틸리티 라이브러리 es-toolkit을 소개합니다. lodash를 대체하기 위해 설계되었으며, ES Modules와 TypeScript를 기반으로 번들 크기를 97% 줄이고 성능을 2배 이상 향상시켰습니다.
핵심 포인트
- lodash 대비 최대 97% 작은 번들 크기 제공
- 런타임 성능이 lodash보다 2~3배 더 빠름
- ES Modules와 TypeScript를 완벽하게 지원
- es-toolkit/compat를 통한 lodash와의 100% 호환성
- 주간 다운로드 1,000만 회를 돌파하며 글로벌 성장 중
es-toolkit은 lodash를 대체하기 위해 구축된 현대적인 JavaScript 유틸리티 라이브러리 (utility library)입니다. 이 라이브러리는 ES Modules (ES 모듈)와 TypeScript (타입스크립트)를 중심으로 처음부터 설계되었습니다.
lodash와 비교했을 때, es-toolkit은 최대 97% 더 작은 번들 크기 (bundle size)와 2배 이상 빠른 런타임 성능 (runtime performance)을 제공합니다. 또한 내장된 TypeScript 지원을 포함하며, es-toolkit/compat를 통해 100% 호환되는 드롭인 교체 (drop-in replacement) 기능을 제공합니다.
오늘날 es-toolkit은 npm에서 주간 다운로드 1,000만 회를 돌파했으며, Microsoft, Yarn, Storybook, IBM, Recharts와 같은 기업에서 사용되고 있습니다.
Toss가 es-toolkit을 만든 이유
2024년, Toss의 프론트엔드 팀 (Frontend Team)은 간단한 질문을 던졌습니다: "한국에서 글로벌 규모의 JavaScript 라이브러리가 나온 적이 있었나?"
가벼운 대화로 시작되었습니다. 하지만 아이디어를 탐구하면 할수록, 시도하지 말아야 할 이유를 찾기 어려웠습니다. 그래서 우리는 직접 만들기로 결정했습니다.
우리는 lodash가 10년 넘게 지배해 온 영역인 JavaScript 유틸리티 함수 (utility functions)를 선택했습니다. lodash는 JavaScript에 많은 기본 기능이 부족했던 시절 실질적인 공백을 메워주며 수백만 프로젝트의 기반이 되었습니다. 하지만 그것은 10년 전의 일입니다.
오늘날의 웹은 다릅니다. 이제 ES Modules (ES 모듈)가 표준이 되어 진정한 트리 쉐이킹 (tree-shaking)이 가능해졌습니다. V8 및 SpiderMonkey와 같은 엔진들도 크게 발전했습니다. TypeScript (타입스크립트)는 대부분의 팀에서 기본값이 되었습니다. 그리고 번들 크기 (bundle size)는 이제 Core Web Vitals (코어 웹 바이탈)와 직접적으로 연결되는 중요한 지표입니다.
lodash는 이러한 변화가 일어나기 전에 구축되었으며, 그 구조는 이후 크게 진화하지 않았습니다. 우리에게 그것은 기회로 보였습니다.
es-toolkit은 ES Modules (ES 모듈), TypeScript (타입스크립트), 그리고 런타임 성능 (runtime performance)을 핵심으로 하여 현대적인 웹을 위해 처음부터 구축된 JavaScript 유틸리티 라이브러리 (utility library)입니다.
es-toolkit vs lodash: 무엇이 다른가
| 구분 | es-toolkit | lodash |
|---|---|---|
| 번들 크기 (Bundle size) | 최대 97% 더 작음 | 내부 의존성으로 인해 더 큼 |
| 런타임 성능 (Runtime performance) | 2–3배 더 빠름 | 하위 호환성을 위해 설계됨 |
| 트리 쉐이킹 (Tree-shaking) | 완전 지원 (각 함수가 독립적임) | 제한적 (lodash-es도 여전히 내부 의존성을 가짐) |
| TypeScript (타입스크립트) | 내장됨 (소스와 타입이 함께 위치함) | - |
| | TypeScript (타입스크립트) | 별도의 @types/lodash 패키지 필요 | |
| ES Modules | 부분적 지원 (lodash-es를 통해 지원) | 네이티브 지원 |
| lodash 호환성 | es-toolkit/compat를 통해 100% 즉시 교체 가능 | - |
—
| | 유지보수 (Maintenance) | 활발하게 유지보수됨 (빈번한 릴리스) | 드문 업데이트 |
| npm 주간 다운로드 | 1,000만 회 이상 | 4,000만 회 이상 |
| 테스트 커버리지 (Test coverage) | 100% | - |
벤치마크 (Benchmarks): es-toolkit vs lodash 성능
숫자가 스스로 증명하게 두겠습니다.
번들 크기 (Bundle size)
| 샘플 (Sample) | es-toolkit@1.43.0 | lodash-es@4.17.21 | 차이 (Difference) |
|---|---|---|---|
| Sum (합계) | 94 bytes | 4817 bytes | -98.0% |
| Difference (차이) | 90 bytes | 7958 bytes | -98.9% |
| Sum (합계) | 93 bytes | 698 bytes | -86.7% |
| Debounce | 531 bytes | 2873 bytes | -81.5% |
| Throttle | 855 bytes | 3111 bytes | -72.5% |
| Pick | 132 bytes | 9520 bytes | -98.6% |
| Zip | 221 bytes | 3961 bytes | -94.4% |
lodash-es는 ES Modules 버전이지만, 여전히 내부 헬퍼 의존성 (internal helper dependencies)을 가지고 있습니다. 단일 함수를 임포트(Import)하더라도 추가적인 코드가 함께 딸려 들어올 수 있는데, 이는 ES Modules 이전의 설계 방식에서 기인한 한계입니다.
반면, es-toolkit의 모든 함수는 첫날부터 숨겨진 의존성 없이 완전히 독립적으로 구축되었습니다.
런타임 성능 (Runtime performance)
10년 전에는 사용할 수 없었거나 느렸던 JavaScript 패턴들이 이제는 현대적인 엔진(modern engines)에 의해 잘 최적화되어 있습니다.
es-toolkit은 이러한 개선 사항들을 염두에 두고 제작되었습니다. 이와 대조적으로, lodash는 하위 호환성 (backward compatibility) 제약으로 인해 이러한 최적화들을 쉽게 채택할 수 없습니다.
실제 사례에서는 어떤 모습일까요?
여러분의 프로젝트에서 groupBy, keyBy, pick, omit, debounce라는 5개의 함수를 사용한다고 가정해 봅시다. lodash-es에서 이 함수들을 임포트하면 내부 의존성이 포함되면서 번들에 약 30KB(minified 기준)가 추가됩니다. es-toolkit을 사용하면 동일한 5개 함수의 총 크기는 약 1KB에 불과합니다.
동일한 기능을 제공하면서도 번들 크기는 최대 97% 더 작고, 런타임은 2배 이상 더 빠릅니다. 그리고 이것은 우리가 기능을 축소했기 때문이 아닙니다.
es-toolkit을 사용하는 사람들
첫 출시 후 18개월 이내에, es-toolkit은 npm에서 주간 다운로드 1,000만 회를 돌파했습니다.
다운로드 수보다 더 시사하는 바가 큰 것은 이를 채택한 주체들입니다. Microsoft의 여러 내부 프로젝트, 패키지 매니저인 Yarn, UI 컴포넌트 워크숍인 Storybook, 엔터프라이즈 규모의 IBM, React 차트 라이브러리인 Recharts, 그리고 CLI React 렌더러인 Ink가 그 예입니다.
우리는 이 팀들 중 어느 곳에도 먼저 연락하지 않았습니다. 그들이 스스로 es-toolkit을 발견했고, 직접 벤치마크 (Benchmark)를 수행했으며, 스스로 전환 결정을 내렸습니다. 최근에는 Dify와 같은 프로젝트들도 lodash에서 es-toolkit으로 마이그레이션 (Migration)하고 있습니다. 라이브러리가 더 나은 결과를 제공한다면, 사람들은 그것을 찾아내기 마련입니다.
lodash에서 es-toolkit으로 마이그레이션하는 방법
5분 만에 끝내는 마이그레이션
es-toolkit은 lodash와 API 호환성을 유지합니다. 대부분의 함수에 대해 마이그레이션은 임포트 (Import) 경로를 변경하는 것만큼 간단합니다:
만약 코드를 전혀 변경하고 싶지 않다면, lodash를 100% 대체할 수 있는 es-toolkit/compat을 사용할 수 있습니다:
이 한 줄의 코드만으로 코드베이스 내의 모든 import ... from 'lodash'가 코드 수정 없이 작동하게 됩니다. 즉시 번들 크기 (Bundle size)와 성능 이점을 얻을 수 있습니다. 코드베이스가 클수록, 그리고 lodash가 더 널리 사용될수록 이 접근 방식은 더욱 효과적입니다.
전환 비용은 거의 제로에 가깝지만, 이득은 상당합니다.
TypeScript 우선 (TypeScript-first)
es-toolkit의 모든 함수는 타입 정보 (Type information)를 보존하는 정밀한 TypeScript 정의와 함께 제공됩니다:
lodash는 별도의 커뮤니티 유지 관리 패키지인 @types/lodash에 의존합니다. 소스 코드와 타입 정의가 분리되어 있으면 버전 불일치나 부정확성이 발생할 수 있습니다. es-toolkit에서는 소스와 타입이 같은 위치에 존재하므로, 타입이 정확하고 최신 상태로 유지됩니다.
활발한 유지 관리
es-toolkit은 활발하게 개발되고 있습니다. 새로운 함수가 정기적으로 추가되며, 이슈 (Issue)와 PR (Pull Request)이 빠르게 처리됩니다. 유틸리티 라이브러리는 장기적으로 사용하는 의존성 (Dependency)입니다. 따라서 활발하게 유지 관리되는 라이브러리를 선택할 가치가 있습니다.
주간 다운로드 1,000만 회 달성
es-toolkit은 바이럴 (Viral)이 된 적이 없습니다. 유명 개발자의 보증도 없었습니다. Hacker News 메인 페이지에 올라간 적도 없습니다.
오히려 성장은 꾸준했습니다. 10만 회에서 50만 회, 100만 회, 500만 회를 거쳐 결국 주간 다운로드 1,000만 회에 도달했습니다. 매주 더 많은 팀이 es-toolkit을 발견하고, 기존에 사용하던 도구와 비교한 뒤 전환하기로 결정했습니다. 더 나은 도구는 스스로 퍼져나갑니다.
향후 계획 (What's next)
es-toolkit은 Toss 내의 더 큰 움직임의 일부입니다.
우리는 Frontend Chapter 내에 Open Source Committee를 설립했으며, 다음과 같은 여러 다른 라이브러리들을 구축하고 있습니다:
- overlay-kit — React를 위한 Promise 기반 오버레이 관리 도구
- use-funnel — 타입 안전한 (Type-safe) 다단계 플로우 관리
- suspensive — React Suspense를 위한 프리미티브 (Primitives)
현재 lodash를 사용 중이라면, 전환하는 데 약 5분 정도가 소요됩니다.
package.json에 "lodash": "npm:es-toolkit@^1.44.0"를 추가하고 번들 (Bundle) 크기가 얼마나 줄어드는지 확인해 보세요.
더 자세한 내용은 마이그레이션 가이드 (migration guide)를 확인하시기 바랍니다. 성능 데이터는 벤치마크 (benchmarks)를 참조하세요. 기여를 원하시면 GitHub를 방문해 주세요.
es-toolkit은 MIT 라이선스를 따릅니다. npm install es-toolkit 명령어로 설치할 수 있습니다.
자주 묻는 질문 (FAQ)
es-toolkit은 모든 lodash 함수를 지원하나요?
es-toolkit/compat은 lodash와의 완전한 호환성을 목표로 합니다. 이는 lodash의 실제 테스트 케이스를 통해 검증되었으며, v1.39.3부터는 100% 호환성을 보장합니다. Storybook, Recharts, CKEditor와 같은 프로젝트들이 이 호환성 레이어 (Compatibility layer)를 사용하여 성공적으로 마이그레이션했습니다.
lodash에서 es-toolkit으로 마이그레이션하는 데 얼마나 걸리나요?
가장 빠른 방법은 package.json에 "lodash": "npm:es-toolkit@^1.44.0"를 추가하는 것입니다. 코드 변경이 필요 없으며 즉시 작동합니다. 그 후 번들 크기 감소와 성능 이득을 극대화하기 위해 es-toolkit/compat에서 네이티브 es-toolkit 임포트 (Import)로 점진적으로 이동할 수 있습니다. 공식 코드모드 (Codemod) 도구인 @es-toolkit/codemod도 사용할 수 있습니다.
97%의 번들 크기 감소는 실제인가요?
함수에 따라 다릅니다. 예를 들어, sample 함수는 lodash에서 약 2,000 바이트인 반면 es-toolkit에서는 88 바이트로, 약 96% 더 작습니다. omit 함수는 런타임 (runtime)에서 약 11.8배 더 빠르게 실행됩니다. 97%라는 수치는 관찰된 최대 감소율을 나타내며, 대부분의 함수는 80~97% 범위에 해당합니다.
es-toolkit은 Node.js 외부에서도 작동하나요?
네. Node.js, Deno, Bun 및 브라우저를 지원합니다. 또한 unpkg 및 jsdelivr와 같은 CDN을 통해서도 사용할 수 있습니다.
es-toolkit은 누가 만들었나요?
이 프로젝트는 한국에 본사를 둔 핀테크 기업인 Toss (Viva Republica)의 프론트엔드 팀 (Frontend Team)에서 개발했습니다. MIT 라이선스 하에 오픈 소스로 제공되며, 전 세계 개발자들의 기여를 환영합니다.
참고 문헌 (Reference)
언론 및 기술 보도
- [InfoQ — "Es-Toolkit, a Modern Lodash Alternative"][https://www.infoq.com/news/2024/08/es-toolkit-lodash-alternative/]
- [LogRocket — "es-toolkit, a Lodash alternative"][https://blog.logrocket.com/es-toolkit-lodash-alternative/]
- [devm.io — "es-toolkit: The New Lodash?"][https://devm.io/javascript/javascript-es-toolkit-lodash]
- [JavaScript in Plain English — "Hype Around es-toolkit: Why Is It So Popular?"][https://javascript.plainenglish.io/hype-around-es-toolkit-why-is-it-so-popular-30f1f11b5543]
마이그레이션 (Migration) 사례 연구
- Dify — lodash-es에서 es-toolkit으로 마이그레이션하기
- [supastarter — "더 가볍고 빠른 유틸리티를 위해 Lodash를 es-toolkit으로 교체하기"][https://supastarter.dev/dev-tips/2025-08-19-es-toolkit]
공식 문서
AI 자동 생성 콘텐츠
본 콘텐츠는 RSS: Toss Tech Blog의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기