
@use-funnel 개발기 #2: 기존 라이브러리를 어떻게 뜯어 고칠 것인가?
기존 퍼널 라이브러리의 Next.js 의존성과 상태 관리 한계를 개선한 구현 과정을 소개했습니다. core 분리, 타입 안전성 강화, Render 확장으로 다양한 라우터와 복잡한 퍼널을 지원했습니다.

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


고객의 재탐색 행동 데이터를 바탕으로 검색 결과 페이지의 날짜 변경 흐름을 단순화했습니다. 진입점을 분리하고 모듈을 바로 열리게 해 탐색 편의성을 높였습니다.


여러 지면에서 따로 관리되던 상품 카드 컴포넌트를 일원화할 필요가 있었습니다. 단순 리팩토링을 넘어 디자인 시스템 재구축으로 통합 관리 기반을 마련했습니다.


스플래시 화면으로 홈 화면 로딩 중 빈 화면 노출을 줄이고 백화현상을 개선했습니다. 또한 온보딩 플로우를 단순화해 첫 진입 경험을 더 자연스럽게 만들었습니다.

여기어때 앱에서 웹뷰를 통합한 과정과 연동 방식을 정리한 글입니다. 파편화된 브릿지 규격을 하나로 묶어 유지보수와 협업 효율을 높인 사례를 소개했습니다.

Turborepo JIT Packages로 공통 패키지 소스를 빌드 없이 참조하는 방식을 소개했습니다. TypeScript 모듈 해석과 Next.js 설정 충돌을 분석하고 해결 과정을 정리했습니다.


에디터로 긴급 프로모션 페이지를 빠르게 만들고 반복 수정까지 운영한 개선 사례를 소개했습니다.이미지 업로드와 알림 기능을 다듬으며, 에디터의 활용 범위를 가설 검증 도구로 넓히려 했습니다.

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


해외숙소 홈을 웹에서 네이티브로 개편하며 성능과 사용성을 개선했습니다. 또한 State 관리와 탭 전환 응답 처리 문제를 분리·정리해 유지보수성을 높였습니다.


UIKit 기반 홈 화면을 SwiftUI로 전환한 적용 과정을 공유했습니다. 기존 ReactorKit과 CMS 구조를 유지하면서 생명주기 브리지와 모델 모듈화를 활용했습니다.


해외 파트너 센터에 다국어 처리를 적용한 과정과 i18next 선택 이유를 정리했습니다. Next.js 환경에서의 언어 감지, JSON 관리 방식, 유지보수 포인트도 함께 공유했습니다.

ts-pattern 라이브러리를 소개하며 복잡한 분기 처리를 더 읽기 쉽게 만드는 방법을 다뤘습니다. 패턴 매칭을 활용해 코드 가독성을 높이는 방향을 설명했습니다.


국내 파트너센터 레포지토리 안에서 해외 파트너센터를 빠르게 오픈한 과정을 다루었습니다. Next.js Middleware와 `isOversea` 상태로 도메인과 화면을 분기해 유지보수성을 높였습니다.

FE News 24년 12월 프런트엔드 소식을 정리한 큐레이션 글입니다. 설문 보고서, Web AI, Next.js self-hosting, 밋업 공개 소식을 담았습니다.