fix(topics): 지식 그래프 정상화 — 고아 29%→4%, 인덱스 12개·개념 문서 13편

링크 그래프 분석(6,372문서·31,623링크) 기반 최소 수정 정상화:
- [수정] Topic_CPP/Topic_C 인덱스의 링크 표기를 실제 문서 제목으로 교정
  (CPP 117건·C 68건 — [[CPP Intro]] → [[C++ Intro]] 등, 인덱스 파일 2개만 수정)
- [수정] C Tutorial 별칭에 'C' 추가 — [[c]] 60건 해소 (frontmatter 1줄)
- [신규] 고아 다발 폴더 11곳에 00_INDEX MOC 자동 생성 (Poetic_Blog_Writing 500편,
  AI_and_ML 330, Coding 200, Reasoning_Creativity 161, Frontend 146 등)
- [신규] 루트 MOC(Topics Root Index) — breadcrumb [[10_Wiki/Topics]] 47건을 별칭으로 수용
- [신규] 수요 최상위 미싱 개념 문서 13편 (깨진 링크 다발 해소):
  글쓰기 7편(리듬·감정·문체·블로그·퇴고·정서·구조) + 설계 6편(React·Software
  Architecture·ADR·CQRS·Observability·RLHF) — AI 생성 초안임을 review_reason에 명시
- 기존 문서 본문은 무수정 (인덱스 2개 링크 교정 + 별칭 1줄이 수정의 전부)

결과: 고아 1,901(29%)→314(4%), 완전고립 1,018→173, 깨진 링크 10,258→9,679

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

10_Wiki/Topics/Domain_Programming/Frontend/00_INDEX.md

