feat: Wiki-fication of 00_Raw data (Batch #5 - Component Composition, CWV, Hooks, Context, UX)

2026-04-26 20:34:25 +09:00
parent 9a94689531
commit 9f9b5ee0c3
9 changed files with 366 additions and 0 deletions
@@ -0,0 +1,28 @@
+---
+id: FE-REACT-COMP-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [react, frontend, component-composition, reusability, modularity, design-patterns, clean-code]
+last_reinforced: 2026-04-26
+---
+
+# [[Component Composition (컴포넌트 합성)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "상속(Inheritance)의 경직성 대신 합성(Composition)의 유연함을 선택하여, 작고 독립적인 컴포넌트들을 마치 레고 블록처럼 조합함으로써 거대하고 복잡한 시스템을 관리 가능한 수준으로 유지하라" — React 아키텍처의 핵심 설계 원칙 중 하나.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Containment and Specialization" — 자식 컴포넌트를 `props.children`으로 전달받아 렌더링하는 컨테인먼트 패턴과, 일반적인 컴포넌트를 구체적인 사례로 설정하는 특수화 패턴의 결합.
+- **주요 구현 기법:**
+    - **Props.children:** 컴포넌트 내부의 구멍(Slot)을 열어두어 호출부에서 자유롭게 UI를 주입하게 함.
+    - **Render Props:** 함수를 prop으로 전달하여 렌더링 로직을 외부에서 결정하게 함.
+    - **HOC (High-Order Components):** 컴포넌트를 인자로 받아 기능을 강화된 새 컴포넌트를 반환 (최근에는 Custom Hooks로 많이 대체됨).
+- **의의:** 컴포넌트 간의 결합도를 낮추고(Decoupling), 비즈니스 로직과 UI 로직을 명확히 분리하여 코드의 재사용성과 테스트 용이성을 극대화함.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 과거 객체지향 기반 프레임워크는 클래스 상속을 권장했으나, React 정책은 '상속보다 합성(Composition over Inheritance)' 정책을 절대적 원칙으로 고수함.
+- **정책 변화:** Antigravity 프로젝트는 모든 공용 UI 라이브러리 설계 시 '슬롯 기반 합성(Slot-based Composition)' 아키텍처를 강제하며, 3단계 이상의 깊은 Prop Drilling이 발생하는 경우 반드시 합성을 통해 구조를 재설계하도록 함.
+
+## 🔗 지식 연결 (Graph)
+- [[React-Architecture]], [[Custom-Hooks-Patterns]], [[Reusable-UI-Components]], [[Scalable-React-Architecture]]
+- **Raw Source:** [[00_Raw/Component Composition.md]]
@@ -0,0 +1,31 @@
+---
+id: PERF-CWV-CORE-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [core-web-vitals, performance, lcp, inp, cls, seo, user-experience, rum]
+last_reinforced: 2026-04-26
+---
+
+# [[Core Web Vitals Metrics (코어 웹 바이탈 지표)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "기술적 성능 지표를 사용자 체감 경험과 비즈니스 수익으로 연결하고, 구글이 정의한 세 가지 핵심 축(로딩, 반응성, 안정성)을 통해 웹사이트의 품질을 객관적으로 증명하라" — 실제 사용자 데이터(RUM)를 기반으로 한 현대 웹 성능의 표준 가시성 프레임워크.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "User-Centric Performance Quantization" — 단순한 서버 응답 속도를 넘어, 사용자가 언제 콘텐츠를 보는지(LCP), 언제 상호작용할 수 있는지(INP), 화면이 얼마나 안정적인지(CLS)를 수치화하는 패턴.
+- **3대 핵심 지표:**
+    - **LCP (Largest Contentful Paint):** 가장 큰 시각적 요소가 렌더링되는 시간. (2.5초 이내 우수)
+    - **INP (Interaction to Next Paint):** 사용자 입력 후 다음 프레임이 그려질 때까지의 지연 시간. (200ms 이내 우수, FID를 대체)
+    - **CLS (Cumulative Layout Shift):** 예기치 않은 레이아웃 이동 측정. (0.08~0.1 미만 우수)
+- **측정 및 개선 루프:**
+    - **Synthetic Testing:** Lighthouse, PageSpeed Insights를 통한 개발 환경 검증.
+    - **Field Data (RUM):** Sentry, Web-Vitals.js를 활용하여 실제 다양한 기기/네트워크 환경의 사용자 데이터 수집.
+- **의의:** 검색 엔진 랭킹(SEO) 향상과 더불어 이탈률 감소 및 구매 전환율 상승이라는 실질적 비즈니스 가치 창출.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 과거에는 FID(First Input Delay)가 핵심이었으나, 2024년 3월부터 모든 입력의 지연을 측정하는 INP 정책으로 전격 교체됨. 또한 CLS 기준이 0.1에서 0.08로 강화되는 추세임.
+- **정책 변화:** Antigravity 프로젝트는 모든 웹 자산 배포 시 Core Web Vitals 'Good' 등급 달성을 필수 배포 조건(Quality Gate)으로 설정하며, 성능 미달 시 자동 롤백 정책을 적용함.
+
+## 🔗 지식 연결 (Graph)
+- [[Cumulative-Layout-Shift-CLS]], [[Web-Performance-Optimization]], [[SEO-Foundations]], [[React-Performance-Optimization]]
+- **Raw Source:** [[00_Raw/Core Web Vitals.md]]
@@ -0,0 +1,31 @@
+---
+id: FE-REACT-CUSTOM-HOOK-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [react, frontend, custom-hooks, dry, refactoring, separation-of-concerns, business-logic]
+last_reinforced: 2026-04-26
+---
+
+# [[Custom Hooks Patterns (커스텀 훅 패턴)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "UI 렌더링과 비즈니스 로직을 날카롭게 분리하고, 반복되는 로직을 독립적인 함수로 캡슐화하여 컴포넌트의 가독성과 테스트 가능성을 극대화하라" — React에서 로직 재사용의 가장 강력하고 유연한 표준 방식.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Logic Decoupling and Reusable Abstraction" — 데이터 패칭, 상태 관리, 이벤트 리스너 등록 등의 횡단 관심사를 컴포넌트 밖으로 추출하여 `useX`라는 이름의 커스텀 인터페이스로 추상화하는 패턴.
+- **주요 적용 사례:**
+    - **Data Fetching:** `useFetch`, `useQuery` 등을 통해 로딩/에러 상태와 데이터 처리 로직 공유.
+    - **Form Management:** `useForm`을 통해 입력값 바인딩 및 유효성 검사 로직 재사용.
+    - **Global State / Storage:** `useLocalStorage`, `useAuth` 등을 통해 외부 상태와의 동기화.
+- **설계 원칙:**
+    - **Naming:** 반드시 `use` 접두사로 시작하여 훅임을 명시.
+    - **Co-location:** 특정 도메인에 국한된 훅은 해당 도메인 폴더에, 범용 훅은 `src/hooks`에 배치.
+- **의의:** 중복 코드를 제거(DRY)하고, 복잡한 컴포넌트의 인지적 부하를 줄여 유지보수 비용을 획기적으로 낮춤.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 과거에는 로직 재사용을 위해 고차 컴포넌트(HOC)나 Render Props를 사용했으나, 훅 도입 이후 이러한 방식은 'Wrapper Hell'을 유발하는 지양해야 할 정책으로 간주됨.
+- **정책 변화:** Antigravity 프로젝트는 30라인 이상의 비즈니스 로직을 포함하는 컴포넌트 개발 시 반드시 커스텀 훅으로의 분리를 검토하도록 강제하며, 훅 내부에서 사이드 이펙트(Effect) 발생 시 명확한 클린업 로직을 포함하는 것을 정책화함.
+
+## 🔗 지식 연결 (Graph)
+- [[React-Hooks]], [[DRY-Principle]], [[Clean-Code-Principles]], [[Component-Composition]]
+- **Raw Source:** [[00_Raw/Custom Hooks.md]]
@@ -0,0 +1,31 @@
+---
+id: FE-REACT-CONTEXT-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [react, context-api, state-management, prop-drilling, dependency-injection, performance]
+last_reinforced: 2026-04-26
+---
+
+# [[React Context API (리액트 컨텍스트 API)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "컴포넌트 트리의 깊은 곳까지 데이터를 전달하기 위한 'Prop Drilling'의 터널을 뚫고, 전역적인 데이터를 필요한 곳에서 즉시 구독할 수 있는 직통 라인을 개설하라" — 중첩된 컴포넌트 간의 데이터 공유를 단순화하는 React 내장 상태 관리 메커니즘.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Implicit Dependency Injection" — 명시적으로 props를 전달하는 대신, Provider를 통해 상위 트리에서 데이터를 제공하고 Consumer(또는 `useContext`)를 통해 하위 트리 어디에서든 데이터를 소비하는 패턴.
+- **주요 활용 사례:**
+    - **Theming:** 라이트/다크 모드 등 UI 테마 정보 공유.
+    - **Authentication:** 사용자 로그인 상태 및 권한 정보 유지.
+    - **Localization:** 언어 설정 및 번역 함수 제공.
+- **주의사항 및 한계:**
+    - **Re-rendering Issue:** Context 값이 변경되면 해당 Context를 구독하는 모든 하위 컴포넌트가 리렌더링됨. 잦은 업데이트가 발생하는 상태에는 부적합.
+    - **Complexity:** 무분별한 Context 사용은 컴포넌트의 재사용성을 저해하므로, 합리적인 수준의 'Prop Drilling'이나 '컴포넌트 합성'과 균형을 맞춰야 함.
+- **의의:** 외부 상태 관리 라이브러리(Redux, Zustand 등) 없이도 컴포넌트 간 결합도를 낮추고 데이터 흐름을 단순화함.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 과거에는 Context API를 '전역 상태 관리 도구'로 홍보했으나, 현대 정책은 '의존성 주입(DI) 도구'로 명확히 정의함. 성능 이슈로 인해 빈번한 상태 변경에는 Zustand나 Recoil 같은 전문 라이브러리 사용을 권장하는 정책으로 전향함.
+- **정책 변화:** Antigravity 프로젝트는 정적인 전역 데이터(테마, 설정)에 대해서만 Context API 사용을 허용하며, 동적인 비즈니스 상태는 전역 상태 관리 라이브러리 사용을 의무화함.
+
+## 🔗 지식 연결 (Graph)
+- [[React-Hooks]], [[State-Management-Patterns]], [[Component-Composition]], [[Performance-Optimization]]
+- **Raw Source:** [[00_Raw/React Context API.md]]
@@ -0,0 +1,33 @@
+---
+id: WEB-HTML-SEMANTIC-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [html5, semantic-web, accessibility, seo, web-standards, documentation-strategy]
+last_reinforced: 2026-04-26
+---
+
+# [[Semantic HTML Foundations (시맨틱 HTML 기초)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "단순히 '보이는 것'을 넘어 브라우저와 검색 엔진, 그리고 AI 크롤러가 웹사이트의 '의미(Context)'를 단번에 파악할 수 있도록 코드에 논리적 이름표를 붙여라" — 데이터의 구조적 명확성을 통해 접근성과 발견 가능성을 극대화하는 웹 표준의 핵심.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Meaning-oriented Structuring" — 디자인 요소를 위한 `div`, `span` 남발을 지양하고, 콘텐츠의 역할에 맞는 `<header>`, `<main>`, `<article>`, `<footer>` 등의 전용 태그를 사용하여 문서의 아키텍처를 정의하는 패턴.
+- **주요 시맨틱 태그와 역할:**
+    - **`<header>` / `<footer>`:** 페이지나 섹션의 도입부와 결론부 정의.
+    - **`<nav>`:** 주요 내비게이션 링크 그룹.
+    - **`<main>`:** 문서의 핵심 주제와 유일한 콘텐츠 영역.
+    - **`<article>` / `<section>`:** 독립적으로 배포 가능한 콘텐츠와 논리적으로 구분된 주제별 그룹.
+    - **`<aside>`:** 주요 내용과 간접적으로 관련된 부가 정보.
+- **의의:**
+    - **Accessibility:** 스크린 리더가 문서 구조를 이해하고 사용자에게 효율적으로 전달 가능.
+    - **SEO:** 검색 엔진이 콘텐츠의 중요도를 정확히 파악하여 랭킹에 반영.
+    - **AEO:** AI 모델이 핵심 정보를 더 정확하게 추출하여 답변 출처로 인용.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 과거에는 테이블 레이아웃이나 무분별한 `div` 중첩이 일반적이었으나, 현대 정책은 '시맨틱 태그 우선 정책'을 통해 기계 가독성(Machine Readability)을 최우선으로 함.
+- **정책 변화:** Antigravity 프로젝트는 모든 UI 개발 시 `div` 사용을 최소화하고, 모든 페이지에 최소 하나 이상의 `<main>`과 적절한 헤딩 계층(H1-H6)을 포함하는 것을 필수 정책으로 시행함.
+
+## 🔗 지식 연결 (Graph)
+- [[Web-Accessibility]], [[SEO-Foundations]], [[AI-Answer-Engine-Optimization]], [[Modern-Website-Architecture]]
+- **Raw Source:** [[00_Raw/Semantic HTML.md]]
@@ -0,0 +1,30 @@
+---
+id: UX-PRINCIPLES-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [ux, user-experience, design-thinking, user-centered-design, usability, interaction-design]
+last_reinforced: 2026-04-26
+---
+
+# [[UX Design Principles (UX 디자인 원칙)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "사용자가 제품을 만나는 순간부터 떠나는 순간까지의 감정과 경험을 정교하게 설계하고, 기술적 복잡성을 직관적인 단순함으로 치환하여 사용자의 '성공'을 가속화하라" — 사용자 중심 설계(UCD)를 통해 비즈니스 가치를 실현하는 전략적 프로세스.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Human-Centered Problem Solving" — 개발자의 기술적 구현 가능성이 아닌, 실제 사용자의 고충(Pain Points)과 니즈를 분석하여 해결책을 도출하는 반복적인 설계 패턴.
+- **핵심 원칙:**
+    - **Usability:** 학습하기 쉽고, 효율적으로 사용할 수 있으며, 오류 발생을 최소화하는 능력.
+    - **Aesthetics & Minimalism:** 불필요한 시각적 노이즈를 제거하여 핵심 가치에 집중하게 함.
+    - **Consistency:** 시스템 전반에 걸쳐 일관된 패턴을 제공하여 학습 비용 절감.
+    - **Accessibility:** 신체적/인지적 제약에 상관없이 모든 사용자에게 평등한 가치 제공.
+- **프로세스:** 공감(Empathize) → 정의(Define) → 아이디어 도출(Ideate) → 프로토타입(Prototype) → 테스트(Test).
+- **의의:** 제품에 대한 만족도와 충성도를 높여 장기적인 비즈니스 성장과 브랜드 경쟁력을 확보함.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 과거에는 화려한 비주얼이 UX의 전부라고 오해했으나, 현대 정책은 '동작의 명확성'과 '사용자의 목표 달성 속도'를 UX의 핵심 지표 정책으로 삼음.
+- **정책 변화:** Antigravity 프로젝트는 모든 기능 개발 전 반드시 사용자 여정 지도(User Journey Map)를 작성하며, 실사용자 테스트 기반의 피드백 루프를 거치지 않은 UI는 정식 배포하지 않는 정책을 준수함.
+
+## 🔗 지식 연결 (Graph)
+- [[User-Centered-Design-Approach]], [[A-B-Testing-and-Data-Driven-UX]], [[AI-Personalization-and-Adaptive-UX]], [[Inclusive-Design]]
+- **Raw Source:** [[00_Raw/UX Design.md]]