React 19 Quest

Tracks

1. 01🧱스택을 한숨에

   0/7 lessons

   Vite, React 19, TypeScript, Tailwind v4 — 0부터 연결

   대부분의 React 튜토리얼은 마법 같은 create-something 스크립트 던져주고 그게 기초래. 우린 부품을 직접 본다. 이 트랙 끝나면 Vite + React 19 + strict TS + Tailwind v4 프로젝트 띄우고, SPA 처럼 라우팅 걸고, 건드린 config 파일 하나하나 설명할 수 있어.

   Lesson list (7)

   • 01
     15분 만의 모던 JS~15 min · javascript, es2020, refresher, prerequisite
   • 02
     왜 Vite 인가 (그리고 Vite 가 아닌 것)~14 min · vite, build-tool, esm, dev-server
   • 03
     한숨에 부트스트랩~18 min · vite, react-19, typescript, tailwind-v4, bootstrap
   • 04
     tsconfig Strict — 모든 플래그 설명~16 min · typescript, tsconfig, strict, react
   • 05
     Tailwind v4 — CSS-First 셋업~15 min · tailwind, v4, theme, css-variables
   • 06
     React Router 로 SPA 라우팅~18 min · react-router, routing, spa, history-api
   • 07
     성장에서 살아남는 프로젝트 구조~14 min · architecture, file-structure, organization

   ✓퀴즈 · 4 문제→

2. 02🧩Components & Types

   0/7 lessons

   타입 잡힌 building block, composition, 그리고 React 19 가 은퇴시킨 패턴들

   컴포넌트는 함수야. 타입 잡힌 props 가 그 함수를 컴파일러가 강제하는 계약으로 만든다. 계약 짜고, 아직 밥값 하는 composition 패턴 배우고, 조용히 죽은 것들 — HOC, render props, 오래된 코드베이스에선 보이지만 새로 짜면 안 되는 것들 — 도 이름 붙여 보낼게.

   Lesson list (7)

   • 01
     컴포넌트는 함수, JSX 는 sugar~14 min · components, jsx, fundamentals
   • 02
     타입 잡힌 props — 컴파일러가 강제하는 계약~16 min · typescript, props, generics
   • 03
     상속 대신 composition — React 의 방식~14 min · composition, children, slot-props
   • 04
     React 19 의 ref — 이제 그냥 prop~13 min · react-19, ref, forwardref
   • 05
     Discriminated Union — Prop 이 상호 배타일 때~14 min · typescript, discriminated-union, narrowing
   • 06
     조용히 죽은 패턴 — HOC, render prop, class~12 min · history, anti-patterns, hooks
   • 07
     RSC 경계 — 이 퀘스트가 punt 하는 이유~11 min · rsc, server-components, next-js, boundary

   ✓퀴즈 · 4 문제→

3. 03🪝2026년의 Hooks

   0/7 lessons

   밥값 하는 hook 전부, 그리고 React 19 가 드디어 풀어준 규칙

   Hook 은 함수 컴포넌트가 state 잡고, effect 돌리고, 로직 공유하는 방식. 주제에 블로그 만 편 나온 뒤 실전 core 는 작아: useState, useEffect, useRef, 커스텀 hook, useContext, useReducer, 그리고 Rules of Hooks. 거기에 신참 하나 — use() — 가 드디어 그 규칙을 풀어줬어.

   Lesson list (7)

   • 01
     useState — 대부분의 시간에 유일하게 필요한 state hook~14 min · usestate, state, fundamentals
   • 02
     useEffect — 실제로 필요할 때 (와 아닐 때)~18 min · useeffect, synchronization, side-effects
   • 03
     useRef — DOM ref, mutable storage, callback ref~14 min · useref, ref, mutable, imperative
   • 04
     커스텀 hook — stateful 로직 공유~15 min · custom-hooks, abstraction, reuse
   • 05
     useContext — 트리 전반에 state 공유~14 min · usecontext, context, providers
   • 06
     useReducer — state 에 동사가 붙을 때~12 min · usereducer, reducer, state-machine
   • 07
     Rules of Hooks — 그리고 use() 가 드디어 풀어준 것~13 min · rules-of-hooks, use, react-19

   ✓퀴즈 · 4 문제→

4. 04🎨Styling — Tailwind v4 Deep

   0/7 lessons

   Theme 토큰, dark mode, @layer, cn() — install 레슨이 스킵한 패턴들

   Track 1 lesson 5 가 Tailwind v4 연결. 이 트랙은 그걸 가지고 뭘 하는지. 진짜 theme 토큰, reload 살아남는 dark mode, CSS 정리용 @layer, className 전쟁 끝내는 cn() 헬퍼, 애니메이션 primitive, v4 디자인 우회하는 anti-pattern.

   Lesson list (7)

   • 01
     Theme 토큰 — semantic vs literal~13 min · tailwind, theme, design-tokens
   • 02
     Reload 살아남는 dark mode~13 min · dark-mode, system-preference, tailwind
   • 03
     @layer — specificity 전쟁 없는 CSS 정리~12 min · css, layer, cascade, tailwind
   • 04
     tailwind-merge + clsx — cn() 헬퍼~11 min · tailwind-merge, clsx, cn, className
   • 05
     Tailwind anti-pattern — 조용히 깨지는 것들~11 min · anti-patterns, tailwind, scanning
   • 06
     애니메이션 primitive — transition, keyframe, Tailwind 유틸리티~12 min · animation, transition, keyframes, tailwind
   • 07
     Typography & Spacing — 작은 디자인 시스템 짓기~12 min · typography, spacing, design-system

   ✓퀴즈 · 4 문제→

