왜 실시간이 필요했을까?

약속잡기와 장소잡기 서비스에서 여러 사람이 동시에 투표할 때, 새로고침 없이 다른 사람의 투표가 바로 반영되어야 합니다. 새로고침 버튼을 눌러야 최신 상태가 보인다면 사용 경험이 크게 떨어지기 때문입니다.

Supabase Realtime 활용

Supabase는 PostgreSQL 기반이면서도 Realtime 기능을 제공합니다. 테이블에 변경이 생기면 WebSocket을 통해 클라이언트에 즉시 알려주는 방식입니다.

// 실시간 구독 예시
const channel = supabase
  .channel('votes')
  .on('postgres_changes', {
    event: '*',
    schema: 'public',
    table: 'dinner_votes',
    filter: `room_id=eq.${roomId}`,
  }, (payload) => {
    // 투표 데이터 갱신
    refreshVotes();
  })
  .subscribe();

주의할 점

• 채널 구독은 컴포넌트 마운트 시 시작하고, 언마운트 시 반드시 해제해야 합니다.
• RLS(Row Level Security) 설정과 Realtime 필터가 맞지 않으면 이벤트가 수신되지 않을 수 있습니다.
• 짧은 시간에 많은 변경이 발생하면 디바운싱 처리가 필요합니다.

Supabase Realtime 덕분에 별도의 WebSocket 서버를 구축하지 않고도 실시간 기능을 구현할 수 있었습니다. 개인 프로젝트에서 Firebase의 대안으로 매우 만족스러운 선택이었습니다.