Next.js 의 서버 컴포넌트에서 Prefetch Query 를 적극적으로 활용하여 클라이언트 컴포넌트에서는 초기 데이터를 가지고 실행할 수 있게 하였습니다.
Supabase Realtime
알림 및 실시간 채팅 기능을 구현하기 위해 Supabase 의 Realtime을 활용하였습니다.
Funnel 패턴
모바일 퍼스트 UI 에 맞추어 Funnel 패턴을 도입하여 보다 매끄러운 사용자 경험을 제공했습니다.
💥 트러블 슈팅
PWA
Android, Chrome에서 PWA를 구현했으나 iOS에서는 beforeInstallPrompt 이벤트 사용이 불가했습니다. 설치 유도로만 가능하다는 것을 확인하고, 최종 스펙에서 PWA 지원을 제외했습니다. 하지만 Next.js에서 PWA를 구현하는 방법을 습득하고 적용할 수 있었습니다.
무한스크롤과 페이지네이션
디자인 상 모바일에선 무한스크롤, 데스크탑에서는 페이지네이션으로 요구사항이 상이했습니다. width 768px을 기준으로 각각 적용하였고, 이때 useInfiniteQuery를 사용하여 하나의 쿼리로 처리하였습니다. 디자인 요구사항을 정확히 만족시키고, 무한스크롤과 페이지네이션을 동시에 구현하는 방법을 습득하였습니다.
아토믹 디자인 패턴 적용
Private 폴더로 컴포넌트를 관리했으나 규모가 커지면서 코드 중복 발생 및 컴포넌트 탐색이 어려워졌습니다. 이에 아토믹 패턴을 도입하였고, Atoms, Molecules, Organisms로 컴포넌트를 분류했습니다. 코드 중복이 감소하고 재사용성이 향상되었으며, 구조가 명확해져 유지 보수가 용이해졌습니다.
실시간 알림 구현
DB의 변화를 즉시 반영하여 알림을 사용자 인터페이스에 표시하는 구조를 설계해야 했습니다. 커스텀 훅을 사용하여 훅 내부의 useEffect에서만 postgres-changes를 구독 사용하여 상태 관리를 격리 및 중앙화 하였습니다. 결과적으로 구조가 단순화되어, 알림이 필요한 컴포넌트에서 훅 호출만으로 사용함으로서 재사용성과 확장성이 강화되었습니다.