5. 05🌀Async & Suspense

   0/7 lessons

   Promise, Suspense 경계, use(), 그리고 cwkPippa 스트리밍 채팅 케이스 스터디

   React 19 의 데이터 페칭 스토리가 드디어 깨끗하게 느껴짐. Suspense + use() + error boundary 가 fetch 당 별도 state 셋 없이 loading/error/success 처리하는 trio. 캐논 케이스 스터디로 끝: cwkPippa 의 스트리밍 채팅 — trio + 작은 커스텀 hook 이 진짜 프로덕션 데이터 흐름 커버.

   Lesson list (7)

   • 01
     React 의 Promise — fetch, state, 에러~14 min · promises, fetch, async
   • 02
     Suspense — 로딩 state 가 사는 자리~13 min · suspense, boundary, fallback
   • 03
     Error boundary — 여전히 쓰는 유일한 클래스~11 min · error-boundary, errors, fallback
   • 04
     use() hook — 인라인 async 읽기~13 min · use, react-19, suspense
   • 05
     fetch + AbortController — 비행 중 취소~11 min · fetch, abortcontroller, cancellation
   • 06
     TanStack Query — 짧은 터치포인트~11 min · tanstack-query, state-management, ecosystem
   • 07
     Case Study — cwkPippa 의 스트리밍 채팅~20 min · case-study, cwkpippa, streaming, sse, real-world

   ✓퀴즈 · 4 문제→

6. 06⚡Actions 스토리

   0/6 lessons

   useActionState, useFormStatus, useOptimistic — corpus 가 열어둔 React 19 trio

   Actions 는 React 19 의 'form 과 mutation 어떻게 동작?' 에 대한 풀 답 — 그리고 이 퀘스트가 채우려고 빌드된 audit-gap. Hook 셋, form-action 모델 하나, 유효성에 Zod. 끝나면 React 19 SPA 의 모든 save / submit / mutation 흐름에 캐논 패턴 가짐.

   Lesson list (6)

   • 01
     <form action={fn}> — React 19 의 form 모델~13 min · form-action, react-19, forms
   • 02
     useActionState — pending/error/result 공짜~14 min · useactionstate, react-19, actions
   • 03
     useFormStatus — prop-drilling 없는 pending~11 min · useformstatus, react-19, actions
   • 04
     useOptimistic — 거짓 없는 즉시 UI~14 min · useoptimistic, react-19, actions
   • 05
     Action 합성 — 체인, 래퍼, hook~11 min · actions, composition, patterns
   • 06
     Zod — Action 안 타입 안전 유효성~12 min · zod, validation, schemas

   ✓퀴즈 · 4 문제→

7. 07🎼Concurrent React

   0/6 lessons

   useTransition, useDeferredValue, React Compiler, 그리고 memo 가 여전히 밥값 하는 자리

   Concurrent React 가 Suspense 와 Actions 를 janky 대신 smooth 하게 느껴지게 하는 엔진. Transition 이 React 한테 '이 업데이트는 비긴급'. DeferredValue 가 'stale 버전으로 렌더, 그 다음 catch up'. Compiler 가 손으로 짰을 모든 memo 화. 합쳐서: 낭비 작업 적음, 수동 hook 적음, 더 smooth 한 UX.

   Lesson list (6)

   • 01
     useTransition — 비긴급 state 업데이트~12 min · usetransition, concurrent, priority
   • 02
     useDeferredValue — 무거운 렌더 lag~11 min · usedeferredvalue, concurrent, rendering
   • 03
     스케줄링 직관 — 우선순위, 배칭, yielding~10 min · scheduling, concurrent, internals
   • 04
     React Compiler — 자동 memoization~13 min · react-compiler, memoization, build
   • 05
     수동 memo 가 여전히 밥값 할 때~10 min · usememo, react.memo, edge-cases
   • 06
     Concurrent React 프로파일링~11 min · profiling, devtools, performance

   ✓퀴즈 · 4 문제→

8. 08🚀출하해

   0/7 lessons

   vite build, code splitting, env 모드, 배포, 다음 스택 고르기

   Dev server 가 좋게 느껴짐. 이제 번들 출하. 이 트랙이 vite build 가 실제 뭘 하는지, 초기 로드 작게 유지하려고 코드 분할하는 법, 시크릿 안 새는 env 모드 연결, 진짜 원할 Vite 플러그인, 배포 타겟 (Vercel, Cloudflare Pages, Tauri), Lighthouse / 접근성 바닥, 그리고 마무리 전략 레슨: 이 스택 (Vite SPA) 고를 때 vs 메타-프레임워크 손이 갈 때 — cwkPippa 와 cwk-site 를 나란히 케이스 스터디로 사용.

   Lesson list (7)

   • 01
     vite build — 출력 검사~11 min · vite-build, rollup, bundling
   • 02
     Code Splitting — lazy 라우트, lazy 컴포넌트~11 min · code-splitting, lazy, performance
   • 03
     Env Modes — 시크릿 안 새는 .env 파일~10 min · env, vite, modes, secrets
   • 04
     Vite 플러그인 — 기본~10 min · vite-plugins, ecosystem
   • 05
     배포 타겟 — Vercel, CF Pages, Tauri~11 min · deploy, vercel, cloudflare-pages, tauri
   • 06
     Lighthouse + 접근성 바닥~12 min · lighthouse, accessibility, a11y, performance
   • 07
     Capstone — cwkPippa vs cwk-site: 어느 스택이 언제?~22 min · case-study, cwkpippa, cwk-site, strategic

   ✓퀴즈 · 4 문제→