#react | phnml1

react.

11 articles

react2026.05.04

AI 리뷰 비동기 상태 흐름과 실시간 알림 구조 정리

AI 리뷰처럼 시간이 오래 걸리는 작업을 즉시 응답, 백그라운드 처리, 상태 기반 UI, 실시간 알림으로 연결한 과정을 정리했습니다.

react nextjs typescript

react2026.04.19

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

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

react react-query cache performance codemate setQueryData invalidateQueries

react2026.04.19

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

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

react websocket realtime codemate comments

nextjs2026.04.04

Next.js 서버 컴포넌트에서 Promise.all()로 대시보드 응답 시간 2배 단축하기

Next.js 서버 컴포넌트에서 Promise.all을 활용해 데이터 페칭을 병렬화하고, 대시보드 응답 시간을 약 2배 개선한 과정과 구조를 정리했습니다.

nextjs react performance server-components promise-all optimization

react2025.03.11

setState는 비동기일까

setState가 왜 동기 함수인지, 그리고 react서는 setState를 통해 상태 업데이트를 어떻게 하는지 알아보자.

react JavaScript deepdive useState hook

react2024.11.25

React와 Next.js의 Suspense에 대해 알아보자

React와 Next.js에서 Suspense를 어떤 방식으로 다르게 다루는지, 그리고 Next.js에서 이로인해 발생할 수 있는 에러와 해결방법에 대해 알아보자.

react next.js deepdive SSR Suspense 렌더링

react2024.11.19

리액트 컴포넌트 테스트 코드 시작하기

React Deepdive 서적의 React 컴포넌트의 테스트 코드를 정리하였다.

react 테스트 deepdive

react2024.11.12

React 개발자 도구(React dev tools)로 불필요한 렌더링을 없애본 경험

React 개발자 도구(React dev tools)의 기능들과 이를 활용해본 경험을 공유해보겠다.

react next.js 렌더링 트러블슈팅 deepdive dev tools

react2024.11.04

서버사이드 렌더링에 대해 알아보자(Feat: next.js, SSG)

클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)에 대해서 그리고 SSR을 활용한 next.js 예제와 SSG의 개념과 예제까지 알아보자.

react next.js deepdive SSR SSG 렌더링

react2024.10.27

React useState 훅과 클로저

클로저를 이용한 React useState 훅의 작동 원리

react JavaScript deepdive useState hook 클로저

react2024.09.25

[React DeepDive] React의 가상 DOM

리액트 딥다이브 책 내용 중 '가상 DOM과 파이버'의 정리 내용입니다.

react deepdive Virtual DOM

Tags