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/Frontend/Automatic Batching.md

@@ -0,0 +1,168 @@
+---
+id: wiki-2026-0508-automatic-batching
+title: Automatic Batching (React 18+)
+category: 10_Wiki/Topics
+status: verified
+canonical_id: self
+aliases: [React Batching, Concurrent Batching]
+duplicate_of: none
+source_trust_level: A
+confidence_score: 0.9
+verification_status: applied
+tags: [react, batching, performance, rendering]
+raw_sources: []
+last_reinforced: 2026-05-10
+github_commit: pending
+tech_stack:
+  language: TypeScript
+  framework: React 19
+---
+
+# Automatic Batching (React 18+)
+
+## 매 한 줄
+> **"매 setState 매 합쳐서 매 한 번 render"**. React 18에서 도입된 automatic batching은 모든 update (promise, setTimeout, native event)를 single re-render로 group한다. React 17 이전엔 React event handler 안에서만 batching이었음 — 이제 전부 자동.
+
+## 매 핵심
+
+### 매 동작
+- 매 동일 tick 안의 setState calls → React가 모아서 하나의 commit 으로 처리.
+- 결과: less render, less DOM mutation, less component lifecycle invocation.
+- React 19도 동일 model 유지 + Compiler 가 추가 optimization.
+
+### React 17 vs 18+
+- **17**: `onClick` 안 batching O / `setTimeout`, `Promise.then` 안 batching X.
+- **18+**: 매 모든 context batching O.
+- Opt-out: `flushSync()` 로 immediate render 강제.
+
+### 매 응용
+1. Form state with multiple fields — 매 single render.
+2. Async fetch chain — 매 single render after Promise.
+3. Concurrent transitions — startTransition + batching.
+
+## 💻 패턴
+
+### React 18 default behavior
+```tsx
+import { useState } from 'react';
+
+function Form() {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [age, setAge] = useState(0);
+
+  async function handleSubmit() {
+    const res = await fetch('/api/me');
+    const data = await res.json();
+    // 18+: 매 3 setState 매 single render
+    setName(data.name);
+    setEmail(data.email);
+    setAge(data.age);
+  }
+
+  return <button onClick={handleSubmit}>Load</button>;
+}
+```
+
+### flushSync to opt out
+```tsx
+import { flushSync } from 'react-dom';
+
+function handleClick() {
+  flushSync(() => {
+    setCount(c => c + 1);
+  });
+  // 매 DOM 업데이트 매 done — measure 가능
+  const h = listRef.current.scrollHeight;
+  flushSync(() => {
+    setHeight(h);
+  });
+}
+```
+
+### Custom hook with batched async
+```tsx
+function useAsyncForm<T>() {
+  const [data, setData] = useState<T | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  async function load(fn: () => Promise<T>) {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fn();
+      // 18+: 매 두 setState 매 single render
+      setData(res);
+      setLoading(false);
+    } catch (e) {
+      setError(e as Error);
+      setLoading(false);
+    }
+  }
+
+  return { data, loading, error, load };
+}
+```
+
+### Reducer alternative
+```tsx
+const [state, dispatch] = useReducer(reducer, initial);
+// 매 single dispatch 매 multi-field update — natural batching
+dispatch({ type: 'SUBMIT_OK', payload: data });
+```
+
+### Avoid stale closure with functional updates
+```tsx
+// 매 sequential update — 매 함수형 사용
+setCount(c => c + 1);
+setCount(c => c + 1); // → +2, not +1
+```
+
+### Measuring render with Profiler
+```tsx
+import { Profiler } from 'react';
+
+<Profiler
+  id="Form"
+  onRender={(id, phase, actual) => console.log(id, phase, actual)}
+>
+  <Form />
+</Profiler>
+```
+
+## 매 결정 기준
+| 상황 | Approach |
+|---|---|
+| Multi-field update | default (let batching work) |
+| DOM measurement between updates | `flushSync` |
+| Sequential counter update | functional updater |
+| Complex state graph | `useReducer` |
+| Concurrent UI | `startTransition` |
+
+**기본값**: do nothing — automatic batching handles it.
+
+## 🔗 Graph
+- 부모: [[React]] · [[Concurrent Features|Concurrent Rendering]]
+- 변형: [[Batching]] · [[startTransition]]
+- Adjacent: [[flushSync]] · [[useReducer]]
+
+## 🤖 LLM 활용
+**언제**: explain when batching applies, refactor pre-18 code, debug "why is render double" question.
+**언제 X**: actual render count measurement — Profiler / DevTools.
+
+## ❌ 안티패턴
+- **불필요한 flushSync**: 매 performance 의 hurt — 마지막 수단.
+- **Sequential setState with stale value**: `setCount(count+1); setCount(count+1)` → +1.
+- **Object identity reset**: `setData({...})` matter — same shallow ref skip.
+- **Mid-render setState**: trigger infinite loop.
+
+## 🧪 검증 / 중복
+- Verified (React 18 RFC, React 19 docs).
+- 신뢰도 A.
+
+## 🕓 Changelog
+| 날짜 | 변경 |
+|---|---|
+| 2026-05-08 | Phase 1 |
+| 2026-05-10 | Manual cleanup — React 18+ batching pattern + flushSync |