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

토스팀 프론트엔드 챕터에서 기존에 사용하던 @toss/use-funnel 라이브러리의 문제점을 해결하기 위해 새롭게 개발한 @use-funnel 오픈소스 라이브러리의 구현 과정을 다룹니다. js 의존성, 단계별 상태 관리 부재, 뒤로가기 시 상태 관리 문제, 기능 확장의 어려움 등의 단점이 있었습니다.

이를 해결하기 위해 모노레포 구조를 채택하고, @use-funnel/core 패키지를 통해 핵심 기능을 구현한 후, useRouter 훅을 반환하도록 설계했습니다. js뿐만 아니라 다양한 라우터 환경에서도 유연하게 사용할 수 있도록 개선했습니다.

el/react-router-dom과 같은 라우터별 패키지에서 실제 퍼널 상태 관리를 구현하여 Next.js뿐만 아니라 다양한 라우터 환경에서도 유연하게 사용할 수 있도록 개선했습니다.