Antigravity Agent
4.2 KiB
4.2 KiB
id, title, category, status, source_trust_level, verification_status, created_at, updated_at, tags, tech_stack, applied_in, aliases
| id | title | category | status | source_trust_level | verification_status | created_at | updated_at | tags | tech_stack | applied_in | aliases | |||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| web-intersectionobserver-patterns | IntersectionObserver — Lazy / Infinite Scroll / Tracking | Coding | draft | B | conceptual | 2026-05-09 | 2026-05-09 |
|
|
|
IntersectionObserver
요소가 viewport 와 교차하는지 비동기 감지. scroll listener 보다 100배 가벼움. 무한 스크롤 / 이미지 lazy load / 노출 트래킹의 표준.
📖 핵심 개념
- 한 번 register → 비동기 callback.
- threshold: 몇 % 보일 때 trigger.
- root: viewport 또는 특정 ancestor.
- rootMargin: 화면 외 N px 도 포함.
💻 코드 패턴
Lazy load 이미지
function LazyImage({ src, alt }: { src: string; alt: string }) {
const ref = useRef<HTMLImageElement>(null);
const [loaded, setLoaded] = useState(false);
useEffect(() => {
const obs = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
ref.current!.src = src;
setLoaded(true);
obs.disconnect();
}
},
{ rootMargin: '200px' } // 200px 미리
);
obs.observe(ref.current!);
return () => obs.disconnect();
}, [src]);
return <img ref={ref} alt={alt} className={loaded ? '' : 'placeholder'} />;
}
Infinite scroll — sentinel
function InfiniteList({ items, onLoadMore }: ...) {
const sentinelRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const obs = new IntersectionObserver(([e]) => {
if (e.isIntersecting) onLoadMore();
});
obs.observe(sentinelRef.current!);
return () => obs.disconnect();
}, [onLoadMore]);
return <>
{items.map(i => <Row key={i.id} {...i} />)}
<div ref={sentinelRef} style={{ height: 1 }} />
</>;
}
노출 트래킹 (impression)
const obs = new IntersectionObserver(
entries => {
entries.forEach(e => {
if (e.isIntersecting && e.intersectionRatio >= 0.5) {
const id = (e.target as HTMLElement).dataset.id;
analytics.track('impression', { id });
obs.unobserve(e.target); // 한 번만
}
});
},
{ threshold: [0.5] }
);
document.querySelectorAll('[data-track-impression]').forEach(el => obs.observe(el));
React hook
function useInView(opts?: IntersectionObserverInit) {
const ref = useRef<HTMLElement>(null);
const [inView, setInView] = useState(false);
useEffect(() => {
const obs = new IntersectionObserver(([e]) => setInView(e.isIntersecting), opts);
if (ref.current) obs.observe(ref.current);
return () => obs.disconnect();
}, []);
return [ref, inView] as const;
}
MutationObserver / ResizeObserver — 형제
// 크기 변경
const ro = new ResizeObserver(entries => {
for (const e of entries) console.log(e.contentRect);
});
ro.observe(element);
🤔 의사결정 기준
| 상황 | 권장 |
|---|---|
| 이미지 lazy | IntersectionObserver 또는 native loading="lazy" |
| 무한 스크롤 | IntersectionObserver sentinel |
| 트래킹 노출 | IntersectionObserver + threshold |
| 요소 크기 변화 | ResizeObserver |
| DOM 노드 추가/제거 | MutationObserver |
| 스크롤 위치 정확 (px 단위) | scroll 이벤트 + throttle |
❌ 안티패턴
- scroll listener 로 viewport 검사: 매 scroll fire — 60fps 깨짐. IO 가 답.
- disconnect 안 함: leak.
- threshold 0 만 사용: 1px 이라도 보이면 trigger. 50% 같은 조건 필요할 수 있음.
- rootMargin 음수 / 양수 헷갈림: 양수 = viewport 확장, 음수 = 줄임.
- observer 매 렌더 새로: useEffect 의존성 비어있어야.
- 노출 트래킹 매번 (unobserve 안 함): 한 사용자가 100번 노출 = 100 이벤트.
- SSR 환경에서 IntersectionObserver 직접 use: undefined. typeof window 체크.
🤖 LLM 활용 힌트
- 무한 스크롤 / lazy = IntersectionObserver 디폴트.
- React hook 화 (useInView).