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,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 |