docs(10_Wiki): 위키 전체 재구성 — Topic_* 폴더를 4개 카테고리로 통합 + 대규모 중복 제거

Topic_Agent/Topic_Blog/Topics/Topics_Biz/Topics_Meeting/Topics_Rag의 마크다운 지식 문서를 Topic_General/Topic_Programming/Topic_Graphic/Topic_Business 4개 카테고리로 재분류. - 중복 제거: frontmatter의 status:duplicate/merged + duplicate_of/redirect_to 필드로 자기 자신을 중복으로 선언한 리다이렉트 stub 1032개 제거, 완전 동일 내용 파일 472개 제거, 동일 파일명·다른 내용 충돌 시 더 큰(완전한) 버전만 유지(162개 제거) — 총 1639개 중복 제거. - 분류: 폴더 단위로 명확한 항목(AI_and_ML/Coding/Architecture 등 → Programming, Comfyui/Visual_Effects → Graphic, Topics_Biz/Topics_Meeting/사업 등 → Business, Poetic_Blog_Writing/창의성/Game_Design 등 → General)은 폴더 우선순위로, 나머지 혼재 폴더(Topic_Agent/Topic_Blog/Topics 루트/Thinking & Reasoning/Other/UI_UX_Assets)는 title/tags 키워드 스코어링으로 파일 단위 분류(불명확한 경우 General로 폴백). 원본 폴더명은 "From_*" 서브폴더로 보존해 추적 가능성 유지. - 최종 배치: Programming 2784 / General 1608 / Graphic 285 / Business 249 = 4926개 문서. - 에이전트 운영 상태(.astra/.agent/.obsidian/sessions/memory/_company/docs/lessons/_shared/src)는 지식 콘텐츠가 아니므로 재분류 대상에서 제외하고 원위치 유지. - Topics/Topic_email(상위 보호 폴더 Topic_email과 파일명 100% 중복) 삭제 — 보호 폴더 자체는 미변경. - 완전히 비게 된 Topic_Agent/Topic_Blog/Topics_Biz/Topics_Rag 폴더 제거.
2026-07-05 00:33:48 +09:00
parent 1cfd3bbb56
commit 9148c358d0
6455 changed files with 1 additions and 86875 deletions
@@ -0,0 +1,138 @@
+---
+id: web-intersectionobserver-patterns
+title: IntersectionObserver — Lazy / Infinite Scroll / Tracking
+category: Coding
+status: draft
+source_trust_level: B
+verification_status: conceptual
+created_at: 2026-05-09
+updated_at: 2026-05-09
+tags: [web, intersection-observer, lazy, vibe-coding]
+tech_stack: { language: "JavaScript / browser", applicable_to: ["Web"] }
+applied_in: []
+aliases: [lazy load, infinite scroll, viewport detection, sentinel]
+---
+
+# IntersectionObserver
+
+> 요소가 viewport 와 교차하는지 비동기 감지. **scroll listener 보다 100배 가벼움**. 무한 스크롤 / 이미지 lazy load / 노출 트래킹의 표준.
+
+## 📖 핵심 개념
+- 한 번 register → 비동기 callback.
+- threshold: 몇 % 보일 때 trigger.
+- root: viewport 또는 특정 ancestor.
+- rootMargin: 화면 외 N px 도 포함.
+
+## 💻 코드 패턴
+
+### Lazy load 이미지
+```tsx
+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
+```tsx
+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)
+```ts
+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
+```ts
+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 — 형제
+```ts
+// 크기 변경
+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).
+
+## 🔗 관련 문서
+- [[React_Virtualization_Lists]]
+- [[Frontend_Image_Optimization]]