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,139 @@
+---
+id: wiki-2026-0508-interaction-to-next-paint-inp
+title: Interaction to Next Paint (INP)
+category: 10_Wiki/Topics
+status: verified
+canonical_id: self
+aliases: [INP, Interaction to Next Paint, web vital, FID replacement]
+duplicate_of: none
+source_trust_level: A
+confidence_score: 0.95
+verification_status: applied
+tags: [web-vitals, inp, performance, frontend, core-web-vitals]
+raw_sources: []
+last_reinforced: 2026-05-10
+github_commit: pending
+tech_stack:
+  language: JavaScript / TypeScript
+  framework: web-vitals
+---
+
+# Interaction to Next Paint (INP)
+
+## 매 한 줄
+> **"매 user input → 매 next visible paint 의 latency"**. 2024-03 의 의 의 FID 의 replace. 매 Core Web Vitals member. 매 < 200ms 'good', < 500ms 'needs improvement'.
+
+## 매 핵심
+
+### 매 measurement
+- 매 매 page session 의 of 의 모든 interaction 의 worst (P98).
+- 매 input delay + processing + presentation delay.
+
+### 매 응용
+- SEO (Google ranking).
+- UX.
+- Form / button responsiveness.
+
+## 💻 패턴
+
+### Measure
+```javascript
+import { onINP } from 'web-vitals';
+onINP(({ value, rating }) => {
+  analytics.track('INP', { value, rating });  // 매 rating: 'good' | 'needs-improvement' | 'poor'
+});
+```
+
+### Optimize: yield to main thread
+```javascript
+button.addEventListener('click', async () => {
+  await scheduler.yield();  // 매 modern API
+  // 매 매 chunk 의 의 의 yield
+  for (let i = 0; i < items.length; i++) {
+    if (i % 100 === 0) await scheduler.yield();
+    process(items[i]);
+  }
+});
+```
+
+### Web Worker (heavy work)
+```javascript
+const worker = new Worker('heavy.js');
+button.addEventListener('click', () => {
+  worker.postMessage(data);
+});
+worker.onmessage = e => updateUI(e.data);
+```
+
+### Debounce / throttle
+```javascript
+function debounce(fn, ms) {
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => fn(...args), ms);
+  };
+}
+
+input.addEventListener('input', debounce(handleSearch, 300));
+```
+
+### React 18 useDeferredValue
+```jsx
+function Search({ query }) {
+  const deferredQuery = useDeferredValue(query);
+  const results = expensiveCompute(deferredQuery);
+  return <Results items={results} />;
+}
+```
+
+### Long Animation Frames API (debug)
+```javascript
+new PerformanceObserver(list => {
+  for (const entry of list.getEntries()) {
+    if (entry.duration > 50) {
+      console.warn('Long task', entry);
+    }
+  }
+}).observe({ type: 'long-animation-frame', buffered: true });
+```
+
+### Code splitting
+```javascript
+const HeavyComponent = lazy(() => import('./HeavyComponent'));
+// 매 only loaded on demand
+```
+
+## 매 결정 기준
+| 상황 | Approach |
+|---|---|
+| Heavy compute | Worker |
+| Long task | scheduler.yield |
+| Search input | Debounce + useDeferredValue |
+| Initial bundle | Code split |
+
+**기본값**: 매 measure with web-vitals + 매 yield + 매 worker for heavy + 매 < 200ms target.
+
+## 🔗 Graph
+- 부모: [[Core Web Vitals Optimization (INP, LCP, CLS)|Core-Web-Vitals]] · [[Google-Page-Experience-2025-Update]]
+- 응용: [[GPU Acceleration (Compositing)]] · [[E-commerce-Optimization]]
+- Adjacent: [[Core Web Vitals Optimization (INP, LCP, CLS)|First Input Delay (FID)]]
+
+## 🤖 LLM 활용
+**언제**: 매 web product. 매 SEO.
+**언제 X**: 매 backend.
+
+## ❌ 안티패턴
+- **Synchronous heavy work on main thread**: 매 INP 폭발.
+- **No measurement**: 매 invisible.
+- **setTimeout(0) only**: 매 still on main.
+
+## 🧪 검증 / 중복
+- Verified (web.dev, web-vitals.js docs).
+- 신뢰도 A.
+
+## 🕓 Changelog
+| 날짜 | 변경 |
+|---|---|
+| 2026-05-08 | Phase 1 |
+| 2026-05-10 | Manual cleanup — INP + 매 yield / worker / debounce / React code |