토스 es-toolkit, lodash 대체 라이브러리로 글로벌 성장

by DD
3시간 전
조회수 0

토스 프론트엔드 팀은 lodash의 비효율적인 코드와 불필요한 로직을 개선하기 위해 es-toolkit 라이브러리를 개발하며 시작함

성능 2배~10배 향상, 번들 사이즈 30배 이상 감소 효과를 통해 효율적인 유틸리티 함수 제공을 목표로 함

한국과 해외 개발자 커뮤니티의 뜨거운 반응을 얻으며 Yarn, Recharts 등 주요 라이브러리에서 채택되어 주간 다운로드 2천만 회 달성

es-toolkit 탄생 배경: lodash의 한계점

es-toolkit은 기존 lodash 라이브러리가 가진 오래된 코드 구조와 비효율적인 로직을 개선하고자 하는 필요성에서 시작되었습니다. lodash는 Array#map과 같이 현대 브라우저에서 기본 지원하는 함수들까지 직접 구현하고 있었으며, Internet Explorer를 위한 방어적인 로직이 포함되어 있어 현대 웹 개발 환경에 불필요했습니다. 또한, ECMAScript Modules를 지원하지 않아 Tree-shaking을 통한 번들 사이즈 최적화가 어려웠습니다. 이러한 문제점들은 성능 저하와 번들 사이즈 증가의 원인이 되었고, 토스팀은 이를 해결하기 위해 @toss/utils 같은 자체 라이브러리를 관리하기도 했으나, 더 나은 대안이 필요했습니다.

es-toolkit의 성능 및 번들 사이즈 개선 효과

es-toolkit은 lodash의 핵심 함수들을 현대적인 JavaScript 환경에 맞게 재구현함으로써 놀라운 성능 향상을 이루었습니다. 불필요한 로직을 제거하고 Array#map과 같이 브라우저 기본 함수를 활용하도록 변경한 결과, 함수 실행 속도가 최소 2배에서 최대 10배 이상 빨라졌습니다. 번들 사이즈 측면에서는 더욱 드라마틱한 효과를 보였는데, 오래된 브라우저 지원 코드를 제거하고 필요한 로직만 포함하도록 하여 번들 사이즈가 30배 이상 감소하는 결과를 가져왔습니다. 이러한 효율적인 구현 방식은 최종 애플리케이션의 로딩 속도와 성능 개선에 크게 기여합니다.

글로벌 커뮤니티의 반응과 es-toolkit/compat의 역할

es-toolkit은 토스 프론트엔드 SNS 공개 이후 한국 개발자 커뮤니티에서 큰 관심을 받았으며, 해외 개발자 커뮤니티에도 알려지면서 폭발적인 반응을 얻었습니다. 수만 명의 개발자가 레포지토리를 방문하고 활발한 논의가 이루어졌습니다. 유명 블로그와 뉴스레터에서도 소개되며 참여가 더욱 확대되었습니다. 특히, 기존 lodash를 사용하는 프로젝트들이 es-toolkit으로 쉽게 전환할 수 있도록 호환성 레이어인 es-toolkit/compat을 제공한 것이 주효했습니다. 이를 통해 Storybook, Mermaid, Yarn Berry와 같은 주요 오픈소스 프로젝트들도 es-toolkit을 채택하게 되었고, NPM 주간 다운로드 2천만 회를 돌파하는 성과를 거두었습니다.

es-toolkit의 향후 발전 방향

es-toolkit은 앞으로도 프론트엔드 및 JavaScript 생태계 전반에 더 나은 선택지를 제공하는 것을 목표로 합니다. Yarn Berry, Recharts 등에서 이미 입증된 번들 사이즈 감축 효과를 더 많은 라이브러리가 누릴 수 있도록 기여할 계획입니다. 또한, Map, Set의 filter 함수나 Promise 기반의 delay 함수와 같이 최신 JavaScript 생태계에 필요한 새로운 유틸리티 함수들을 적극적으로 추가할 예정입니다. 나아가 Node.js, Deno, Bun과 같은 서버 환경에서도 사용 가능한 함수들을 제공하며 종합적인 유틸리티 라이브러리로 성장하는 것을 목표로 하고 있습니다. "80% 이상의 유스케이스에 최적화하여 작고 빠르게 동작하게 한다"는 es-toolkit의 핵심 정신을 유지하며 고품질 함수를 제공할 것입니다.

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