문서

@use-funnel 개발기 #2: 기존 라이브러리를 어떻게 뜯어 고칠 것인가?

강민우 토스 · 토스 기술 블로그

AI 핵심 요약

기존 퍼널 라이브러리는 Next.js 의존성, 단계별 상태 검증의 부재, 이전 단계 상태를 활용하기 어려운 점 때문에 다양한 라우터와 UI 요구를 수용하기 힘들었다. 이를 해결하기 위해 핵심 로직을 `@use-funnel/core`로 분리하고, 라우터별 패키지가 `createUseFunnel`에 구현을 주입하는 구조로 바꿨다. 단계별 상태는 TypeScript 제네릭과 구별된 유니온으로 표현하고, 상태 타입 비교를 통해 다음 단계에 필요한 데이터가 빠지면 타입 오류가 나도록 했다. 또 `Render.overlay`와 `Render.with`를 제공해 이전 화면을 유지하는 오버레이와 조건별 전환을 지원하며, 공통 로직과 확장 인터페이스를 분리하는 설계의 중요성을 보여준다.

라우터별 구현과 퍼널 핵심 로직을 분리하면 Next.js에 종속되지 않는 라이브러리를 만들 수 있다.
단계별 상태를 제네릭으로 선언하고 구별된 유니온을 활용하면 단계 전환과 데이터 전달을 컴파일 시점에 검증할 수 있다.
기존 단계의 상태를 유지해야 하는 오버레이 UI는 렌더링할 단계를 배열로 관리해 구현할 수 있다.
복잡한 퍼널에서는 이벤트와 화면 렌더링을 분리해 전환 규칙의 응집도를 높일 수 있다.

소개

이번 아티클에서는 @use-funnel 라이브러리의 구현 과정과 방법에 대해서 더 자세히 살펴볼게요.

비슷한 학습 자료

컨퍼런스 SLASH

토스ㅣSLASH 23 - 퍼널: 쏟아지는 페이지 한 방에 관리하기

컨퍼런스 SLASH

매끄럽고 우아한 사용자 경험을 위한 개발자의 경험도 우아할 수 있을까요? 수많은 화면과 쏟아지는 분기를 효과적으로 관리하는 ‘퍼널’ 설계에 대해 소개합니다. 진유림 / 토스 Frontend Developer 발표 자료 👉🏻 https://bit.ly/3WZip27 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://bit.ly/43kW3tO 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #퍼널 #라이브러리 #frontenddeveloper #토스 #개발자컨퍼런스 #SLASH *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에 게재하는 행위는 연사가 동의한 저작권 및 배포전송권에 위배됩니다....

프론트엔드