refactor(topics): 멀티 에이전트용 지식 재편 — _Common(공통 기본기) + Domain_* 구조

에이전트 8종(대화형/프로그래머 C·S/디자이너/설계자/기획자/QA/PD/PM)에게
[공통 기본 능력 + 롤별 Specialty] 2층으로 지식을 주입하기 위한 재분류.
문서 내용·포맷은 무수정, 폴더 이동만 (6,372개 문서 수 보존 확인).

- Topic_Programming → Domain_Programming (내부 구조 보존)
- Topic_Graphic → Domain_Design
- Topic_Business → Domain_Product
- Topic_General → Domain_General
- _Common 신설: Math(구 Topic_Math_Specialty), Reasoning(구 General/From_Thinking & Reasoning),
  Reasoning_Creativity(구 General/From_창의성), Communication(Poetic_Blog_Writing + From_writing)
- 타 도메인의 From_* 폴더는 유지 (출처 표기일 뿐, 이미 도메인에 맞게 분류된 문서)
- 빈 폴더 정리 (memory/procedures)
- 에이전트→폴더 매핑은 workspace의 .astra/agent-knowledge-map.json (9개 에이전트)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

10_Wiki/Topics/Domain_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]]