한 스트림, 두 아이콘 - 알림 채널 분리와 읽음 마커가 3개인 이유
아이콘은 2개인데 읽음 마커는 왜 3개일까. '점등은 겹치고 읽음은 독립'이라는 기획 규칙이 만든 마커 설계와, 그 비대칭이 낳은 유령 점등까지.
// 가독성과 탐색성을 우선으로, 구현 메모와 기술 문서를 차곡차곡 쌓아가는 프론트엔드 블로그.
Tag
9개의 글이 연결되어 있습니다.
아이콘은 2개인데 읽음 마커는 왜 3개일까. '점등은 겹치고 읽음은 독립'이라는 기획 규칙이 만든 마커 설계와, 그 비대칭이 낳은 유령 점등까지.
payload는 알림 모달에겐 순수 트리거, Host/Container 테이블에겐 부분 업데이트의 조준 정보다. 화면에 그리는 데이터는 언제나 API pull - refreshSignal의 생산→전달→소비 설계까지.
데이터는 멀쩡히 있는데 5초마다 표가 번쩍인다. react-query의 두 로딩 플래그 차이와, '로딩이 거슬린다'를 세 문제로 분해해 각각 주인을 찾은 과정.
탭 10개를 열어도 서버 연결은 1개. SharedWorker + SSE 구조의 개발 루프에서 만난 함정들 - HMR 불가, 분리된 콘솔, 상태코드 은닉, 그리고 '모르면 건드리지 않는' 3값 판정.
throttle 5초를 걸었는데 로딩이 너무 자주 돈다. 원인은 창의 기준점을 재조회 '시작' 시각에 찍고 있었기 때문 - 완료 시각 anchor로 옮긴 과정과 효과 계산.
SSE payload에 일련번호가 없는 알람이 발견됐다. 서버 필드 의존을 버리고 클라이언트 수신 시각으로 전환한 과정과, 옛 localStorage 값을 '판별 없이' 청소한 키 리네임 마이그레이션까지.
실시간 알람은 SSE를 골랐는데, 클러스터 설치 상태 화면에서는 Short Polling을 골랐다. 같은 '서버 → 클라이언트 실시간' 문제인데 왜 선택이 달랐는지 정리했다.
실시간 알람 시스템을 SSE와 Shared Worker로 구축하면서 실제로 고민했던 것들 — Next.js Edge Runtime 문제, 배치 전략 설계, 재연결 정책, 탭 간 상태 동기화까지.
Server-Sent Events로 서버 → 클라이언트 단방향 스트리밍을 구현하는 방법과, Shared Worker로 탭 간 상태를 공유하는 방법을 정리했다.