Library Study - 프론트엔드 라이브러리 해부 Quest

React, Zustand, Jotai, Next.js의 핵심 원리를 직접 구현하며 정복하는 프로젝트

진행 방식

1. 일상 비유로 개념을 함께 이해한다
2. 퀘스트(과제)를 받고 직접 구현해본다
3. 리뷰 후 CLEAR 또는 RETRY 판정
4. 언어: TypeScript
5. 깊이: 핵심 원리 (미니 구현)
6. 순서: 하나씩 쌓아가며 진행 (React → Zustand → Jotai → Next.js)

---

Chapter 1: Mini-React - "화면을 그리는 마법사"

Stage	주제	핵심 키워드	상태
1-1	createElement & Virtual DOM	VDOM, JSX 변환	⬜
1-2	render — VDOM을 실제 DOM으로	DOM 조작, 재귀 렌더링	⬜
1-3	Diffing & Reconciliation	비교 알고리즘, 최소 업데이트	⬜
1-4	useState 구현	클로저, 상태 큐	⬜
1-5	useEffect 구현	의존성 비교, 사이드이펙트	⬜
1-6	이벤트 시스템	이벤트 위임, SyntheticEvent	⬜
BOSS	Mini-React로 Todo App	종합	🔒

---

Chapter 2: Mini-Zustand - "가장 심플한 상태 창고"

Stage	주제	핵심 키워드	상태
2-1	createStore 기본	클로저, getState/setState	⬜
2-2	subscribe 패턴	Observer, 리스너 관리	⬜
2-3	selector & 리렌더 최적화	얕은 비교, useSyncExternalStore	⬜
2-4	미들웨어 시스템	함수 합성, devtools/persist	⬜
BOSS	Mini-Zustand + Mini-React 연동	종합	🔒

---

Chapter 3: Mini-Jotai - "원자 단위 상태관리"

Stage	주제	핵심 키워드	상태
3-1	atom 만들기	Atom config, WeakMap Store	⬜
3-2	derived atom	의존성 그래프, 계산된 값	⬜
3-3	useAtom 구현	구독, 리렌더 트리거	⬜
3-4	Zustand vs Jotai 비교 구현	아키텍처 차이, 트레이드오프	⬜
BOSS	Mini-Jotai + Mini-React 연동	종합	🔒

---

Chapter 4: Mini-Next.js - "풀스택 프레임워크의 비밀"

Stage	주제	핵심 키워드	상태
4-1	파일 기반 라우팅	fs, 동적 라우트	⬜
4-2	SSR 구현	renderToString, hydration	⬜
4-3	SSG 구현	빌드 타임 렌더링, 정적 파일	⬜
4-4	API Routes	HTTP 서버, 라우트 매칭	⬜
BOSS	Mini-Next.js로 블로그 만들기	종합	🔒

---

전체 진행률

Ch.1 Mini-React [░░░░░░░░░░] 0/7 Ch.2 Mini-Zustand [░░░░░░░░░░] 0/5 🔒 Ch.3 Mini-Jotai [░░░░░░░░░░] 0/5 🔒 Ch.4 Mini-Next.js [░░░░░░░░░░] 0/5 🔒