toss2026년 6월 24일

es-toolkit: 작은 내부 라이브러리가 글로벌 프로젝트가 된 이야기 (새 탭에서 열림)

es-toolkit은 레거시 브라우저 지원과 비효율적인 구현으로 무거워진 lodash를 대체하기 위해 Toss 내부 유틸리티 라이브러리에서 출발했습니다. 최신 브라우저 API와 ECMAScript Modules를 활용해 불필요한 코드를 제거한 결과, 함수별 성능이 최소 2배에서 10배 이상 향상되고 번들 크기도 일부 경우 30배 이상 줄었습니다. 이후 국내외 개발자들의 참여와 오픈소스 생태계의 지원을 바탕으로 크게 성장했으며, 기존 lodash 사용자가 쉽게 전환할 수 있도록 `es-toolkit/compat`도 개발했습니다. ## lodash를 대체할 현대적인 유틸리티 라이브러리의 필요성 - 프론트엔드 개발에서는 `throttle`, `debounce`, `uniq` 같은 유틸리티 함수가 자주 필요했습니다. - 널리 사용되던 lodash는 다음과 같은 한계가 있었습니다. - 오래된 코드 구조를 유지함 - `Array#map`처럼 브라우저가 기본 제공하는 기능을 직접 재구현함 - Internet Explorer 등 레거시 브라우저를 위한 방어 로직을 포함함 - ECMAScript Modules를 지원하지 않아 tree-shaking이 어려움 - `lodash-es`는 ESM을 지원했지만 lodash의 오래된 내부 구현과 비효율성은 그대로였습니다. - Toss는 자체 라이브러리인 `@toss/utils`를 운영했지만, 모든 함수를 직접 구현하고 다양한 엣지 케이스를 관리하는 데 큰 부담이 있었습니다. ## es-toolkit의 시작과 성능 개선 - Toss 팀은 현대적인 웹 환경에 맞는 효율적인 유틸리티 라이브러리를 만들기로 했습니다. - 핵심 목표는 lodash의 불필요한 로직을 제거하고, 브라우저 내장 API를 적극 활용하는 것이었습니다. - 구현 결과: - 함수에 따라 성능이 최소 2배, 최대 10배 이상 향상 - 레거시 브라우저 지원 코드와 중복 구현을 제거해 일부 번들 크기가 30배 이상 감소 - 최신 모듈 시스템을 활용해 필요한 코드만 포함할 수 있는 기반 마련 ## 국내외 오픈소스 커뮤니티의 참여 - Toss Frontend의 소셜 미디어에 초기 결과를 공유한 뒤 예상보다 많은 사용자가 유입되었습니다. - 커뮤니티 구성원들은 다음과 같은 방식으로 프로젝트에 기여했습니다. - 누락된 함수 구현 - 버그 수정 - 미완성된 코드 최적화 - lodash를 es-toolkit으로 교체하는 번들러 플러그인 제작 - 유명 라이브러리의 의존성 교체 - Reddit 공유 이후 100개 이상의 추천과 수만 명의 저장소 방문이 발생했습니다. - 해외 블로그와 뉴스레터가 프로젝트를 소개하면서 국제적인 참여가 더욱 확대되었습니다. ## 오픈소스 기여가 개발자 성장으로 이어진 사례 - Dayong Lee는 es-toolkit을 계기로 한국에서도 영향력 있는 오픈소스 프로젝트가 나올 수 있다는 가능성에 주목했습니다. - Toss 직원이 아니었지만 공개 저장소에 작은 Pull Request부터 제출하며 기여를 시작했습니다. - 지속적인 코드 리뷰와 기여를 통해 프로젝트의 두 번째로 많은 기여자가 되었습니다. - 이 과정에서 다음을 학습했습니다. - 인터페이스 설계 원칙 - JavaScript 언어의 세부 동작 - 협업과 코드 리뷰 방식 - es-toolkit에서 쌓은 경험은 이후 Toss Bank에 합류하는 계기가 되었습니다. ## 기존 사용자의 전환 장벽 - 라이브러리가 빠르게 발전했지만, 기존 lodash 사용자가 es-toolkit으로 전환하는 속도는 상대적으로 느렸습니다. - lodash는 코드베이스 곳곳에서 다양한 함수를 사용하기 때문에 함수별로 하나씩 교체하는 작업은 큰 부담이었습니다. - 또한 lodash는 가능한 많은 입력과 예외 상황을 처리하는 반면, es-toolkit은 주요 사용 사례에 집중했습니다. - 따라서 동일한 이름의 함수를 단순히 교체하면 일부 상황에서 동작 차이로 런타임 오류가 발생할 수 있었습니다. ## `es-toolkit/compat`을 통한 점진적 마이그레이션 - es-toolkit 팀은 import 문만 바꿔도 사용할 수 있는 lodash 호환 계층의 필요성을 발견했습니다. - `es-toolkit/compat`은 lodash의 인터페이스와 실제 동작을 최대한 유지하면서 내부 구현만 현대화하는 방식으로 설계되었습니다. - 이를 통해 사용자는 대규모 코드 수정 없이도 다음 효과를 얻을 수 있습니다. - 기존 lodash 사용 방식 유지 - 더 빠른 내부 구현 활용 - 점진적으로 es-toolkit 표준 API로 마이그레이션 - 즉, 완전한 재작성보다 낮은 비용으로 성능과 번들 크기 개선을 먼저 경험하게 하는 전략입니다. ## 실용적인 결론 레거시 라이브러리를 교체할 때는 단순히 더 빠른 구현을 제공하는 것만으로는 충분하지 않습니다. 기존 API와 동작을 유지하는 호환 계층을 함께 제공하면 대규모 코드베이스의 전환 장벽을 크게 낮출 수 있습니다. 새로운 프로젝트에는 es-toolkit을 직접 사용하고, 기존 lodash 프로젝트에는 `es-toolkit/compat`을 활용한 단계적 마이그레이션을 고려할 수 있습니다.

