Frontend Mastery

React 19 / Next.js 16 심화 학습 프로젝트

🚀 6개월 성장 로드맵의 1단계: React 19 Core Deep Dive

⚛️ React 19 기능

use() Hook, Actions, Server Components 심화 학습

use() Hook 예제 (완료)
Actions 예제 (완료)
Server Components 예제 (완료)
시작하기 →

🧵 Fiber & 렌더링 파이프라인

React의 핵심 엔진 Fiber 구조와 렌더링 과정 시각화

Fiber 트리 구조 시각화 (완료)
렌더링 파이프라인 (완료)
Work Loop 동작 (완료)
시작하기 →

🚀 Next.js App Router

App Router의 핵심 기능과 패턴 마스터하기

Server/Client Components (완료)
Streaming & Suspense (완료)
Data Fetching & Server Actions (완료)
시작하기 →

📚 Storybook 가이드

컴포넌트 문서화의 모든 것: CSF 3.0, Controls, MDX, Auto-Docs

기초 & CSF 3.0 (완료)
Controls & MDX (완료)
Addons & Design Tokens (완료)
가이드 보기 →

🎨 Storybook 데모

Button, Input, Card 컴포넌트 라이브 데모

인터랙티브 Button 데모 (완료)
Form Input 검증 예제 (완료)
Card 레이아웃 예제 (완료)
데모 보기 →

🔄 상태 관리 비교

Zustand, Recoil, Jotai 라이브러리 실전 비교

Zustand Todo 예제 (완료)
Recoil Atom/Selector (완료)
Jotai 원시 Atom (완료)
상세 코드 비교 (완료)
비교하기 →

🔄 React Query + Suspense

선언적 데이터 페칭과 캐싱 전략

useSuspenseQuery 사용법 (완료)
병렬 데이터 로딩 (완료)
중첩 Suspense 패턴 (완료)
캐싱 전략 가이드 (완료)
시작하기 →

🔮 GraphQL + Codegen

타입 안전한 GraphQL과 지능형 캐싱

Schema & Codegen 설정 (완료)
Apollo Client 캐싱 (완료)
정규화 & 최적화 (완료)
캐싱 전략 시뮬레이터 (완료)
시작하기 →

📊 성능 분석

Lighthouse, Web Vitals, Bundle Analyzer

Web Vitals 모니터링 (완료)
Lighthouse 점수 (완료)
Bundle Size 분석 (완료)
최적화 체크리스트 (완료)
시작하기 →

🤖 AI 통합

LLM Playground (13~16주차)

• OpenAI API 연동
• Prompt 최적화
• Stream UI 구현
Coming Soon...

🤖 AI 융합

LLM Playground (13~16주차)

• OpenAI API 연동
• Prompt 최적화
• Stream UI 구현
Coming Soon...

📈 현재 진행 상황

React 19 Features (3개 예제)
100%
Fiber 구조 & 렌더링 (3개 예제)
100%
Next.js App Router (6개 예제)
100%
Storybook 가이드 (6개 예제)
100%
상태 관리 라이브러리 비교 (4개 예제)
100%
React Query + Suspense 통합 (1개 예제)
100%
GraphQL + Codegen + 캐싱 (1개 예제)
100%
성능 분석 & 최적화 (1개 예제)
100%

💡 각 예제는 실제 코드와 함께 상세한 설명을 제공합니다.