react2026.05.04
AI 리뷰 비동기 상태 흐름과 실시간 알림 구조 정리
AI 리뷰처럼 시간이 오래 걸리는 작업을 즉시 응답, 백그라운드 처리, 상태 기반 UI, 실시간 알림으로 연결한 과정을 정리했습니다.
Tech Journal
The archive.
React, Next.js, React Native를 다루며 마주친 성능, 구조, 구현 문제를 해결 과정 중심으로 기록합니다.
Categories
React.
11 articles
react2026.04.19
React Query 캐시 전략으로 PR 댓글 API 요청을 10회에서 0회로 줄인 과정
CodeMate의 PR 댓글 화면에서 React Query의 `invalidateQueries`와 `setQueryData`를 비교하며, 변경분만 반영해 네트워크 요청을 줄인 과정을 정리했습니다.
react2026.04.19
PR 댓글 실시간 시스템을 WebSocket으로 설계한 이유
PR 댓글, reply, typing indicator, 알림을 실시간으로 반영하기 위해 WebSocket 기반으로 설계한 이유와 구조를 정리했습니다.
로 대시보드 응답 시간 2배 단축하기/index.png)
nextjs2026.04.04
Next.js 서버 컴포넌트에서 Promise.all()로 대시보드 응답 시간 2배 단축하기
Next.js 서버 컴포넌트에서 Promise.all을 활용해 데이터 페칭을 병렬화하고, 대시보드 응답 시간을 약 2배 개선한 과정과 구조를 정리했습니다.
react2025.03.11
setState는 비동기일까
setState가 왜 동기 함수인지, 그리고 react서는 setState를 통해 상태 업데이트를 어떻게 하는지 알아보자.
react2024.11.25
React와 Next.js의 Suspense에 대해 알아보자
React와 Next.js에서 Suspense를 어떤 방식으로 다르게 다루는지, 그리고 Next.js에서 이로인해 발생할 수 있는 에러와 해결방법에 대해 알아보자.
react2024.11.19
리액트 컴포넌트 테스트 코드 시작하기
React Deepdive 서적의 React 컴포넌트의 테스트 코드를 정리하였다.
로 불필요한 렌더링을 없애본 경험/index.png)
react2024.11.12
React 개발자 도구(React dev tools)로 불필요한 렌더링을 없애본 경험
React 개발자 도구(React dev tools)의 기능들과 이를 활용해본 경험을 공유해보겠다.
react2024.11.04
서버사이드 렌더링에 대해 알아보자(Feat: next.js, SSG)
클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)에 대해서 그리고 SSR을 활용한 next.js 예제와 SSG의 개념과 예제까지 알아보자.
react2024.10.27
React useState 훅과 클로저
클로저를 이용한 React useState 훅의 작동 원리
![[React DeepDive] React의 가상 DOM](/posts/React/[React DeepDive] React의 가상 DOM/React.svg)
react2024.09.25
[React DeepDive] React의 가상 DOM
리액트 딥다이브 책 내용 중 '가상 DOM과 파이버'의 정리 내용입니다.