문서

@use-funnel 개발기 #1: 왜 기존 라이브러리를 두고 새로 만들었나?

권선영 토스 · 토스 기술 블로그

AI 핵심 요약

주택담보대출 서비스의 복잡한 퍼널을 개발하며 기존 use-funnel은 상태 관리가 부족했고, XState는 타입과 머신, UI를 여러 곳에서 수정해야 해 코드 파악과 유지보수가 어려웠습니다. 특히 뒤로가기 후 이전 단계의 값이 남아 다른 분기에서 잘못 사용될 수 있는 문제가 있어, 사내 개발자들과 논의해 안정적인 이동과 상태 관리, 오버레이 단계, 라우터 독립성을 요구사항으로 정리했습니다. 5명의 워킹그룹은 주간 논의와 페어 프로그래밍, 리뷰를 반복해 @use-funnel/core와 여러 라우터용 라이브러리를 만들고, 문서화와 사내 테스트를 거쳐 오픈소스로 공개했습니다. 기존 도구의 한계를 해결하려면 사용자의 실제 고충을 먼저 모으고, 핵심 기능과 환경별 연동을 나눠 설계하는 것이 중요하다는 점을 보여줍니다.

퍼널의 단계 이동과 입력 상태를 따로 관리하면 뒤로가기 후 이전 단계의 값이 남아 이후 분기에서 잘못 사용될 수 있다.
상태 머신은 단계와 상태를 함께 표현할 수 있지만, 타입·머신·UI를 여러 곳에서 맞춰야 하면 수정 부담과 진입장벽이 커진다.
새 도구를 만들기 전 여러 개발자의 사용 경험을 모아 요구사항을 정리하면 실제 문제에 맞는 설계를 시작할 수 있다.
여러 라우터 지원과 히스토리 관리의 플러그인화처럼 핵심 로직과 환경별 기능을 분리하는 요구를 설계에 반영했다.

소개

단계별 상태 관리 라이브러리 @use-funnel을 어떻게 만들게 되었는지 소개드릴게요. 문제의식을 공유하고 해결방법을 찾으려는 분들께 도움이 되면 좋겠어요.

비슷한 학습 자료

문서 박서진/이다용

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

문서 박서진/이다용

안녕하세요, 토스 Frontend Engineering Head 박서진, 토스뱅크 Frontend Developer 이다용입니다. 오늘은 토스의 작은 유틸리티 함수 라이브러리로 시작한 es-toolkit이 어떻게 일주일에 2천만 회 이상 다운로드되고, Yarn이나 Recharts 같은 핵심 라이브러리에서도 사용되었는지 그 성장한 과정을 소개해 드릴게요. [서진] es-toolkit의 시작 프론트엔드 개발자로서 throttle, debounce 나 uniq 같은 함수들이 자주 필요해요. 그런데 지금까지는 자신 있게 이러한 유틸리티 함...

프론트엔드 프로그래밍 언어