// Project2026년 7월 17일 · 4 min read
한 스트림, 두 아이콘 - 알림 채널 분리와 읽음 마커가 3개인 이유
아이콘은 2개인데 읽음 마커는 왜 3개일까. '점등은 겹치고 읽음은 독립'이라는 기획 규칙이 만든 마커 설계와, 그 비대칭이 낳은 유령 점등까지.
// 가독성과 탐색성을 우선으로, 구현 메모와 기술 문서를 차곡차곡 쌓아가는 프론트엔드 블로그.
Tag
5개의 글이 연결되어 있습니다.
아이콘은 2개인데 읽음 마커는 왜 3개일까. '점등은 겹치고 읽음은 독립'이라는 기획 규칙이 만든 마커 설계와, 그 비대칭이 낳은 유령 점등까지.
데이터는 멀쩡히 있는데 5초마다 표가 번쩍인다. react-query의 두 로딩 플래그 차이와, '로딩이 거슬린다'를 세 문제로 분해해 각각 주인을 찾은 과정.
카테고리만으로는 글이 쌓일수록 한계가 온다. 카테고리·태그·관계 이름표를 3단계로 놓고, 이 블로그가 지금 어디까지 와 있고 다음이 무엇인지 정리했다.
서버 응답을 기다리지 않고 UI를 먼저 업데이트하는 Optimistic UI 패턴이 왜 좋고, 실패 시 어떻게 롤백하는지 React와 Next.js Server Actions 기준으로 정리했다.
필터, 정렬, 페이지네이션 같은 UI 상태를 useState 대신 URL searchParams에 저장하면 뭐가 좋은지, Next.js App Router 기준으로 구체적인 패턴을 정리했다.