@@ -0,0 +1,297 @@
+---
+id: frontend-index
+title: "Frontend Index"
+category: "Index"
+status: "draft"
+verification_status: "conceptual"
+canonical_id: ""
+aliases: ["Frontend MOC", "Frontend 목차"]
+duplicate_of: ""
+source_trust_level: "B"
+confidence_score: 0.90
+created_at: 2026-07-11
+updated_at: 2026-07-11
+review_reason: "고아 문서 연결용 자동 생성 MOC — 폴더 구성 변경 시 재생성 필요"
+merge_history: []
+tags: ["moc", "index"]
+raw_sources: []
+applied_in: []
+github_commit: ""
+---
+
+# [[Frontend Index]]
+
+## 🎯 한 줄 통찰 (One-line insight)
+`Domain_Programming/Frontend` 폴더의 전체 문서를 연결하는 Map of Content — 이 폴더의 지식으로 들어가는 관문.
+
+## 📚 문서 목록 (270편)
+- [[Accessibility (A11y)]]
+- [[as const]]
+- [[Automatic Batching (React 18+)]]
+- [[Batching]]
+- [[BEM]]
+- [[Branded Types for Nominal Typing]]
+- [[Bridgeless New Architecture]]
+- [[Buffer Allocation]]
+- [[Bundle Size Optimization]]
+- [[Cache Miss Rates]]
+- [[Case Study — Kiwi.com Frontend Migration]]
+- [[CesiumJS]]
+- [[Chrome]]
+- [[Client Components]]
+- [[Client-Side Rendering (CSR)]]
+- [[Code Splitting]]
+- [[Codegen (GraphQL, OpenAPI, Schema-driven)]]
+- [[Component Composition (React)]]
+- [[Composables (Vue)]]
+- [[Composition API (Vue 3)]]
+- [[Computational Geometry (Frontend)]]
+- [[Computed Properties & Watchers]]
+- [[Concurrent Features (React 18+)]]
+- [[CPU Overhead]]
+- [[Cross-platform Mobile Development Frameworks]]
+- [[CSS Grid]]
+- [[CSS Media Queries]]
+- [[CSS Modules]]
+- [[CSSOM]]
+- [[Custom Hooks]]
+- [[Custom Hooks Patterns]]
+- [[Dart]]
+- [[Dart FFI (Foreign Function Interface)]]
+- [[Datacollector Knowledge Hub]]
+- [[Debugging Frontend Applications]]
+- [[Declaration Files]]
+- [[Decorators]]
+- [[DefinitelyTyped]]
+- [[Diffing Algorithm]]
+- [[Discriminated Unions for Error Handling]]
+- [[Discriminated Unions for State Modeling]]
+- [[Draw Call Optimization]]
+- [[Dynamic Theming]]
+- [[Effect TS 및 ts-brand 라이브러리 활용]]
+- [[Equipment Crafting and Synthesis Engine]]
+- [[Error Boundaries]]
+- [[Error Handling and Stability]]
+- [[ESLint Configuration]]
+- [[ESLint Plugin Development]]
+- [[Events]]
+- [[Expo Router]]
+- [[Eye Tracking]]
+- [[Fabric]]
+- [[Fabric Renderer]]
+- [[Figma Tokens Studio]]
+- [[flushSync]]
+- [[Flutter]]
+- [[Flutter AOT Compilation (Dart)]]
+- [[Flutter Impeller]]
+- [[Flutter Web / Desktop]]
+- [[Folder Structure Best Practices]]
+- [[Frontend]]
+- [[Frontend Architecture and Folder Structure]]
+- [[Functional Programming in TypeScript]]
+- [[GPU Resources]]
+- [[GPU WebGL 파이프라인의 미세 지연(Micro-latency) 측정 사례]]
+- [[GraphQL Code Generator]]
+- [[Guilty Gear Xrd Rendering Pipeline]]
+- [[Hermes]]
+- [[Hermes Engine]]
+- [[Hydration (하이드레이션)]]
+- [[Hydration Mismatch and SSR Debugging]]
+- [[IDE Stability Fix]]
+- [[Impeller]]
+- [[Impeller Engine]]
+- [[Indirect Draw]]
+- [[Instancing]]
+- [[JavaScript Async and Event Loop]]
+- [[JavaScript Optimization Patterns]]
+- [[JavaScriptCore]]
+- [[JSI (JavaScript Interface)]]
+- [[JSX]]
+- [[Judgment]]
+- [[Kingdom vs. Kingdom Events (KvK)]]
+- [[Lanes Model]]
+- [[Large-scale Application Refactoring]]
+- [[Levels of Understanding]]
+- [[Memory Leak Debugging in JavaScript]]
+- [[Memory Leak Prevention 메모리 누수 방지]]
+- [[Meta Quest Store]]
+- [[Micro frontends]]
+- [[Mixins]]
+- [[Mobile Augmented Reality]]
+- [[Naming Conventions]]
+- [[never 타입]]
+- [[Next.js Caching Architecture]]
+- [[Next.js Framework]]
+- [[Node.js Global Namespace Augmentation]]
+- [[Nominal Typing in TypeScript]]
+- [[OffscreenCanvas Safari 제약 사항]]
+- [[OffscreenCanvas와 Web Worker를 활용한 메인 스레드 병목 해결]]
+- [[One-way Data Flow]]
+- [[Opaque Types (TypeScript)]]
+- [[Open-Closed Principle (OCP)]]
+- [[OpenGL ES]]
+- [[Opera]]
+- [[Parser]]
+- [[Pinia]]
+- [[Pointer Poisoning]]
+- [[Prefetching]]
+- [[Principles]]
+- [[Probabilistic Graphical Models]]
+- [[Progressive Hydration (점진적 하이드레이션)]]
+- [[Prop Drilling]]
+- [[Provider & Riverpod]]
+- [[Randomized Algorithms]]
+- [[Re-renders Optimization]]
+- [[React Native]]
+- [[React Native for Web]]
+- [[React Native New Architecture]]
+- [[React Native Web — Desktop]]
+- [[React Native 상태 관리 (Redux Toolkit, Zustand, React Query)]]
+- [[Readonly Type]]
+- [[Relative Positioning]]
+- [[Reusable Components]]
+- [[Risk Orchestration]]
+- [[Rollup]]
+- [[SaaS 대시보드 및 이커머스 레이아웃 구축]]
+- [[SaaS 플랫폼 및 인터랙티브 대시보드 개발]]
+- [[Sanity Studio]]
+- [[Satisfies Operator]]
+- [[Scavenger 알고리즘]]
+- [[Scoped Styles]]
+- [[Scripts]]
+- [[SCSS (Sass)]]
+- [[Selective Hydration & Streaming]]
+- [[SEO 중심의 마케팅 및 블로그 사이트 구축]]
+- [[Server Actions]]
+- [[Server Side Rendering (SSR)]]
+- [[Server State Management]]
+- [[Shader Compilation Jank]]
+- [[Shopify Polaris]]
+- [[Skia]]
+- [[Skybound Skill Image Integration]]
+- [[Skybound Stage1-3 Playtest — Balance, Bomb, Visual Diversity Pass (2026-04-26)]]
+- [[Skybound — Enemy Motion, Damage Pressure, and Projectile Visual Pass]]
+- [[Skybound — Miniboss Treasure Cache Reward Loop]]
+- [[Skybound — Player Airframe and 8-Stage Boss Continuity Rework]]
+- [[Skybound — Player Sprite Path Warning Fix]]
+- [[Skybound — Skill Concept and Hangar Layout Overlap Fix]]
+- [[Skybound — Skip Upgrade and Weapon Transform Reconfiguration]]
+- [[Skybound — Stage Miniboss Pattern Differentiation]]
+- [[Skybound — Vampire Survivors Loop and Stage Curve Preparation]]
+- [[Smart vs Dumb Components]]
+- [[SPA (Single Page Application)]]
+- [[Spectre]]
+- [[startTransition]]
+- [[State Management]]
+- [[State Management (Pinia/Vuex)]]
+- [[State Management Libraries]]
+- [[State Management Libraries (Pinia/Redux)]]
+- [[Streaming SSR]]
+- [[Style Dictionary Pipelines]]
+- [[Style Registry]]
+- [[Styled Components v6]]
+- [[Submodules]]
+- [[Suspense Boundary]]
+- [[Suspense 및 Streaming]]
+- [[Threejs WebGPU 파티클 예제]]
+- [[Throttling Debouncing]]
+- [[Timestamp Queries]]
+- [[Timing Attack]]
+- [[Total Blocking Time (TBT)]]
+- [[TurboModules]]
+- [[TypeScript 4.9]]
+- [[TypeScript Advanced Type System]]
+- [[TypeScript API Development]]
+- [[TypeScript Generics]]
+- [[TypeScript Type Safety]]
+- [[TypeScript Utility Types (Record Readonly)]]
+- [[TypeScript 타입 시스템 (TypeScript Type System)]]
+- [[use client]]
+- [[useEffect 클린업(Cleanup)]]
+- [[useOptimistic]]
+- [[useSuspenseQuery]]
+- [[V8 JavaScript Engine]]
+- [[vanilla-extract]]
+- [[Vite]]
+- [[Vue Options API]]
+- [[Vue Single-File Components (SFC)]]
+- [[Vuex]]
+- [[Web Content Accessibility Guidelines (WCAG)]]
+- [[Web Worker (웹 워커)]]
+- [[WebAssembly]]
+- [[WebGL 2.0]]
+- [[WebGL API]]
+- [[WebGL 모바일 GPU 성능 관리]]
+- [[WEBGL_multi_draw Extension]]
+- [[WebGPU Compute Shaders]]
+- [[WebKit]]
+- [[Wonder]]
+- [[Wonderland Engine]]
+- [[Zero-Runtime CSS-in-JS]]
+- [[Zustand]]
+- [[게임 경제 설계]]
+- [[게임 밸런싱]]
+- [[교집합 타입(Intersection Type)]]
+- [[다크 모드 및 다중 브랜드 테마 동적 전환 시스템]]
+- [[단일 진실 공급원(Single Source of Truth)]]
+- [[단일 페이지 애플리케이션 (SPA)]]
+- [[단일 페이지 애플리케이션(SPA) 렌더링 설계]]
+- [[대규모 데이터 렌더링 및 가상화 최적화]]
+- [[대규모 콘텐츠 기반 애플리케이션 및 전자상거래 플랫폼 구축]]
+- [[대규모 프론트엔드 아키텍처(Scalable Frontend Architecture)]]
+- [[대수의 법칙(Law of Large Numbers)]]
+- [[동시성 렌더링 (Concurrent Rendering)]]
+- [[디자인 시스템 구축]]
+- [[디자인 시스템 기반 컴포넌트 개발]]
+- [[디자인 시스템의 타이포그래피 토큰 확장 및 최적화]]
+- [[디지털 트윈 및 데이터 시뮬레이션]]
+- [[레이아웃 Flexbox & Grid 완전 이해]]
+- [[레이아웃 스래싱 (Layout Thrashing)]]
+- [[렌더링 블로킹 방지를 위한 CSS 분할 및 로딩 최적화]]
+- [[렌더링 차단 리소스 (Render-blocking Resources)]]
+- [[리플로우 및 리페인트 (Reflow and Repaint)]]
+- [[마이크로 인터랙션(Micro-interactions)]]
+- [[메인 스레드 (Main Thread)]]
+- [[모듈식 CSS (Modular CSS)]]
+- [[모바일 퍼스트(Mobile-First)]]
+- [[몬테카를로 시뮬레이션(Monte Carlo Simulation)]]
+- [[무거운 데이터 리스트 필터링 구현]]
+- [[반응형 윈도우 리사이즈(Resize) 이벤트 처리]]
+- [[백엔드-프론트엔드 데이터 변환(Data Transformation between Backend and Frontend)]]
+- [[불필요한 리렌더링 방지]]
+- [[브라우저 렌더링 파이프라인(Critical Rendering Path)]]
+- [[브라우저 메모리 관리 및 최적화]]
+- [[비동기 데이터 관리]]
+- [[설정 객체 및 룩업 테이블 설계(Configuration Objects and Lookup Tables)]]
+- [[성능 및 SEO 최적화 프로젝트]]
+- [[성능 최적화(Reflow & Repaint)]]
+- [[성능 최적화가 필수적인 대규모 다중 테마 플랫폼]]
+- [[스포티파이(Spotify)의 스쿼드 모델 및 마이크로 프론트엔드 도입]]
+- [[시뮬레이션(Simulation)]]
+- [[시뮬레이션과 예측 모델링(Simulation and Predictive Modeling)]]
+- [[실무에서 CSS 관리하는 방법]]
+- [[실시간 데이터 대시보드 레이아웃 조절 시스템]]
+- [[알 수 없는 외부 데이터 검증 (unknown types)]]
+- [[애니메이션 (transition / keyframes) 성능 최적화]]
+- [[에일리어싱 (Aliasing)]]
+- [[왕국 대 왕국 (KvK) 이벤트]]
+- [[웹 렌더링 전략 (CSR, SSR, SSG, ISR)]]
+- [[웹 워커 이벤트 포워딩 통신 지연 최소화 방법]]
+- [[웹 프론트엔드 성능 최적화]]
+- [[유동적 타이포그래피(Fluid Typography)]]
+- [[유지보수 가능한 대규모 프론트엔드 CSS 설계]]
+- [[전력 시스템 (Power Systems) — 프론트엔드 관점]]
+- [[지연 렌더링(Deferred Rendering)]]
+- [[차선 모델과 작업 우선순위 (Lane Model & Priorities)]]
+- [[철벽 수비대 인터페이스 설계 전략]]
+- [[초과 속성 검사 (Excess Property Checks)]]
+- [[컨테이너 쿼리 (Container Queries)]]
+- [[컴포넌트 기반 웹 프레임워크 아키텍처 설계]]
+- [[콘텐츠 기반의 이커머스 및 뉴스 웹사이트 성능 튜닝]]
+- [[크로스 플랫폼 디자인 시스템 연동]]
+- [[타이핑에 즉각 반응해야 하는 검색창 (Search as you type)]]
+- [[프론트엔드 성능 최적화 및 SEO 개선 프로젝트]]
+- [[프론트엔드 애플리케이션 렌더링 병목 개선]]
+- [[프론트엔드 컴포넌트 구조화]]
+- [[프론트엔드 컴포넌트 설계]]
+- [[힙 스냅샷 (Heap Snapshots)]]

