#react

jev typesafe llm ai-workflow structured-output nextjs app-router rsc server-actions architecture typescript monorepo turborepo build-performance react ssr hydration route-handler tanstack-query caching routing proxy cdn react-19 react-server-components server-state browser-rendering csr dom react-dom rendering expo eas testflight ios code-signing claude-code eslint hooks lint automation seo open-graph noindex robots-txt pnpm workspace dependency-management catalog vercel aws amplify ecs fargate deployment use-id create-portal create-root cookie http-only csrf xsrf-token same-site web-security middleware rewrite sso slo authentication idp frontend bff resize-observer css-variables performance variance type-safety strict-function-types covariance image-optimization browser-image-compression jszip web-worker frontend-performance postmessage react-hook-form browser-api next-js healthkit swift workout apple-watch watchos useeffect render anti-pattern semver package-management python venv virtual-environment troubleshooting gps pedometer live-activity react-native auto-pause remote-control mobile-development web-session productivity rtk token-optimization figma-api developer-tools infrastructure mermaid mdx diagram aws-s3 presigned-url file-upload hmac security agentic-loop token-flow prompt-caching shell-script figma cli skill agent responsive-publishing context-window subagent team multi-agent ai-collaboration publishing claude-md memory history-api form xcode widget swiftui app-group sandbox html accessibility a11y nice-auth post-vs-get callback in-app-browser ssg static-site-generation getstaticprops getstaticpaths css contain browser javascript animation lerp linear-interpolation requestanimationframe code-splitting react-lazy dynamic-import preloading reflow repaint composite-layer transform will-change image-upload mobile-web docusaurus mintlify documentation openapi static-site-generator 3d-transform perspective transform-style search-console sitemap metadata canonical jsx transpile ast virtual-dom reconciliation synthetic-event flux declarative immutability frontend-history mvc mvvm jquery backbone swiper oauth user-agent-detection post-message session-storage isr cache-control route53 dns domain txt-record intersection-observer infinite-scroll chat-ui scroll-behavior vpc ec2 iam cloud-basics performance-now dom-high-res-timestamp monotonic-clock user-timing-api node-perf-hooks jenkins ci-cd github-webhook kubernetes docker cicd continuous-integration continuous-delivery continuous-deployment devops data-structure map set git github fork clone version-control oss-contribution generics type-system keyof interface git-branch remote prune closure lexical-scope execution-context deep-dive lexical-environment hoisting scope this binding cssom render-tree tcp first-class-object function arguments var let const type-alias redux redux-toolkit state-management mouse-event drag

2026년 9월 14일Article

SSR과 RSC의 차이, RSC Payload와 두 가지 로딩 흐름 정리

SSR과 RSC를 다른 축으로 갈라 보고, RSC Payload가 초기 로딩과 Client Navigation에서 각각 어떻게 쓰이는지 짚었다.

READ MOREREAD MORE→

2026년 9월 10일Article

React 19 Server Action과 Action 훅 역할 정리

Server Function과 Server Action의 구분부터 useActionState, useOptimistic, use까지 서버 작업을 UI에 잇는 방식을 정리했다.

READ MOREREAD MORE→

2026년 9월 9일Article

React 19 실행 위치와 데이터 소유권 정리

Server Component와 Server State가 왜 다른 질문인지, 실행 위치와 데이터 소유권 두 축으로 갈라 정리했다.

READ MOREREAD MORE→

2026년 9월 8일Article

Hydration 정의와 React render / 브라우저 Paint 구분

rendering이라는 말이 자리마다 다른 걸 가리켜서, Hydration이 붙잡는 대상과 React render의 경계를 나눠 정리했다.

READ MOREREAD MORE→

2026년 9월 7일Article

React 실행 환경과 CSR/SSR 차이 정리

React가 서버에서도 실행되는 이유와 CSR·SSR의 차이를 React 자체가 무엇인지부터 되짚어 정리했다.