es-toolkitjavascriptfrontend-developmentlodash+3

toss2026년 6월 22일

es-toolkit, 사내 작은 라이브러리가 전세계적인 라이브러리가 되기까지 (새 탭에서 열림)

es-toolkit은 오래되고 비효율적인 lodash를 현대 JavaScript 환경에 맞게 대체하기 위해 시작된 유틸리티 라이브러리입니다. 불필요한 호환 코드를 제거하고 핵심 사용 사례에 집중한 결과, 함수 성능은 최대 10배 이상 향상되고 번들 크기는 최대 30배 이상 줄었습니다. 이후 `es-toolkit/compat`과 오픈소스 커뮤니티의 기여를 통해 Yarn, Recharts, Storybook 등 다양한 프로젝트에 채택되며 주간 NPM 다운로드 2천만 회를 넘어섰습니다. ## lodash의 한계와 es-toolkit의 시작 - lodash는 오래된 브라우저와 Internet Explorer를 지원하기 위한 방어적 코드가 많이 포함되어 있습니다. - `Array#map`처럼 현대 브라우저가 기본 제공하는 기능도 직접 구현해 코드가 불필요하게 커졌습니다. - ECMAScript Modules를 지원하지 않아 Tree-shaking으로 필요한 코드만 포함하기 어려웠습니다. - `lodash-es`는 ESM만 추가했을 뿐, 기존 lodash의 낡고 비효율적인 구현 문제는 그대로였습니다. - 토스 내부에서도 `@toss/utils`를 직접 운영했지만, 유틸리티 함수의 다양한 엣지 케이스를 관리하는 데 부담이 있었습니다. - 이에 따라 “lodash의 불필요한 로직을 제거해 더 빠르고 작은 라이브러리를 만들자”는 목표로 es-toolkit이 시작되었습니다. ## 성능과 번들 크기 개선 - lodash의 핵심 함수인 `throttle`, `debounce`, `uniq` 등을 현대적인 방식으로 다시 구현했습니다. - 함수별로 차이는 있지만 불필요한 로직을 제거한 결과 성능이 최소 2배에서 최대 10배 이상 향상되었습니다. - 오래된 브라우저 지원 코드와 중복 구현을 제거해 번들 크기가 최대 30배 이상 감소했습니다. - 현대적인 모듈 구조를 활용해 사용하는 함수만 번들에 포함할 수 있도록 했습니다. - 핵심 유스케이스에 집중해 모든 예외 상황을 처리하는 대신, 일반적인 사용 환경에서 작고 빠르게 동작하도록 설계했습니다. ## 오픈소스 커뮤니티의 확산 - 토스 프론트엔드 SNS를 통해 첫 버전을 공개한 뒤 국내 개발자들의 관심과 기여가 이어졌습니다. - 기여자들은 누락된 함수 구현, 버그 수정, 성능 최적화 등을 Pull Request로 보완했습니다. - 해외 개발자 커뮤니티에 소개된 후 수만 명이 저장소를 확인하고, 구현 방식과 개선점에 대해 활발히 논의했습니다. - 커뮤니티에서는 lodash를 es-toolkit으로 바꾸는 번들러 플러그인과 다른 라이브러리의 의존성을 교체하는 작업도 자발적으로 진행했습니다. - 외부 기여자로 참여한 이다용 개발자는 지속적인 코드 리뷰와 기여를 통해 JavaScript 및 API 설계 경험을 쌓았고, 이후 토스뱅크 입사로 이어졌습니다. ## `es-toolkit/compat`을 통한 마이그레이션 - es-toolkit은 주요 사용 사례에 집중했기 때문에 lodash와 함수 동작이 다른 경우가 있었습니다. - 단순히 import 경로만 바꾸면 런타임 오류가 발생할 수 있어 기존 프로젝트의 마이그레이션 부담이 컸습니다. - 이를 해결하기 위해 lodash의 인터페이스와 동작을 최대한 호환하는 중간 계층인 `es-toolkit/compat`을 제공했습니다. - 기존 코드를 크게 수정하지 않고 import만 변경해도 내부 구현의 현대화 효과를 얻을 수 있도록 했습니다. - 이 접근 방식으로 Storybook, Mermaid, Yarn Berry, Recharts 등 대규모 오픈소스 프로젝트의 채택이 늘었습니다. - 결과적으로 es-toolkit은 주간 NPM 다운로드 2천만 회 이상을 기록했습니다. ## 앞으로의 확장 방향 - 더 많은 JavaScript 라이브러리가 es-toolkit을 사용해 번들 크기와 실행 성능을 개선하도록 지원할 계획입니다. - `Map`과 `Set`의 필터링처럼 기존 내장 자료구조에서 다루기 불편한 기능을 추가하려고 합니다. - Promise 기반 비동기 코드에서 자주 사용하는 `delay` 같은 실용적인 함수도 제공합니다. - 브라우저뿐 아니라 Node.js, Deno, Bun 등 서버 환경을 위한 유틸리티로 영역을 넓히고 있습니다. - 최근 추가된 `exec`처럼 필요한 기능은 유지하면서도 경쟁 구현보다 작은 함수를 제공하는 것을 지향합니다. - 앞으로도 “80% 이상의 유스케이스에 최적화된 작고 빠른 구현”이라는 원칙을 유지할 계획입니다. 기존 lodash를 사용 중인 프로젝트라면 먼저 `es-toolkit/compat`으로 점진적인 교체를 검토하는 것이 현실적인 접근입니다. 이후 호환성이 필요 없는 코드부터 순수 es-toolkit 함수로 전환하면 성능과 번들 크기를 줄이면서도 마이그레이션 위험을 낮출 수 있습니다.

