Fix: Restore unified Topics folder and reorganize specialized category folders

2026-05-02 23:25:02 +09:00
parent b71a0b82d3
commit fdfbc83535
6241 changed files with 147626 additions and 194 deletions
@@ -0,0 +1,41 @@
+---
+id: n1e2x3t4-j5s6-4a7b-8c9d-0e1f2a3b4c5d
+category: Dev
+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|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`