READ MOREREAD MORE→

2026년 7월 22일Article

Portal과 createRoot의 차이 — pubuilder 하이드레이션 이슈 정리

Next.js 개발 오버레이의 useId 하이드레이션 경고를 추적하며 createPortal과 독립 React Root의 차이를 정리했다.

READ MOREREAD MORE→

2026년 6월 17일Article

ResizeObserver CSS 변수 직접 갱신 vs React state + rAF 선택 기준

레이아웃 측정값을 UI에 반영할 때 ResizeObserver로 CSS 변수를 직접 갱신할지, React state로 올릴지 그 기준을 정리했다.

READ MOREREAD MORE→

2026년 4월 29일Article

React 19에서 useEffect 안의 setState가 위험한 이유

useEffect 안에서 동기적으로 setState를 호출하면 왜 깜빡임이 생기는지, React가 렌더 중 setState를 어떻게 다르게 처리하는지 내부 동작까지 정리한 학습 일지.

READ MOREREAD MORE→

2026년 3월 11일Article

Next.js App Router에서 멀티스텝 폼의 뒤로가기 차단 구현하기

History API의 더미 entry 패턴과 popstate, beforeunload, requestLeave 콜백을 조합하여 멀티스텝 폼의 이탈을 방지하는 방법을 정리한다.

READ MOREREAD MORE→

2025년 2월 19일Article

JSX 내부 동작과 트랜스파일 정리

JSX가 자바스크립트로 어떻게 바뀌는지 토큰화부터 코드 생성, 트랜스파일까지의 단계를 짚어봤다.

READ MOREREAD MORE→

2025년 2월 19일Article

React 가상 DOM 동작 정리

실제 DOM과 가상 DOM의 차이, 재조정과 리플로우, DocumentFragment까지 가상 DOM이 풀고 있는 문제들을 한 번에 짚어봤다.

READ MOREREAD MORE→

2025년 2월 8일Article

리액트 핵심 가치와 가상 DOM, Flux 아키텍처 정리

리액트를 깊이 들여다보면서 선언적 코드, 가상 DOM, Flux 아키텍처를 학습 노트로 묶어 정리했다.

READ MOREREAD MORE→

2025년 2월 8일Article

리액트 이전의 프론트엔드 상태관리 역사 정리

리액트가 등장하기 전, 순수 JS부터 jQuery, Backbone, Knockout, AngularJS까지 상태관리가 어떻게 진화해왔는지 정리한 학습 노트다.

READ MOREREAD MORE→

2024년 2월 23일Article

Intersection Observer로 만든 채팅 역방향 무한 스크롤 트러블슈팅

채팅 UI에 역방향 무한 스크롤을 붙이며 scrollHeight 측정 타이밍, instant 캐스팅, overflow-anchor 대안까지 짚었다.

READ MOREREAD MORE→

2023년 4월 5일Article

자바스크립트 자료구조 활용 정리 — Map·Set·Stack·Queue·Tree

자료구조 선택이 코드 품질을 가르는 순간들을 React 예시와 함께 짚어봤다. Map·Set·Stack·Queue·Tree를 언제 꺼내 썼는지 일지로 정리했다.

READ MOREREAD MORE→

2022년 5월 18일Article

Redux Toolkit 첫 도입기 — ToDo로 7단계 깔아본 작업 정리

ToDo 리스트를 만들면서 Redux Toolkit을 처음부터 끝까지 한 번 깔아본 기록. 스토어·타입·액션·리듀서·셀렉터·디스패치까지 7단계로 정리했다.

READ MOREREAD MORE→

2022년 5월 6일Article

마우스 드래그로 좌측 슬라이드 토글 만들기

todo 아이템을 마우스로 끌어 왼쪽으로 밀어내는 슬라이드 동작을, React 마우스 이벤트와 transform으로 구현했다.

READ MOREREAD MORE→