es-toolkitopen-sourcetypescriptjavascript+3

toss2026년 4월 1일

97% 더 작고 2배 더 빠르게: es-toolkit이 주간 다운로드 1,000만 건을 달성한 방법 (새 탭에서 열림)

es-toolkit은 lodash를 대체하기 위해 토스(Toss)에서 처음부터 다시 설계한 현대적인 JavaScript 유틸리티 라이브러리입니다. 최신 웹 표준인 ES Modules와 TypeScript를 기반으로 제작되어 lodash 대비 번들 크기는 최대 97% 줄이고 실행 속도는 2배 이상 높였습니다. 현재 마이크로소프트, IBM 등 글로벌 기업들이 도입하며 주간 1,000만 회 이상의 다운로드를 기록하는 등 차세대 표준 유틸리티로 자리 잡고 있습니다. ### lodash의 한계와 탄생 배경 * **구식 아키텍처:** lodash는 10년 전 JavaScript 환경에 맞춰 설계되어, 최신 웹의 표준인 ES Modules 기반의 트리 셰이킹(Tree-shaking)을 완벽히 활용하지 못합니다. * **불필요한 의존성:** lodash는 단일 함수를 임포트하더라도 내부적인 헬퍼 함수들이 함께 포함되어 번들 크기가 커지는 구조적 한계를 가집니다. * **현대적 엔진 최적화 미비:** V8이나 SpiderMonkey와 같은 현대적 엔진은 과거에 느렸던 패턴들을 최적화했지만, lodash는 하위 호환성 문제로 이러한 최신 성능 이점을 충분히 누리지 못합니다. ### 독보적인 번들 사이즈와 실행 성능 * **완전한 독립성:** 모든 함수가 처음부터 독립적으로 설계되어 숨겨진 내부 의존성이 없습니다. 예를 들어 주요 함수 5개를 사용할 때 lodash는 약 30KB를 차지하지만, es-toolkit은 1KB에 불과합니다. * **런타임 최적화:** 현대 JavaScript 엔진에 최적화된 패턴을 적용하여 대부분의 함수가 2배 이상 빠르며, 특정 함수(`omit`)의 경우 11배 이상의 성능 향상을 보여줍니다. * **실질적 절감 효과:** `sample` 함수의 경우 lodash 대비 번들 크기를 96%까지 줄이는 등, 실제 프로젝트의 Core Web Vitals 지표 개선에 직접적인 도움을 줍니다. ### TypeScript 우선 설계 및 호환성 * **정밀한 타입 추론:** 별도의 `@types` 패키지 없이 소스 코드와 타입 정의가 함께 제공되어 타입 정확도가 매우 높고, 복잡한 타입도 정확히 추론합니다. * **드롭인 교체 지원:** `es-toolkit/compat` 레이어를 통해 lodash와 100% 호환성을 보장합니다. 이는 Storybook, Recharts 등 대규모 오픈소스 프로젝트의 성공적인 마이그레이션으로 검증되었습니다. * **활발한 생태계:** 토스 프런트엔드 챕터의 오픈소스 위원회가 주도하며, `overlay-kit`, `use-funnel` 등과 함께 지속적으로 관리되고 업데이트됩니다. ### 손쉬운 마이그레이션 방법 * **단축 경로:** `package.json`의 의존성 설정에서 `lodash`를 `npm:es-toolkit`으로 별칭(alias) 지정하는 것만으로 코드 수정 없이 즉시 성능 이점을 얻을 수 있습니다. * **점진적 전환:** 단순한 임포트 경로 변경만으로도 도입이 가능하며, 대규모 코드베이스를 위해 공식 codemod 도구(`@es-toolkit/codemod`)를 제공하여 전환 비용을 최소화합니다. 번들 크기 최적화와 런타임 성능이 중요한 현대 프런트엔드 환경에서 lodash를 유지할 이유는 점차 사라지고 있습니다. 단 5분의 투자로 `package.json` 설정을 변경하여 즉각적인 성능 향상을 경험해 보길 권장하며, 특히 TypeScript를 활발히 사용하는 프로젝트라면 타입 안전성 측면에서도 es-toolkit은 최선의 선택이 될 것입니다.

es-toolkittypescriptnpmlodash+4