실시간 알림 피드 만들기

실시간 알림 피드는 수신 알림을 위한 SSE 스트림과 항목을 읽음으로 표시하기 위한 REST 엔드포인트를 결합합니다. 컴포넌트는 알림 목록을 위한 로컬 상태를 유지하고, useEffect에서 EventSource를 통해 서버 스트림을 구독하며, 낙관적 업데이트를 사용해 사용자 상호 작용(읽음 표시, 닫기)을 처리합니다.

알림 객체는 일반적으로 다음과 같은 형태입니다: { id: string, type: 'info' | 'warning' | 'success', message: string, timestamp: string, read: boolean }. type 필드가 아이콘과 색상을 결정합니다. read 필드는 사용자가 알림을 확인했는지 추적합니다. timestamp를 사용하면 시간대별로 묶을 수 있습니다.

useEffect에서 /api/notifications/stream에 연결된 EventSource를 생성하십시오. 각 message 이벤트가 발생하면 JSON을 분석하고 새 알림을 상태의 맨 앞에 추가하십시오: setNotifications(prev => [JSON.parse(e.data), ...prev]). 맨 앞에 추가하면 가장 최신 알림이 위에 표시되며, 이는 알림 피드의 일반적인 방식입니다.

추가 상태를 사용하지 않고 알림 배열에서 읽지 않은 개수를 계산하십시오: const unreadCount = notifications.filter(n => !n.read).length. 이 값을 알림 종 아이콘의 배지로 표시하십시오. 알림 상태가 변경될 때마다 개수가 자동으로 업데이트되므로 별도의 상태 관리가 필요하지 않습니다.

사용자가 알림을 클릭하면 즉시 낙관적으로 읽음 상태를 업데이트하십시오: setNotifications(prev => prev.map(n => n.id === id ? { ...n, read: true } : n)). 그런 다음 백그라운드에서 /api/notifications/:id로 { read: true }를 포함한 PATCH 요청을 보내십시오. 요청이 실패하면 낙관적 업데이트를 되돌리십시오.

표시할 알림을 "오늘"(같은 날짜), "어제", "이전"으로 그룹화하십시오. 알림의 timestamp와 현재 날짜를 사용해 그룹을 계산하십시오: const today = new Date().toDateString(). 각 그룹을 제목이 있는 별도의 섹션으로 렌더링하십시오. 이렇게 하면 긴 알림 목록을 훨씬 쉽게 훑어볼 수 있습니다.

사용자가 다른 페이지에 있을 때 SSE를 통해 새 알림이 도착하면 알림 목록을 업데이트하는 대신 또는 그와 함께 토스트를 표시하십시오. SSE 구독자와 토스트 표시기가 모두 접근할 수 있는 전역 알림 컨텍스트나 Zustand 저장소를 사용하십시오. 토스트는 몇 초 후 사라지지만 알림은 목록에 남아 있습니다.

앱 전체에서 표시되는 알림은 앱 루트 수준의 React 컨텍스트나 Zustand 저장소에 저장하십시오. SSE 구독은 컴포넌트 트리 상단에 가까운 공급자 컴포넌트에서 관리합니다. 모든 컴포넌트가 공유 저장소를 통해 알림을 읽거나 새 알림을 전달할 수 있으므로, 어느 페이지에서든 토스트를 표시할 수 있습니다.

EventSource는 네트워크가 끊길 때 재연결을 자동으로 처리하지만, 탭의 표시 상태 변경은 별개의 문제입니다. 사용자가 오랫동안 자리를 비운 후 탭으로 돌아오면 서버가 SSE 연결을 종료했을 수 있습니다. EventSource는 자동으로 다시 연결하며, Last-Event-ID 메커니즘이 탭이 백그라운드에 있는 동안 사용자가 놓친 알림을 다시 전송합니다.

단일 페이지 애플리케이션은 페이지를 벗어날 때 메모리에 있던 알림 상태를 잃습니다. 업데이트할 때마다 알림을 localStorage에 저장하십시오: localStorage.setItem('notifications', JSON.stringify(notifications)). 마운트될 때 SSE 스트림이 연결되기 전에 localStorage에서 상태를 초기화하십시오. 이렇게 하면 페이지를 이동해도 알림 기록이 유지됩니다.

서버 측 SSE 엔드포인트는 특정 헤더를 설정해야 합니다: Content-Type: text/event-stream, Cache-Control: no-cache, Connection: keep-alive. Express/NestJS에서는 data: ${JSON.stringify(payload)} 형식으로 이벤트를 작성하십시오. 두 번의 줄바꿈이 이벤트의 끝을 나타낸다는 점에 유의하십시오. 브라우저가 이벤트를 즉시 받을 수 있도록 서버는 작성할 때마다 플러시해야 합니다.

SSE(서버 전송 이벤트) 엔드포인트에 올바른 Content-Type 헤더는 무엇인가요?

알림 피드는 SSE 구독(useEffect에서 EventSource를 사용하고 정리함)과 REST 변경 작업(읽음 표시를 위한 PATCH)을 결합합니다. 데이터 형태는 {id, type, message, timestamp, read}입니다. filter로 unreadCount를 계산하고, 표시할 때 오늘/어제/이전으로 그룹화하십시오. 여러 페이지에서 사용할 토스트에는 전역 컨텍스트나 Zustand를 사용하십시오. 페이지 이동에 대비해 localStorage에 저장하십시오. SSE 엔드포인트에는 Content-Type: text/event-stream, Cache-Control: no-cache와 두 줄바꿈 이벤트 구분자가 필요합니다.