Lodash를 대체하는 고성능 유틸리티: es-toolkit 사용 가이드
자바스크립트 생태계에서 유틸리티 라이브러리의 대명사는 오랫동안 Lodash였습니다. 하지만 최신 브라우저 환경과 TypeScript의 발전 속에서 Lodash는 무거운 번들 사이즈와 아쉬운 타입 지원이라는 숙제를 안고 있었죠.
최근 토스(Toss)팀에서 공개한 es-toolkit은 이러한 갈증을 완벽하게 해소해줍니다. 단순히 ‘대체제’를 넘어 압도적인 성능과 현대적인 설계를 갖춘 es-toolkit을 왜 지금 도입해야 하는지 자세히 살펴보겠습니다.
목차
- 왜 Lodash 대신 es-toolkit인가?
- 핵심 강점: 성능과 번들 사이즈
- TypeScript 친화적인 설계
- 실전 마이그레이션 전략
- 개발자의 팁: 도입 시 주의사항
- 자주 묻는 질문(FAQ)
왜 Lodash 대신 es-toolkit인가?
우리는 그동안 습관적으로 npm install lodash를 입력해왔습니다. 하지만 Lodash는 ES6(2015년)가 대중화되기 이전의 설계 방식을 많이 품고 있습니다.
es-toolkit은 최신 자바스크립트 엔진(V8 등)의 기능을 최대한 활용하도록 밑바닥부터 다시 작성되었습니다. 특히 Tree-shaking이 원활하지 않아 사용하지 않는 코드까지 번들에 포함되던 Lodash와 달리, es-toolkit은 필요한 함수만 정확하게 골라 담을 수 있는 구조를 가지고 있습니다.
핵심 강점: 성능과 번들 사이즈
가장 놀라운 점은 성능 지표입니다. 벤치마크 결과에 따르면 es-toolkit은 Lodash보다 평균 2~3배, 특정 함수에서는 최대 11배까지 빠른 속도를 보여줍니다.
또한, 번들 사이즈 측면에서도 파격적입니다. 예를 들어 chunk 함수 하나를 사용할 때 Lodash는 약 2KB를 차지하지만, es-toolkit은 단 수십 바이트(B) 수준으로 해결됩니다. 이는 모바일 환경이나 저사양 디바이스 사용자에게 직접적인 사용자 경험 개선으로 이어집니다.
TypeScript 친화적인 설계
개발자 입장에서 가장 체감되는 변화는 타입 추론의 정확도입니다. 질문하셨던 Object.keys의 타입 문제를 해결하는 getKeys 같은 유틸리티도 es-toolkit의 철학이 잘 녹아있는 예시입니다.
import { chunk, pick } from 'es-toolkit';
// 1. 배열 분할: 타입 추론이 명확하게 유지됨
const data = [1, 2, 3, 4, 5];
const chunked = chunk(data, 2); // number[][] 로 자동 추론
// 2. 객체 필킹: 존재하지 않는 키를 넘기면 TS 에러 발생
const user = { id: 1, name: 'Toss', age: 20 };
const picked = pick(user, ['id', 'name']); // { id: number; name: string; }Lodash를 쓸 때 @types/lodash를 별도로 설치하고 가끔 타입이 꼬여서 any를 남발하던 고통에서 벗어날 수 있습니다.
실전 마이그레이션 전략
이미 대규모 프로젝트에서 Lodash를 쓰고 있다면 한 번에 모든 것을 바꾸기는 위험합니다. es-toolkit은 이를 위해 호환성 레이어를 제공합니다.
npm install es-toolkit기존의 lodash 임포트 구문을 es-toolkit/compat으로 변경하는 것만으로도 대부분의 API 호환성을 유지하면서 성능 이점을 챙길 수 있습니다.
개발자의 팁: 환경 호환성 체크
es-toolkit은 최신exports필드를 사용하여 패키지를 내보냅니다. 만약 아주 오래된 Webpack 버전이나 Jest 27 이하 버전을 사용 중이라면 모듈을 찾지 못하는 에러가 발생할 수 있습니다. 이 경우 라이브러리 도입 전에 빌드 도구를 최신화하거나moduleNameMapper설정을 점검하세요.
자주 묻는 질문(FAQ)
Q: Lodash의 모든 함수를 지원하나요?
A: 실무에서 쓰이는 핵심적인 함수들은 거의 모두 포함되어 있습니다. 만약 없는 함수가 있다면 es-toolkit/compat 모듈을 확인해 보시거나, 지속적으로 업데이트되는 공식 저장소에 기여할 수도 있습니다.
Q: 브라우저 지원 범위가 어떻게 되나요?
A: 현대적인 브라우저 환경을 타겟으로 합니다. 인터넷 익스플로러(IE) 지원이 필수적인 프로젝트라면 Lodash를 유지해야 하겠지만, 그 외의 모든 최신 환경에서는 es-toolkit이 정답입니다.
Q: 성능 차이가 정말 체감될 정도인가요?
A: 단순한 연산 한두 번으로는 체감이 어렵지만, 수만 개의 데이터를 다루는 루프나 고성능 차트 라이브러리 내부에서 사용할 때는 번들 사이즈 감소와 실행 속도 향상이 종합적으로 큰 효과를 발휘합니다.
더 자세한 벤치마크 결과와 API 문서는 es-toolkit 공식 홈페이지에서 확인하실 수 있습니다. 지금 바로 여러분의 프로젝트에서 lodash를 es-toolkit으로 교체해보세요!