Frontend

기술 기록

CSS contain 속성 정리

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

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

마우스를 따라다니는 원이 즉시 붙어버리는 게 거슬려서 선형 보간(Lerp) 공식을 매 프레임에 적용해봤다.

이미지 클릭 시 크게 보는 상세 모달을 만들면서, 평소엔 안 열리는 화면이라 React.lazy로 분리하고 사전 로딩으로 클릭 지연을 메웠다.

transform이 왜 빠른지 매번 헷갈려서 렌더링 파이프라인의 어디서 갈리는지 정리해뒀다.

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

검색 플랫폼 등록부터 메타데이터·사이트맵·canonical까지, SEO 작업에서 챙겨야 할 항목을 한 번에 정리했다.

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

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

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