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 폴더 제거.

10_Wiki/Topic_Programming/Coding/React_useEffect_Pitfalls.md

@@ -0,0 +1,65 @@
+---
+id: react-useeffect-pitfalls
+title: React useEffect 함정 (Pitfalls)
+category: Coding
+status: draft
+source_trust_level: B
+verification_status: conceptual
+created_at: 2026-05-09
+updated_at: 2026-05-09
+tags: [react, hooks, useEffect, side-effects, vibe-coding]
+tech_stack: { language: "TypeScript / React 18+", applicable_to: ["Web", "React Native"] }
+applied_in: []
+aliases: [useEffect dependency, effect cleanup, stale closure]
+---
+
+# React useEffect 함정
+
+> useEffect 는 "이 effect 가 어떤 값에 의존하는가" 와 "언제 cleanup 해야 하는가" 두 질문에 답할 때만 쓴다. 동기화 도구지 lifecycle 후크가 아니다.
+
+## 📖 핵심 개념
+- useEffect 는 **외부 시스템과의 동기화** (DOM, network, subscription, timer) 도구.
+- 의존성 배열 = effect 가 다시 실행되어야 하는 조건.
+- StrictMode 에서 의도적으로 두 번 실행 → cleanup 누락 즉시 노출.
+
+## 💻 코드 패턴
+
+```ts
+// ✅ subscription — cleanup 필수
+useEffect(() => {
+  const sub = api.subscribe(setData);
+  return () => sub.unsubscribe();
+}, [api]);
+
+// ✅ AbortController 로 stale fetch 방지
+useEffect(() => {
+  const ac = new AbortController();
+  fetch(`/api/users/${id}`, { signal: ac.signal })
+    .then(r => r.json()).then(setUser).catch(e => { if (e.name !== 'AbortError') throw e; });
+  return () => ac.abort();
+}, [id]);
+```
+
+## 🤔 의사결정 기준
+| 상황 | useEffect | 다른 도구 |
+|---|---|---|
+| 외부 동기화 (DOM event, subscription, API) | ✅ | — |
+| props/state 에서 파생 값 계산 | ❌ | 그냥 변수 / useMemo |
+| 이벤트 핸들러 안에서 일어날 일 | ❌ | onClick 안에서 직접 |
+| 한 번만 실행 (mount 시) | StrictMode 두 번 실행 가정 | useRef 가드 + 명시적 cleanup |
+
+## ❌ 안티패턴
+- **빈 deps 배열로 "componentDidMount 흉내"**: StrictMode 에서 두 번. cleanup 안 짜면 leak.
+- **state 를 effect 에서 다른 state 로 derive**: 렌더 → effect → setState → 재렌더. 그냥 변수로 계산.
+- **deps 누락**: stale closure. ESLint `react-hooks/exhaustive-deps` 켜기.
+- **객체/배열 리터럴을 deps**: 매 렌더 새 참조 → 무한 루프. useMemo/useCallback or primitive 로.
+- **async 함수를 effect 직접**: cleanup 못 받음. 안에서 IIFE 또는 별도 함수.
+
+## 🤖 LLM 활용 힌트
+- "effect 가 외부 시스템 동기화인지, 단순 derived value 인지 판단해라" 라고 명시.
+- cleanup 항상 요청.
+- exhaustive-deps lint 가정.
+
+## 🔗 관련 문서
+- [[React_useMemo_When_Not_To]]
+- [[React_Strict_Mode_Effects]]