기술노트

TanStack Query로 서버 상태를 다루는 실전 패턴 정리. 서버 vs 클라이언트 상태 구분, staleTime/gcTime 차이, queryKey 설계, invalidation, 낙관적 업데이트, 프리페치, 흔한 실수까지 코드로 설명합니다.

시그널(signal·computed·effect)은 값이 바뀐 곳만 세밀하게 다시 실행하는 반응성 모델이다. 가상DOM과 뭐가 다른지, Solid·Svelte 5 룬·Angular·React가 같은 이름으로 어떻게 다르게 구현했는지 실전 코드로 비교한다.

use client 경계, 서버 컴포넌트 직접 패칭, Suspense 스트리밍, Server Actions 뮤테이션, 직렬화 규칙, 캐싱·재검증, 흔한 함정과 안 쓸 때까지 Next.js App Router 실전 코드로 정리한다.

스프레드로 복사했는데 원본이 같이 바뀐다면 얕은 복사 함정이다. 참조와 값, 중첩 객체, structuredClone까지 실무 기준으로 정리한다.

"each child should have a unique key" 경고와, 배열 index를 key로 쓸 때 생기는 입력값 꼬임·잘못된 재사용 버그.

전역 상태가 필요하다고 무조건 Redux는 아니다. 규모·갱신 빈도·팀 규약 기준으로 Context, Zustand, Redux를 가른다.

scroll 이벤트 + offset 계산은 성능도 나쁘고 버그도 많다. IntersectionObserver로 sentinel을 감시하는 방식이 표준이다.

세 가지 메모이제이션은 "비싼 계산"이나 "memo된 자식에 넘기는 참조"에만 의미가 있다. 무지성 남발은 오히려 느려진다. 판단 기준 정리.

서버 컴포넌트가 기본, 상호작용이 필요한 잎 컴포넌트만 클라이언트로. use client를 트리 위쪽에 박으면 번들이 통째로 커진다.

Hydration failed 에러는 서버 HTML과 클라이언트 첫 렌더가 다를 때 난다. Date·random·typeof window·잘못된 HTML 중첩 등 원인별 처방.

useEffect 무한 루프의 99%는 의존성 배열 안에 매 렌더마다 새로 만들어지는 객체·함수가 들어가서다. 원인 3가지와 해결법.

TanStack Start 1.0 GA. SaaS 1개 production 전환 사후 — 라우팅, 데이터 로딩, SSR 패턴, Remix·Next 대비 강약점.