피드로 돌아가기
토스 기술블로그Frontend
원문 읽기
토스 기술블로그es-toolkit, 사내 작은 라이브러리가 전세계적인 라이브러리가 되기까지
Toss의 es-toolkit을 통한 TypeScript 유틸리티 성능 최적화 및 오픈소스 생태계 확장
AI 요약
Context
범용적인 TypeScript/JavaScript 유틸리티 라이브러리의 과도한 번들 크기와 성능 저하 문제 발생. DX(Developer Experience) 향상과 런타임 효율성을 동시에 확보해야 하는 고성능 프런트엔드 환경의 제약 사항 존재.
Technical Solution
- TypeScript 기반의 엄격한 타입 시스템 적용을 통한 Type-safe한 유틸리티 설계
- Tree-shaking 최적화를 고려한 모듈 구조 설계를 통한 최종 번들 사이즈 최소화
- React Suspense의 프로덕션 적용을 위한 suspensive 라이브러리의 빌딩 블록 구조 구현
- 모달 및 팝오버의 선언적 관리를 위한 overlay-kit의 Declarative Primitive 설계
- 멀티 스텝 화면의 상태 관리를 위한 use-funnel의 Type-safe UI Flow 제어 로직 구축
- Node 환경에서의 빠른 데이터 접근을 위한 es-git의 Git 데이터 액세스 유틸리티 최적화
실천 포인트
1. 라이브러리 설계 시 Tree-shaking이 가능한 구조인지 확인
2. 단순 기능 구현을 넘어 TypeScript의 고급 타입을 활용한 Type-safety 보장 여부 검토
3. 반복되는 UI 패턴을 Declarative Primitive로 추상화하여 재사용성 극대화