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>
2026-07-11 11:05:56 +09:00
parent 6549ead309
commit c24165b8bc
6193 changed files with 1717 additions and 31 deletions
@@ -0,0 +1,179 @@
+---
+id: wiki-2026-0508-batching
+title: Batching
+category: 10_Wiki/Topics
+status: verified
+canonical_id: self
+aliases: [Update Batching, Render Batching]
+duplicate_of: none
+source_trust_level: A
+confidence_score: 0.9
+verification_status: applied
+tags: [batching, performance, rendering, reactive]
+raw_sources: []
+last_reinforced: 2026-05-10
+github_commit: pending
+tech_stack:
+  language: TypeScript
+  framework: React/Vue/Svelte
+---
+
+# Batching
+
+## 매 한 줄
+> **"매 여러 update 매 한 번 처리"**. Batching은 multiple state changes를 single update cycle로 묶어 redundant rendering/computation을 줄이는 reactive UI 의 core optimization. 2026 모든 mainstream framework (React, Vue, Svelte, Solid) 에서 default behavior.
+
+## 매 핵심
+
+### 매 batching 이 필요한 이유
+- 매 setState 매 separate render → DOM mutation N times.
+- 매 batching → microtask/tick 까지 모아 single commit → DOM mutation 1 time.
+- Layout thrashing 방지, paint 횟수 감소.
+
+### Framework comparison
+- **React 18+**: 매 모든 context automatic.
+- **Vue 3**: nextTick scheduler — sync write, async render.
+- **Svelte 5 (runes)**: microtask flush.
+- **Solid**: `batch()` explicit + signal-based fine-grained update.
+
+### 매 응용
+1. Form multi-field update.
+2. Async fetch result write.
+3. Animation frame scheduling.
+
+## 💻 패턴
+
+### React 18+ implicit batching
+```tsx
+function update() {
+  setA(1);
+  setB(2);
+  setC(3);
+  // 매 single render
+}
+```
+
+### Vue 3 batched watcher
+```ts
+import { ref, watchEffect, nextTick } from 'vue';
+
+const count = ref(0);
+watchEffect(() => console.log(count.value));
+
+count.value++;
+count.value++;
+count.value++;
+await nextTick();
+// 매 console.log 매 한 번
+```
+
+### Solid explicit batch
+```tsx
+import { batch, createSignal } from 'solid-js';
+
+const [a, setA] = createSignal(0);
+const [b, setB] = createSignal(0);
+
+batch(() => {
+  setA(1);
+  setB(2);
+}); // 매 single update
+```
+
+### Custom batcher (vanilla JS)
+```ts
+class Batcher {
+  private queue = new Set<() => void>();
+  private scheduled = false;
+
+  schedule(fn: () => void) {
+    this.queue.add(fn);
+    if (!this.scheduled) {
+      this.scheduled = true;
+      queueMicrotask(() => this.flush());
+    }
+  }
+
+  private flush() {
+    for (const fn of this.queue) fn();
+    this.queue.clear();
+    this.scheduled = false;
+  }
+}
+```
+
+### RAF-based animation batching
+```ts
+let pending: (() => void)[] = [];
+let frameId: number | null = null;
+
+function scheduleAnimation(fn: () => void) {
+  pending.push(fn);
+  if (frameId === null) {
+    frameId = requestAnimationFrame(() => {
+      const fns = pending;
+      pending = [];
+      frameId = null;
+      for (const f of fns) f();
+    });
+  }
+}
+```
+
+### Database write batching
+```ts
+class WriteBatcher {
+  private buffer: Record[] = [];
+  private timer: NodeJS.Timeout | null = null;
+
+  add(r: Record) {
+    this.buffer.push(r);
+    if (!this.timer) {
+      this.timer = setTimeout(() => this.flush(), 50);
+    }
+    if (this.buffer.length >= 1000) this.flush();
+  }
+
+  private async flush() {
+    if (this.timer) { clearTimeout(this.timer); this.timer = null; }
+    const batch = this.buffer.splice(0);
+    if (batch.length) await db.insertMany(batch);
+  }
+}
+```
+
+## 매 결정 기준
+| 상황 | Approach |
+|---|---|
+| React UI | Default automatic batching |
+| Solid signal | Explicit `batch()` |
+| Vanilla DOM | `queueMicrotask` 또는 RAF |
+| API write throttling | timer + size threshold |
+| Need immediate flush | `flushSync` (React) / explicit await |
+
+**기본값**: framework default, only override when necessary.
+
+## 🔗 Graph
+- 부모: [[Performance]]
+- 변형: [[Automatic Batching]]
+- Adjacent: [[Throttling]]
+
+## 🤖 LLM 활용
+**언제**: framework batching behavior 설명, custom batcher prototyping, batching vs debouncing 구분.
+**언제 X**: real perf measurement — Profiler / Chrome DevTools.
+
+## ❌ 안티패턴
+- **Force flush 남용**: synchronous render 강제 → 매 batching benefit 의 lost.
+- **State variable explosion**: 5+ useState → useReducer / Object state.
+- **Async loop 안 setState**: 매 await 마다 매 separate batch — group with Promise.all.
+- **No throttle on rapid event**: scroll/resize raw — RAF / debounce.
+
+## 🧪 검증 / 중복
+- Verified (React 18 RFC, Vue 3 reactivity guide, Solid docs).
+- 신뢰도 A.
+
+## 🕓 Changelog
+| 날짜 | 변경 |
+|---|---|
+| 2026-05-08 | Phase 1 |
+| 2026-05-10 | Manual cleanup — generic batching across frameworks |