[P-Reinforce] Final Wikification of all raw files (Error Handling, Next.js, Modern React, etc.)

2026-05-01 09:39:54 +09:00
parent e5c33f24f6
commit 14c29d1263
92 changed files with 292 additions and 5466 deletions
@@ -0,0 +1,42 @@
+---
+id: a1g2i3l4-e5t6-4e8a-m9c0-1o2l3l4a5b6c
+category: "[[10_Wiki/Topics/Development]]"
+confidence_score: 0.95
+tags: [agile, collaboration, team, project-management, small-teams, code-review]
+last_reinforced: 2026-05-01
+github_commit: "wikification-agile-collaboration"
+---
+
+# [[Agile Development & Team Collaboration]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> 애자일 소프트웨어 개발은 완벽한 계획보다 빠른 피드백과 점진적 개선을 중시하며, 팀 규모에 최적화된 협업 도구와 코드 리뷰 문화를 통해 지식의 파편화를 방지하고 제품의 품질을 상시 유지하는 것이다.
+
+## 📖 구조화된 지식 (Synthesized Content)
+
+### 1. 소규모 팀을 위한 애자일
+- **Lean 접근**: 불필요한 미팅과 문서를 최소화하고 실제 작동하는 코드와 기능을 우선한다.
+- **다기능 협업 (Cross-functional)**: 기획, 디자인, 개발 경계를 허물고 공동의 목표 달성에 집중한다.
+- **빠른 이터레이션**: 짧은 스프린트와 데일리 스크럼을 통해 병목 지점을 조기에 발견하고 해결한다.
+
+### 2. 효율적인 코드 리뷰 및 지식 공유
+- **코드 리뷰**: 단순히 오타를 찾는 과정이 아니라, 설계 의도를 공유하고 팀의 기술적 상향 평준화를 도모하는 시간이다.
+- **Context Sharing**: 작업 배경과 의사 결정 과정을 기록하여 부재 시에도 업무 연속성을 유지한다.
+
+### 3. 규모별 팀 역학 (Small vs Large)
+- **Small Teams**: 의사소통 속도가 빠르며 높은 자율성을 기반으로 유연하게 대처한다.
+- **Large Teams**: 역할 분담이 명확하며, 시스템적 거버넌스와 문서화된 표준이 협업의 핵심이 된다.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **Agile의 형식화**: 단순히 스크럼을 수행하는 것(Doing Agile)과 애자일 가치를 내재화하는 것(Being Agile)은 다르다. 형식에 치우친 애자일은 오히려 생산성을 저해한다.
+- **리뷰 지연**: 과도하게 꼼꼼한 코드 리뷰는 릴리즈 속도를 늦출 수 있다. 자동화된 툴(Lint, Test)로 걸러낼 부분과 인간이 판단할 부분을 명확히 구분해야 한다.
+
+## 🔗 지식 연결 (Graph)
+- **Parent**: [[10_Wiki/Topics/Development]]
+- **Related**: [[Engineering Principles (SOLID, DRY, KISS, YAGNI)]], [[Git Workflows]]
+- **Raw Source**: [[00_Raw/Agile Software Development in Small Teams]], [[00_Raw/Agile Environments]], [[00_Raw/Team Collaboration]], [[00_Raw/Code Review]], [[00_Raw/Small vs Large Frontend Teams]]
+
+## 💻 GitHub 동기화 자동화 워크플로우
+1. Stage: git add .
+2. Commit: `git commit -m "[P-Reinforce] Wikify Agile Development and Team Collaboration Standard"`
+3. Push: `git push origin main`
@@ -0,0 +1,41 @@
+---
+id: e1r2r3o4-h5a6-4n7d-l8i9-n0g1s2t3a4b5
+category: "[[10_Wiki/Topics/Development]]"
+confidence_score: 0.99
+tags: [react, error-handling, stability, error-boundary, monitoring, resilience]
+last_reinforced: 2026-05-01
+github_commit: "wikification-error-handling"
+---
+
+# [[Frontend Error Handling & Application Stability]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> 프론트엔드 안정성은 모든 에러를 막는 것이 아니라, 발생한 에러가 전체 앱의 화이트 스크린으로 번지지 않도록 구획을 나누고(Error Boundary), 실시간 모니터링을 통해 빠르게 인지하고 복구하는 회복 탄력성(Resilience)에 있다.
+
+## 📖 구조화된 지식 (Synthesized Content)
+
+### 1. 계층적 에러 처리 전략
+- **Error Boundaries**: React 컴포넌트 트리 상위에서 하위 컴포넌트의 런타임 에러를 캡처하여 사용자에게 대체 UI를 보여준다. 핵심 비즈니스 영역별로 안전장치를 배치한다.
+- **Global Error Handling**: `window.onerror`, `unhandledrejection` 이벤트를 구독하여 예기치 못한 비동기 에러를 전역에서 캡처하고 서버로 전송한다.
+- **Local Error Handling**: `try-catch` 블록과 API 요청 계층의 인터셉터를 활용하여 사용자에게 즉각적인 피드백을 제공한다.
+
+### 2. 애플리케이션 안정성 확보
+- **Fallback UI**: 에러 발생 시 단순히 앱을 중단시키는 대신, 새로고침 버튼이나 고객센터 연결 등 다음 행동을 유도하는 UI를 제공한다.
+- **Graceful Degradation**: 일부 기능(예: 추천 목록)이 실패하더라도 핵심 기능(예: 결제)은 유지될 수 있도록 모듈 간 결합도를 낮춘다.
+
+### 3. 모니터링 및 분석
+- **Sentry 통합**: 에러 발생 시점의 사용자 세션, 기기 정보, 스택 트레이스를 수집하여 재현 및 수정을 용이하게 한다.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과도한 에러 무시**: 모든 에러를 묵묵히 처리하면 실제 심각한 논리 오류를 놓칠 수 있다. 로그 수집과 경고 알림(Alerting) 체계가 병행되어야 한다.
+- **에러 바운더리의 한계**: 이벤트 핸들러나 비동기 코드 내부의 에러는 Error Boundary가 직접 캡처하지 못하므로 별도의 처리가 필요하다.
+
+## 🔗 지식 연결 (Graph)
+- **Parent**: [[10_Wiki/Topics/Development]]
+- **Related**: [[Frontend Governance & Observability]], [[Sentry and LogRocket Integration]]
+- **Raw Source**: [[00_Raw/Error Handling]], [[00_Raw/Frontend Application Stability]], [[00_Raw/React 애플리케이션 예\354\231\270 \353\260\217 \354\227\220\353\237\254 \354\262\230\353\246\254]]
+
+## 💻 GitHub 동기화 자동화 워크플로우
+1. Stage: git add .
+2. Commit: `git commit -m "[P-Reinforce] Wikify Frontend Error Handling and Application Stability Standard"`
+3. Push: `git push origin main`
@@ -0,0 +1,42 @@
+---
+id: g1o2v3e4-r5n6-4a7b-8c9d-0e1f2a3b4c5d
+category: "[[10_Wiki/Topics/Development]]"
+confidence_score: 0.99
+tags: [governance, observability, monitoring, sentry, ci-cd, logging, rum, frontend-ops]
+last_reinforced: 2026-05-01
+github_commit: "wikification-governance-obs"
+---
+
+# [[Frontend Governance & Observability]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> 프론트엔드 운영의 핵심은 '보이지 않는 에러'를 가시화하는 것이며, 엄격한 CI/CD 거버넌스와 실시간 모니터링(Sentry, RUM)을 통해 사용자 경험의 신뢰성을 정량적으로 관리하는 것이다.
+
+## 📖 구조화된 지식 (Synthesized Content)
+
+### 1. 프론트엔드 거버넌스 (Governance)
+- **자동화된 규칙 강제**: ESLint, Prettier, Husky를 통해 커밋 전 코드 품질과 아키텍처 경계 위반을 자동으로 검사한다.
+- **표준화된 워크플로우**: Conventional Commits와 엄격한 PR 템플릿을 사용하여 변경 이력을 투명하게 관리한다.
+
+### 2. 가시성 및 모니터링 (Observability)
+- **에러 트래킹 (Sentry)**: 런타임 에러의 스택 트레이스와 사용자 세션 문맥을 캡처하여 디버깅 속도를 극대화한다.
+- **세션 리플레이 (LogRocket)**: 실제 사용자의 화면 조작 과정을 시각적으로 재현하여 재현하기 어려운 버그를 식별한다.
+- **RUM (Real User Monitoring)**: 실제 사용자의 환경(기기, 네트워크 등)에서 측정된 Core Web Vitals 지표를 수집하여 최적화 우선순위를 정한다.
+
+### 3. CI/CD 파이프라인 통합
+- **안전한 배포**: 단위 테스트, 통합 테스트, 시각적 회귀 테스트를 파이프라인에 통합하여 배포 리스크를 최소화한다.
+- **Cloud Logging**: 클라이언트 측 로그를 중앙 집중화하여 프로덕션 환경의 이상 징후를 조기에 감지한다.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **로깅 오버헤드**: 과도한 로깅은 네트워크 대역폭을 점유하고 사용자 비용(데이터)을 발생시킨다. 샘플링 전략이 필요하다.
+- **프라이버시**: 모니터링 시 민감 정보(PII)가 포함되지 않도록 마스킹 처리가 필수적이다.
+
+## 🔗 지식 연결 (Graph)
+- **Parent**: [[10_Wiki/Topics/Development]]
+- **Related**: [[Engineering Principles (SOLID, DRY, KISS, YAGNI)]], [[Performance & Memory Management]]
+- **Raw Source**: [[00_Raw/Frontend Engineering Governance]], [[00_Raw/Automated Governance]], [[00_Raw/CI-CD Pipeline Integration]], [[00_Raw/Observability]], [[00_Raw/Production Monitoring and Observability]], [[00_Raw/Sentry and LogRocket Integration]], [[00_Raw/프론트엔드 클라우드 로깅 도구 도입 및 프로덕션 모니터링]]
+
+## 💻 GitHub 동기화 자동화 워크플로우
+1. Stage: git add .
+2. Commit: `git commit -m "[P-Reinforce] Wikify Frontend Governance and Observability Standard"`
+3. Push: `git push origin main`
@@ -0,0 +1,41 @@
+---
+id: n1e2x3t4-j5s6-4a7b-8c9d-0e1f2a3b4c5d
+category: "[[10_Wiki/Topics/Development]]"
+confidence_score: 0.98
+tags: [nextjs, app-router, server-components, react, functional-programming, modern-web]
+last_reinforced: 2026-05-01
+github_commit: "wikification-nextjs-modern-react"
+---
+
+# [[Next.js & Modern React Design Patterns]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> 현대 React 개발은 Next.js의 App Router와 Server Components를 통해 클라이언트-서버 경계를 재정의하며, 선언적 UI와 함수형 프로그래밍 패러다임을 결합하여 성능과 개발 생산성을 동시에 극대화하고 있다.
+
+## 📖 구조화된 지식 (Synthesized Content)
+
+### 1. Next.js App Router 및 RSC
+- **React Server Components (RSC)**: 서버에서 데이터를 직접 페칭하고 렌더링하여 클라이언트로 전송함으로써 자바스크립트 번들 크기를 줄이고 초기 로딩 속도를 향상시킨다.
+- **App Router**: 파일 시스템 기반 라우팅을 넘어 레이아웃, 에러 핸들링, 로딩 상태를 선언적으로 관리하는 아키텍처를 제공한다.
+
+### 2. 현대적 React 패턴
+- **함수형 컴포넌트 우선**: 모든 컴포넌트와 비즈니스 로직을 함수형으로 작성하며, 고차 컴포넌트(HOC) 대신 커스텀 훅과 합성을 사용하여 코드 재사용성을 높인다.
+- **Props Drilling 방지**: 컴포넌트 합성(Composition)과 Context API, 또는 상태 관리 라이브러리를 통해 데이터 흐름을 최적화한다.
+- **Rules of React**: 훅의 호출 순서 준수 등 React의 기본 원칙을 엄격히 지켜 예측 가능한 상태 전이를 보장한다.
+
+### 3. 비동기 데이터 관리
+- **Server Actions**: 별도의 API 엔드포인트 없이 서버 측 함수를 직접 호출하여 데이터 변조(Mutation) 및 폼 처리를 수행한다.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **클라이언트 vs 서버 경계**: 모든 것을 서버 컴포넌트로 만들 수는 없다. 상호작용(Event, State)이 필요한 부분은 'use client' 지시어를 사용하여 명확히 분리해야 한다.
+- **추상화 오버헤드**: 함수형 패턴과 합성은 강력하지만, 과도하게 복잡한 합성은 컴포넌트 구조를 파악하기 어렵게 만든다.
+
+## 🔗 지식 연결 (Graph)
+- **Parent**: [[10_Wiki/Topics/Development]]
+- **Related**: [[Modern React & Frontend Engineering Standard (2025)]], [[Scalable Frontend Architecture]]
+- **Raw Source**: [[00_Raw/Next.js App Router]], [[00_Raw/Next.js 및 Server Components 적용 프로젝트]], [[00_Raw/Functional Components]], [[00_Raw/Functional Programming in React]]
+
+## 💻 GitHub 동기화 자동화 워크플로우
+1. Stage: git add .
+2. Commit: `git commit -m "[P-Reinforce] Wikify Next.js and Modern React Design Patterns"`
+3. Push: `git push origin main`
@@ -0,0 +1,42 @@
+---
+id: p5e4r3f2-a1b2-4c3d-8e9f-0a1b2c3d4e5f
+category: "[[10_Wiki/Topics/Development]]"
+confidence_score: 0.99
+tags: [performance, memory-leak, debugging, optimization, react, devtools, core-web-vitals]
+last_reinforced: 2026-05-01
+github_commit: "wikification-performance-memory"
+---
+
+# [[Frontend Performance & Memory Management]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> 프론트엔드 성능 최적화는 단순히 렌더링을 줄이는 것이 아니라, 사용자 체감 성능(LCP, CLS, FID)을 개선하고 크롬 개발자 도구 및 프로파일러를 통해 메모리 누수와 메인 스레드 점유율을 정밀하게 타격하는 엔지니어링이다.
+
+## 📖 구조화된 지식 (Synthesized Content)
+
+### 1. 런타임 성능 및 리렌더링 최적화
+- **메모이제이션**: `React.memo`, `useMemo`, `useCallback`을 적재적소에 배치하여 불필요한 가상 DOM 연산을 방지한다.
+- **Concurrent Mode**: React 18의 `useTransition`, `useDeferredValue`를 활용하여 우선순위가 낮은 업데이트를 뒤로 미룸으로써 UI 반응성을 유지한다.
+- **Code Splitting**: `React.lazy`와 동적 임포트를 통해 초기 번들 크기를 줄이고 필요한 시점에 코드를 로드한다.
+
+### 2. 메모리 관리 및 누수 탐지
+- **메모리 누수 유형**: 전역 변수 남용, 해제되지 않은 타이머/이벤트 리스너, 클로저에 의한 참조 유지, **Detached DOM Nodes** 등이 주요 원인이다.
+- **Heap Snapshot**: 크롬 개발자 도구의 Memory 탭을 통해 힙 스냅샷을 비교하고, 객체가 의도치 않게 메모리에 남아 있는지 확인한다.
+
+### 3. 디버깅 및 분석 도구
+- **React DevTools Profiler**: 컴포넌트별 렌더링 시간과 원인을 파악하여 병목 지점을 찾는다.
+- **Lighthouse & Core Web Vitals**: LCP(최대 콘텐츠 페인트), CLS(누적 레이아웃 이동), INP(다음 상호작용에 대한 응답) 지표를 측정하고 최적화한다.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **무분별한 메모이제이션**: 모든 곳에 `useMemo`를 쓰는 것은 오히려 메모리 점유율을 높이고 얕은 비교 비용을 발생시킨다. 측정(Profiling) 후 적용하는 것이 원칙이다.
+- **가비지 컬렉션의 한계**: JS는 자동 GC를 지원하지만, 개발자가 참조 고리(Reference chain)를 끊어주지 않으면 GC는 이를 회수할 수 없다.
+
+## 🔗 지식 연결 (Graph)
+- **Parent**: [[10_Wiki/Topics/Development]]
+- **Related**: [[Vite Build System]], [[Zustand]], [[React Compiler]]
+- **Raw Source**: [[00_Raw/웹 성능 최적화(Core Web Vitals) 개선 작업]], [[00_Raw/Vite + React 성능 최적화]], [[00_Raw/Frontend Performance Debugging]], [[00_Raw/JavaScript Memory Management]], [[00_Raw/Memory Leak Detection]], [[00_Raw/Detached DOM Nodes]]
+
+## 💻 GitHub 동기화 자동화 워크플로우
+1. Stage: git add .
+2. Commit: `git commit -m "[P-Reinforce] Wikify Frontend Performance and Memory Management Guide"`
+3. Push: `git push origin main`
@@ -0,0 +1,42 @@
+---
+id: s1c2a3l4-e5f6-4a7b-8c9d-0e1f2a3b4c5d
+category: "[[10_Wiki/Topics/Development]]"
+confidence_score: 0.99
+tags: [react, architecture, scalability, large-scale, fsd, folder-structure]
+last_reinforced: 2026-05-01
+github_commit: "wikification-scalable-architecture"
+---
+
+# [[Scalable Frontend Architecture & System Design]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> 대규모 프론트엔드 시스템의 확장은 단순히 코드 양을 늘리는 것이 아니라, Feature-Sliced Design(FSD)과 같은 계층적 관심사 분리를 통해 모듈 간 결합도를 제어하고 단방향 의존성을 강제함으로써 예측 가능한 유지보수성을 확보하는 것이다.
+
+## 📖 구조화된 지식 (Synthesized Content)
+
+### 1. 계층적 관심사 분리 (FSD 도입)
+- **Layered Architecture**: `app` (설정), `pages` (라우트), `widgets` (조합), `features` (비즈니스 가치), `entities` (데이터 모델), `shared` (공통 유틸)로 계층을 나눈다.
+- **단방향 의존성**: 상위 계층은 하위 계층만 참조할 수 있도록 제한하여 순환 참조를 차단한다.
+- **Public API**: 각 슬라이스는 `index.ts`를 통해서만 내부 로직을 노출하여 캡슐화를 실현한다.
+
+### 2. 폴더 구조 및 모듈화
+- **기능 중심 분리 (Feature-based)**: 기술적 유형(components, hooks)이 아닌 도메인과 기능 단위로 폴더를 구성하여 응집도를 높인다.
+- **마이크로 프론트엔드 대비**: 시스템이 극도로 비대해질 경우 모노레포(Nx, Turborepo)를 활용하여 모듈별 독립 배포 및 빌드를 준비한다.
+
+### 3. 기술 부채 및 확장성 관리
+- **추상화 게이트**: 성급한 공통화(Over-generalization)를 경계하고, 도메인 로직이 유출되지 않도록 경계를 엄격히 관리한다.
+- **거버넌스 자동화**: ESLint 규칙(예: `eslint-plugin-import`)을 통해 계층 위반을 빌드 타임에 감지한다.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **오버엔지니어링**: 소규모 프로젝트에서는 FSD가 불필요한 보일러플레이트와 인지 부하를 발생시킨다. 프로젝트 성숙도에 따른 단계적 도입이 필요하다.
+- **Shared 계층의 비대화**: 모든 것을 `shared`에 넣으려는 유혹을 뿌리쳐야 한다. 최대한 하위 엔티티나 기능으로 분산시켜야 한다.
+
+## 🔗 지식 연결 (Graph)
+- **Parent**: [[10_Wiki/Topics/Development]]
+- **Related**: [[Legacy React Migration & Refactoring Standard]], [[Feature-Sliced Design]]
+- **Raw Source**: [[00_Raw/Scalable React Apps]], [[00_Raw/Frontend Scalable Architecture]], [[00_Raw/Large-scale React Applications]], [[00_Raw/대규모 React 애플리케이션 아키텍처 구성]], [[00_Raw/확장 가능한 React 아키텍처 및 폴\353\215\224 \352\265\254\354\241\260 \354\204\244\352\263\204]]
+
+## 💻 GitHub 동기화 자동화 워크플로우
+1. Stage: git add .
+2. Commit: `git commit -m "[P-Reinforce] Wikify Scalable Frontend Architecture and System Design"`
+3. Push: `git push origin main`
@@ -0,0 +1,42 @@
+---
+id: m1a2n3a4-g5e6-4a7b-8c9d-0e1f2a3b4c5d
+category: "[[10_Wiki/Topics/Development]]"
+confidence_score: 0.99
+tags: [react, state-management, zustand, redux, context-api, concurrent-mode, suspense, server-state]
+last_reinforced: 2026-05-01
+github_commit: "wikification-state-concurrent"
+---
+
+# [[Modern State Management & Concurrent React]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> 현대 React 상태 관리는 목적에 따른 파편화(전역/서버/URL)가 핵심이며, Concurrent Features와 Suspense를 통해 비동기 데이터 흐름을 선언적으로 제어하여 사용자 경험의 끊김을 최소화하는 방향으로 진화했다.
+
+## 📖 구조화된 지식 (Synthesized Content)
+
+### 1. 상태 관리의 전문화
+- **서버 상태 (Server State)**: TanStack Query를 통해 캐싱, 동기화, 낙관적 업데이트를 관리하며 보일러플레이트를 획기적으로 줄인다.
+- **애플리케이션 전역 상태**: Zustand를 활용하여 가벼우면서도 세밀한 리렌더링 제어를 수행한다. Redux는 복잡도가 매우 높은 대규모 데이터 흐름에 한해 채택한다.
+- **Context API**: 주로 정적인 설정값이나 테마 전달에 사용하며, 잦은 업데이트가 발생하는 상태에는 성능 이슈로 인해 지양한다.
+
+### 2. Concurrent React 및 선언적 UI
+- **Suspense**: 컴포넌트가 렌더링 준비가 될 때까지 기다리는 동안 대체 UI(Skeleton 등)를 보여주는 선언적 비동기 처리 방식이다.
+- **Concurrent Rendering**: 우선순위 기반 렌더링(Interruptible Rendering)을 통해 메인 스레드 차단을 방지하고 입력 반응성을 보장한다.
+- **Transitions**: `startTransition`을 사용하여 상태 업데이트의 우선순위를 낮춤으로써 긴급한 UI 상호작용(타이핑 등)을 보호한다.
+
+### 3. 마이그레이션 전략
+- **Context to Zustand**: 불필요한 전체 리렌더링을 방지하기 위해 Context에서 Zustand의 Selector 기반 시스템으로 점진적으로 전환한다.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과도한 상태 분리**: 상태를 너무 잘게 쪼개면 데이터 일관성 유지가 어려워질 수 있다. 도메인 단위의 적절한 응집도가 필요하다.
+- **Suspense Waterfall**: 중첩된 Suspense는 네트워크 워터폴 현상을 유발할 수 있으므로, 데이터 페칭을 상위로 끌어올리거나(Fetch-then-render) 병렬로 처리해야 한다.
+
+## 🔗 지식 연결 (Graph)
+- **Parent**: [[10_Wiki/Topics/Development]]
+- **Related**: [[TanStack Query]], [[Zustand]], [[Performance & Memory Management]]
+- **Raw Source**: [[00_Raw/State Management Libraries]], [[00_Raw/Context API to Zustand Migration]], [[00_Raw/Concurrent Rendering in React 18+]], [[00_Raw/React Suspense]], [[00_Raw/Server State]]
+
+## 💻 GitHub 동기화 자동화 워크플로우
+1. Stage: git add .
+2. Commit: `git commit -m "[P-Reinforce] Wikify Modern State Management and Concurrent React Features"`
+3. Push: `git push origin main`