기술노트

SPA 라우팅의 뚝뚝 끊기는 화면 전환을 브라우저가 스냅샷으로 부드럽게 이어주는 View Transitions API. 원리, 크로스 도큐먼트 전환, 공유 요소 애니메이션, 프레임워크 통합, 접근성까지 코드로 정리했다.

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

window.resize로는 못 잡는 개별 요소의 크기 변화를 ResizeObserver로 감지합니다. borderBoxSize 사용법, 악명 높은 loop 에러 회피, 컨테이너 기준 반응형 실전 패턴까지 정리했습니다.

SSH 멀티플렉싱(ControlMaster)은 열린 연결 하나를 재사용해 반복 접속을 인증 없이 빠르게 만듭니다. ~/.ssh/config 세 줄 설정, -O 제어 명령, 주의점까지 정리했습니다.

인기 캐시가 만료되는 순간 요청이 DB로 쏟아지는 캐시 스탬피드 현상. 뮤텍스 락, 확률적 조기 만료, stale-while-revalidate 세 가지 방어법을 비교합니다.

DB 커넥션 풀을 키울수록 오히려 느려지는 이유와 적정 크기를 잡는 법. 풀 고갈·커넥션 누수, HikariCP 공식, 서버리스와 PgBouncer까지 실전 정리.

EXPLAIN ANALYZE로 데이터베이스가 쿼리를 실제 어떻게 실행했는지 읽는 법 — actual time·rows 추정치·스캔 종류를 보고 느린 쿼리를 감이 아니라 근거로 잡는다.

웹폰트가 뒤늦게 교체되며 화면이 툭 밀리는 CLS를 없애는 폰트 폴백 메트릭 오버라이드 기법. size-adjust와 ascent-override 사용법, 배율을 직접 구하는 방법, next/font 자동화까지 실전 위주로 정리했다.

LCP를 차지하는 히어로 이미지를 브라우저가 먼저 내려받게 만드는 fetchpriority와 preload 실전 가이드. loading=lazy 오용과 srcset 불일치 같은 흔한 실수, 적용 후 확인 방법까지 짚었다.

긴 자바스크립트 작업을 scheduler.yield()로 잘게 쪼개 메인 스레드를 양보하고 INP를 개선하는 법. setTimeout·requestIdleCallback·Web Worker와 무엇이 다른지, 언제 써야 하는지 예제로 정리했다.

화면 밖 요소의 렌더링을 통째로 건너뛰어 긴 페이지의 초기 렌더 비용을 줄이는 CSS 속성. contain-intrinsic-size 짝 사용법과 가상화와의 차이, 스크롤바가 튀는 함정과 해결책까지 실전 위주로 정리했다.

Vue 3.6 Vapor Mode의 작동 원리, 성능 벤치마크, 사용 방법. Virtual DOM 없이 FCP 0.7초 달성