[P-Reinforce] 2026-04-20: 15-Level React Mastery Curriculum Integrated

2026-04-20 16:35:21 +09:00
parent d4bb35e35f
commit 5297ccb065
16 changed files with 295 additions and 0 deletions
@@ -178,6 +178,21 @@
  },
  "active": "5e19c94f304a33d1",
  "lastOpenFiles": [
+    "Collaboration_Governance.md",
+    "Accessibility_Inclusivity.md",
+    "TypeScript_Type_Safety.md",
+    "Deployment_Final_Gate.md",
+    "Reliability_Safety_First.md",
+    "Modern_Environment_Ecosystem.md",
+    "Styling_Governance.md",
+    "API_Communication_Patterns.md",
+    "React_Testing_Strategy.md",
+    "React_Clean_Code_Best_Practices.md",
+    "React_State_Management_Strategy.md",
+    "React_Performance_Optimization.md",
+    "Component_Design_Patterns.md",
+    "React_Hooks_Deep_Dive.md",
+    "React_Mental_Model.md",
    "Tetris_Project_Retrospective.md",
    "System_Debugging_Protocol.md",
    "System_Protocol_Standard.md",
@@ -0,0 +1,19 @@
+---
+title: 효율적인 API 통신 패턴 (Axios & Interceptors)
+category: Software Architecture
+tags: [API, Axios, Interceptor, Error Handling, Network]
+created: 2026-04-20
+---
+
+# 효율적인 API 통신 패턴
+
+## 📡 인프라 설계
+- **Service Layer**: API 호출 로직을 컴포넌트와 분리하여 별도 모듈화.
+- **Interceptors**: 전역 요청 헤더 주입 및 전역 에러 핸들링.
+
+## 🚨 에러 대응
+401(토큰 만료), 500(서버 장애) 등 공통 에러에 대한 중앙 집중형 대응 시나리오 수립.
+
+## 🔗 연결된 지식
+- [[System_Protocol_Standard]]
+- [[React_State_Management_Strategy]]
@@ -0,0 +1,17 @@
+---
+title: 웹 접근성 및 포용적 설계 (a11y)
+category: Software Architecture
+tags: [Accessibility, a11y, Semantic HTML, Inclusivity]
+created: 2026-04-20
+---
+
+# 웹 접근성 및 포용적 설계
+
+## ♿ 설계 원칙
+- **Semantic HTML**: 기계가 이해할 수 있는 의미론적 태그 사용.
+- **ARIA**: 표준 태그 외의 인터랙션에 대한 의미 보강.
+- **Keyboard Navigation**: 마우스 없이도 모든 기능 접근 가능하게 설계.
+
+## 🔗 연결된 지식
+- [[Styling_Governance]]
+- [[React_Clean_Code_Best_Practices]]
@@ -0,0 +1,17 @@
+---
+title: 협업 가이드라인 및 코드 거버넌스
+category: Software Architecture
+tags: [Collaboration, PR, Code Review, Documentation, Governance]
+created: 2026-04-20
+---
+
+# 협업 가이드라인 및 코드 거버넌스
+
+## 🤝 협업 문화
+- **PR Protocol**: 변경 목적과 기술적 고민을 상세히 기록.
+- **Code Review**: 비판이 아닌 개선을 위한 커뮤니케이션.
+- **Documentation**: 미래의 자신과 동료를 위한 지속적인 문서 관리.
+
+## 🔗 연결된 지식
+- [[React_Clean_Code_Best_Practices]]
+- [[Deployment_Final_Gate]]
@@ -0,0 +1,17 @@
+---
+title: 컴포넌트 설계 패턴 (Atomic & Composition)
+category: Software Architecture
+tags: [Design Pattern, Atomic Design, Composition, Architecture]
+created: 2026-04-20
+---
+
+# 컴포넌트 설계 패턴
+
+## 🧩 구조 설계
+1.  **Atomic Design**: Atom(최소 단위) -> Molecule -> Organism -> Template -> Page 순으로 조립.
+2.  **Container-Presenter**: 로직 담당과 UI 담당의 분리.
+3.  **Component Composition**: Props Drilling을 방지하기 위해 자식을 통째로 넘기는 전략.
+
+## 🔗 연결된 지식
+- [[Project_Architecture_Guidelines]]
+- [[Styling_Governance]]
@@ -0,0 +1,19 @@
+---
+title: 배포 프로토콜 및 CI/CD 자동화
+category: Software Architecture
+tags: [Deployment, CI/CD, GitHub Actions, Vercel, DevOps]
+created: 2026-04-20
+---
+
+# 배포 프로토콜 및 CI/CD 자동화
+
+## 🚀 파이프라인
+- **CI (Continuous Integration)**: 빌드 및 테스트 자동화.
+- **CD (Continuous Deployment)**: 배포 자동화 (Vercel, AWS).
+
+## 🔒 보안 정책
+환경 변수(`.env`) 관리를 통한 민감 정보 보호 및 보안 사고 방지.
+
+## 🔗 연결된 지식
+- [[Modern_Environment_Ecosystem]]
+- [[Collaboration_Governance]]
@@ -0,0 +1,19 @@
+---
+title: 모던 개발 환경 및 프레임워크 생태계
+category: Software Architecture
+tags: [Vite, Next.js, Ecosystem, Modern Stack]
+created: 2026-04-20
+---
+
+# 모던 개발 환경 및 프레임워크 생태계
+
+## 🏗️ 도구의 선택
+- **Vite**: 초고속 번들링 및 개발 생산성.
+- **Next.js**: SSR/SSG 지원을 통한 SEO 최적화 및 풀스택 기능.
+
+## 📁 디렉토리 구조
+프로젝트 전반의 일관성을 위한 폴더 레이아웃 표준 확립.
+
+## 🔗 연결된 지식
+- [[Deployment_Final_Gate]]
+- [[Project_Architecture_Guidelines]]
@@ -0,0 +1,17 @@
+---
+title: 리액트 클린 코드 및 개발 에티켓
+category: Software Architecture
+tags: [Clean Code, Etiquette, Best Practice, Readable Code]
+created: 2026-04-20
+---
+
+# 리액트 클린 코드 및 개발 에티켓
+
+## 🧹 핵심 수칙
+- **Early Return**: 복잡한 조건문을 피하고 예외를 먼저 처리.
+- **Destructuring**: Props 및 데이터 구조 분해 할당으로 가독성 확보.
+- **Explicit Naming**: 변수와 함수명은 의도를 명확히 함 (e.g., `handleBtnClick` 대신 `handleSubmit`).
+
+## 🔗 연결된 지식
+- [[Collaboration_Governance]]
+- [[System_Debugging_Protocol]]
@@ -0,0 +1,20 @@
+---
+title: 리액트 훅(Hooks) 심층 분석 및 활용
+category: Software Architecture
+tags: [React, Hooks, useEffect, Custom Hooks]
+created: 2026-04-20
+---
+
+# 리액트 훅(Hooks) 심층 분석
+
+## 📡 useEffect의 본질
+- 단순한 라이프사이클 함수가 아니라, **외부 시스템과의 동기화** 장치임.
+- 의존성 배열(`deps`) 관리가 핵심.
+
+## 🛠️ Custom Hooks
+- 컴포넌트에서 비즈니스 로직을 분리하여 재사용 가능하게 만드는 기술.
+- UI 컴포넌트는 오직 데이터 전달과 렌더링에만 집중하게 함.
+
+## 🔗 연결된 지식
+- [[React_Mental_Model]]
+- [[React_Performance_Optimization]]
@@ -0,0 +1,20 @@
+---
+title: 리액트 핵심 멘탈 모델 (UI as a Function of State)
+category: Software Architecture
+tags: [React, State, Mental Model, Immutability]
+created: 2026-04-20
+---
+
+# 리액트 핵심 멘탈 모델
+
+## 🎯 핵심 개념
+리액트 앱은 단순히 DOM을 조작하는 것이 아니라, **상태(State)**가 바뀌면 UI가 자동으로 업데이트되는 구조를 가집니다.
+
+## 🧱 3대 원칙
+1.  **Immutability (불변성)**: 상태는 직접 수정하지 않고 항상 새로운 복사본을 만들어 교체해야 함.
+2.  **Declarative UI (선언형 UI)**: "어떻게"가 아니라 "무엇을" 보여줄지에 집중.
+3.  **Unidirectional Data Flow (단방향 데이터 흐름)**: Props는 부모에서 자식으로만 흐름.
+
+## 🔗 연결된 지식
+- [[React_Hooks_Deep_Dive]]
+- [[Component_Design_Patterns]]
@@ -0,0 +1,20 @@
+---
+title: 리액트 렌더링 최적화 전략
+category: Software Architecture
+tags: [Performance, Memoization, React.memo, Optimization]
+created: 2026-04-20
+---
+
+# 리액트 렌더링 최적화 전략
+
+## ⚡ 주요 도구
+- **React.memo**: Props 변경이 없을 때 재렌더링 방지.
+- **useMemo / useCallback**: 연산 결과 및 함수 객체의 메모이제이션.
+- **Virtualization**: 대량의 리스트 렌더링 시 화면에 보이는 것만 처리.
+
+## 🚨 주의사항
+성급한 최적화(Premature Optimization)는 지양하며, 반드시 성능 측정을 선행해야 함.
+
+## 🔗 연결된 지식
+- [[WebWorker_Performance]]
+- [[System_Debugging_Protocol]]
@@ -0,0 +1,20 @@
+---
+title: 전략적 상태 관리 가이드 (Global & Server State)
+category: Software Architecture
+tags: [State Management, React Query, SSOT, Architecture]
+created: 2026-04-20
+---
+
+# 전략적 상태 관리 가이드
+
+## 🌐 상태의 분류
+1.  **UI State**: 로컬 상태 (useState).
+2.  **Global State**: 전역 상태 (Context API, Zustand/Redux).
+3.  **Server State**: 서버 데이터 (React Query, SWR).
+
+## 🎯 원칙
+상태는 가능한 낮게(Lift State Down), 필요할 때만 높게(Lift State Up) 유지하여 복잡도를 관리함.
+
+## 🔗 연결된 지식
+- [[React_Hooks_Deep_Dive]]
+- [[System_Protocol_Standard]]
@@ -0,0 +1,20 @@
+---
+title: 리액트 애플리케이션 테스트 전략
+category: Software Architecture
+tags: [Testing, Vitest, RTL, Unit Test, QA]
+created: 2026-04-20
+---
+
+# 리액트 애플리케이션 테스트 전략
+
+## 🧪 테스트 피라미드
+- **Unit Test**: 개별 유틸리티/함수 검증.
+- **Integration Test**: 컴포넌트 간 상호작용 및 UI 흐름 검증.
+
+## 🛠️ 도구
+- **Vitest**: 고성능 테스트 러너.
+- **React Testing Library**: 사용자 중심의 DOM 테스트 지향.
+
+## 🔗 연결된 지식
+- [[System_Debugging_Protocol]]
+- [[Reliability_Safety_First]]
@@ -0,0 +1,16 @@
+---
+title: 애플리케이션 안정성 및 로깅 (Error Boundary)
+category: Software Architecture
+tags: [Reliability, Error Boundary, Sentry, Logging, Stability]
+created: 2026-04-20
+---
+
+# 애플리케이션 안정성 및 로깅
+
+## 🚑 장애 대응
+- **Error Boundary**: 국소적 에러가 전체 앱을 무너뜨리지 않도록 보호.
+- **Logging (Sentry)**: 클라이언트 사이드 에러의 실시간 모니터링 및 추적.
+
+## 🔗 연결된 지식
+- [[System_Debugging_Protocol]]
+- [[React_Testing_Strategy]]
@@ -0,0 +1,19 @@
+---
+title: 스타일 거버넌스 및 디자인 시스템
+category: Software Architecture
+tags: [Styling, Tailwind, CSS-in-JS, Design System, Responsive]
+created: 2026-04-20
+---
+
+# 스타일 거버넌스 및 디자인 시스템
+
+## 🎨 스타일 전략
+- **Design Tokens**: 색상, 여백, 폰트를 변수화하여 유지보수성 확보.
+- **Tailwind CSS**: 유틸리티 우선 방식으로 개발 속도 극대화.
+
+## 📱 반응형 설계
+Mobile First 원칙을 준수하여 상향식 미디어 쿼리 적용.
+
+## 🔗 연결된 지식
+- [[Component_Design_Patterns]]
+- [[Accessibility_Inclusivity]]
@@ -0,0 +1,20 @@
+---
+title: 타입스크립트 기반의 안정적 개발 (Type Safety)
+category: Software Architecture
+tags: [TypeScript, Interface, Type Safety, Generic]
+created: 2026-04-20
+---
+
+# 타입스크립트 기반의 안정적 개발
+
+## 💎 핵심 장점
+- 컴파일 단계의 에러 포착으로 사후 버그 90% 이상 예방.
+- 코드 자체가 문서가 되는 자동 명세 효과.
+
+## 🛠️ 고급 문법
+- **Generic**: 재사용성 높은 타입 설계.
+- **Narrowing**: 런타임 타입 검사 및 좁히기를 통한 안전한 데이터 처리.
+
+## 🔗 연결된 지식
+- [[React_Clean_Code_Best_Practices]]
+- [[React_Hooks_Deep_Dive]]