10_Wiki/Topics/Domain_Programming/Frontend/React.md

@@ -0,0 +1,37 @@
+---
+id: react
+title: "React"
+category: "Frontend"
+status: "draft"
+verification_status: "conceptual"
+canonical_id: ""
+aliases: ["React", "리액트", "react.js", "ReactJS"]
+duplicate_of: ""
+source_trust_level: "B"
+confidence_score: 0.80
+created_at: 2026-07-11
+updated_at: 2026-07-11
+review_reason: "깨진 링크 다발 해소용 AI 생성 초안 — 원출처 리서치로 검증·보강 권장"
+merge_history: []
+tags: ["frontend","react","javascript"]
+raw_sources: []
+applied_in: []
+github_commit: ""
+---
+
+# [[React]]
+
+## 🎯 한 줄 통찰 (One-line insight)
+UI를 상태의 함수로 선언하는 컴포넌트 기반 라이브러리 — "상태가 바뀌면 화면을 어떻게 고칠까" 대신 "이 상태면 화면은 이렇다"를 기술한다.
+
+## 🧠 핵심 개념 (Core concepts)
+- **컴포넌트** — UI를 독립·재사용 가능한 조각으로 분해한다. props 로 데이터를 받고 자신의 state 를 가진다.
+- **선언적 렌더링** — DOM 조작을 직접 하지 않고 상태→UI 매핑을 선언하면 React 가 차이를 계산해 반영한다(가상 DOM 재조정).
+- **단방향 데이터 흐름** — 데이터는 부모→자식으로 흐르고, 자식은 콜백으로 변경을 요청한다. 추적 가능성이 핵심 이점.
+- **훅(Hooks)** — useState/useEffect 등으로 함수 컴포넌트에 상태와 생명주기를 부여한다.
+
+## 🧩 추출된 패턴 (Extracted patterns)
+- 상태를 어디에 둘지가 설계의 8할 — "그 상태를 필요로 하는 컴포넌트들의 최소 공통 조상"에 두는 것이 기본 원칙(state lifting).
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[JavaScript Tutorial]] · [[Software Architecture]]