phnml1
ProjectsBlogSearch
⌕Contact

Tags

Allreactnextjstypescriptreact-querycacheperformancecodematesetQueryDatainvalidateQuerieswebsocketrealtimecommentsserver-componentspromise-alloptimizationreact native드래그 앤 드롭성능 최적화ZustandReact.memoselector칸반보드props drillingPanResponderuseMemouseRefuseNativeDriver리렌더링자동 스크롤requestAnimationFramePortalContext APIAnimatedhooks트러블슈팅google mapexpo-location졸업작품JavaScriptdeepdiveuseStatehooknext.jsSSRSuspense렌더링테스트dev toolsSSGAlgorithm프로그래머스PCCPlv2이분탐색클로저생명주기Virtual DOM백준golddfslv3bfs

codemate.

2 articles
React Query 캐시 전략으로 PR 댓글 API 요청을 10회에서 0회로 줄인 과정
react2026.04.19

React Query 캐시 전략으로 PR 댓글 API 요청을 10회에서 0회로 줄인 과정

CodeMate의 PR 댓글 화면에서 React Query의 `invalidateQueries`와 `setQueryData`를 비교하며, 변경분만 반영해 네트워크 요청을 줄인 과정을 정리했습니다.

reactreact-querycacheperformancecodematesetQueryDatainvalidateQueries
PR 댓글 실시간 시스템을 WebSocket으로 설계한 이유
react2026.04.19

PR 댓글 실시간 시스템을 WebSocket으로 설계한 이유

PR 댓글, reply, typing indicator, 알림을 실시간으로 반영하기 위해 WebSocket 기반으로 설계한 이유와 구조를 정리했습니다.

reactwebsocketrealtimecodematecomments
phnml1

성능 병목을 측정하고, 복잡한 상태 흐름을 정리하며, 오래 유지되는 프론트엔드 구조를 기록합니다.

© 2026 Jooyoung. Built with Next.js.

Navigate

ProjectsBlogSearch

Connect

GitHubEmail