#rendering

react csr ssr react-dom rendering claude-code eslint hooks lint automation seo open-graph noindex robots-txt nextjs pnpm monorepo workspace dependency-management catalog vercel aws amplify ecs fargate deployment hydration 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 typescript 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 ios swift workout apple-watch watchos react-19 useeffect render anti-pattern turborepo 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 cdn 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 ai-workflow history-api form xcode eas expo 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 browser-rendering 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 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월 8일Article

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

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

READ MOREREAD MORE→

2026년 6월 17일Article

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

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

READ MOREREAD MORE→

2025년 7월 15일Article

CSS contain 속성 정리

CSS contain 속성으로 렌더링을 격리하는 법을 정리한 학습 노트. 단축값 정의·브라우저 지원·실제 성능 측정까지 공식 문서 기준으로 묶었다.

READ MOREREAD MORE→

2025년 7월 4일Article

requestAnimationFrame 동작 정리

requestAnimationFrame이 화면 갱신 주기에 어떻게 맞물려 돌아가는지, 프레임과 주사율이 어긋날 때 무슨 일이 벌어지는지 파보고 정리했다.

READ MOREREAD MORE→

2024년 4월 15일Article

Next.js SSR·SSG·ISR 렌더링 전략 정리

Pages Router 기준 SSR·SSG·ISR이 매번 헷갈렸다. 셋을 한자리에 두고 동작 방식과 트레이드오프를 정리했다.

READ MOREREAD MORE→

2022년 7월 8일Article

브라우저가 화면을 그리기까지의 과정 정리

DNS 조회부터 Composition까지, 브라우저가 웹사이트를 띄울 때 내부에서 벌어지는 흐름을 Construction과 Operation 두 단계로 짚어봤다.

READ MOREREAD MORE→