#frontend

react nextjs hydration use-id create-portal create-root cookie http-only csrf xsrf-token same-site web-security middleware open-graph rewrite seo sso slo authentication idp frontend bff resize-observer css-variables performance rendering 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 monorepo pnpm turborepo semver workspace package-management python venv virtual-environment troubleshooting gps pedometer live-activity react-native auto-pause claude-code 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 hooks prompt-caching shell-script automation 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 ssr isr cache-control vercel aws 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년 7월 3일Article

SSO·SLO 개념과 프론트엔드 경계 정리

로그인·로그아웃을 다루며 만난 SSO, SLO, IdP, SP 용어의 실제 담당 영역과, 프론트엔드가 제어할 수 있는 것과 없는 것을 구분했다.

READ MOREREAD MORE→

2026년 5월 20일Article

컨텐츠 미리보기 기능 구현 시 postMessage vs Base64 URL 방식 비교

어드민에서 입력 중인 콘텐츠 값을 새 탭 미리보기에 실시간 반영해야 했다. 두 가지 접근을 비교한 끝에 postMessage를 골랐다.

READ MOREREAD MORE→

2025년 5월 21일Article

3D CSS Perspective

카드 플립 같은 3D UI를 만들며 perspective, transform-style, backface-visibility가 어떻게 맞물려 돌아가는지 정리했다.

READ MOREREAD MORE→

2024년 6월 10일Article

Swiper 슬라이드 인덱스 리셋 방법

Swiper v11에서 slideTo(0)이 일으킨 페이지 스크롤 부작용을 피하려고 setTranslate + updateActiveIndex 조합으로 우회한 기록.

READ MOREREAD MORE→

2022년 6월 17일Article

TypeScript interface와 type 차이 정리

변수의 데이터 타입을 정의하는 두 방식인 interface와 type alias가 어디서 어떻게 갈리는지 네 갈래로 정리했다.

READ MOREREAD MORE→

2022년 5월 16일Article

Redux 입문기

store 하나에 상태를 모으고 dispatch·reducer·subscribe로만 손대게 만드는 Redux의 동작 원리를 따라가며 정리했다.

READ MOREREAD MORE→