목록 보기
@use-funnel 개발기 #1: 왜 기존 라이브러리를 두고 새로 만들었나?
프론트엔드

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

토스
토스
2024년 12월 9일

두줄요약

복잡한 퍼널의 상태 관리와 뒤로가기 문제를 해결하기 위해 `@use-funnel`을 새로 만들었습니다. 사내 요구사항을 모아 코어와 라우터별 구현으로 나누고 오픈소스로 공개했습니다.

핵심 내용

  • 복잡한 퍼널에서 뒤로가기·앞으로가기, 상태 일관성, 타입 안전성을 함께 해결하기 위해 @use-funnel을 새로 설계
  • 기존 use-funnel은 상태 관리가 분리되고, XState는 타입과 에러 메시지, 수정 범위가 부담이 되어 도입 한계 발생
  • 사내 개발자 토론과 워킹그룹을 통해 요구사항을 정리하고, core와 라우터별 구현을 분리한 오픈소스 라이브러리로 발전
  • 문서화와 사내 테스트를 거쳐 버그를 보완한 뒤 외부 오픈소스로 공개

적용해볼 점

  • 퍼널형 UI에서는 화면 전환뿐 아니라 상태 초기화와 복원 규칙까지 함께 설계할 필요
  • 새 도구를 만들기 전 실제 사용자들의 고충을 모아 요구사항을 먼저 정리하는 접근이 유효
  • 공통 코어와 환경별 어댑터를 분리하면 확장성과 재사용성을 높이기 쉬움

다음 읽기

#React 주제를 이어서 읽기

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

기존 퍼널 라이브러리의 Next.js 의존성과 상태 관리 한계를 개선한 구현 과정을 소개했습니다. core 분리, 타입 안전성 강화, Render 확장으로 다양한 라우터와 복잡한 퍼널을 지원했습니다.

토스
토스
프론트엔드

댓글 0

댓글을 작성하려면 로그인이 필요합니다.

댓글을 불러오는 중...