React 19 Quest

Tracks

1. 01🧱클라이언트 스택 첫 조립

   0/7 lessons

   Vite, React 19, TypeScript, Tailwind v4를 처음부터 연결하기

   React를 시작한다고 마법 같은 create-something 스크립트부터 외울 필요 없어. 이 트랙에서는 Vite, React 19, strict TypeScript, Tailwind v4를 부품별로 조립해. 끝나면 SPA 라우팅까지 붙이고, 건드린 설정 파일이 왜 필요한지 직접 설명할 수 있어.

   Lesson list (7)

   • 01
     15분 만의 모던 JS~15 min · javascript, es2020, refresher, prerequisite
   • 02
     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🧩컴포넌트와 타입

   0/7 lessons

   타입이 있는 구성 요소, composition, React 19에서 물러난 패턴

   컴포넌트는 함수고, 타입이 붙은 props는 그 함수의 계약이야. 이 트랙에서는 계약을 설계하고 composition으로 UI를 조립해. HOC와 render props처럼 옛 코드에서는 만나지만 새 코드에서는 피할 패턴도 분명히 구분할 거야.

   Lesson list (7)

   • 01
     컴포넌트는 함수, JSX는 문법 설탕~14 min · components, jsx, fundamentals
   • 02
     타입이 있는 props와 컴포넌트 계약~16 min · typescript, props, generics
   • 03
     상속 대신 조합하는 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 props, 클래스~12 min · history, anti-patterns, hooks
   • 07
     RSC 경계 — 이 퀘스트에서 다루지 않는 이유~11 min · rsc, server-components, next-js, boundary

   ✓퀴즈 · 4 문제→

3. 03🪝2026년의 훅

   0/7 lessons

   실전 훅과 React 19의 use()가 완화한 규칙

   훅은 함수 컴포넌트가 상태를 관리하고, 이펙트를 실행하고, 로직을 공유하는 도구야. 핵심은 생각보다 작아: useState, useEffect, useRef, 커스텀 훅, useContext, useReducer, 그리고 Rules of Hooks. React 19의 use()가 어디서 규칙의 예외가 되는지도 짚어.

   Lesson list (7)

   • 01
     useState — 보통은 이것으로 충분한 상태 훅~14 min · usestate, state, fundamentals
   • 02
     useEffect가 필요한 때와 필요하지 않은 때~18 min · useeffect, synchronization, side-effects
   • 03
     useRef의 세 가지 쓰임~14 min · useref, ref, mutable, imperative
   • 04
     커스텀 훅으로 동작을 재사용하기~15 min · custom-hooks, abstraction, reuse
   • 05
     useContext로 트리 아래에 값 공유하기~14 min · usecontext, context, providers
   • 06
     useReducer로 상태 전환에 이름 붙이기~12 min · usereducer, reducer, state-machine
   • 07
     Rules of Hooks — 그리고 use()가 드디어 풀어준 것~13 min · rules-of-hooks, use, react-19

   ✓퀴즈 · 4 문제→

4. 04🎨Tailwind v4 스타일링

   0/7 lessons

   테마 토큰, 다크 모드, @layer, cn()의 실전 패턴

   Track 1에서 Tailwind v4를 연결했으니 이제 제대로 써 볼 차례야. 실제 테마 토큰, 새로고침 뒤에도 유지되는 다크 모드, cascade를 정리하는 @layer, className 충돌을 막는 cn(), 애니메이션 기본기와 피해야 할 패턴까지 다뤄.

   Lesson list (7)

   • 01
     테마 토큰 — 역할과 실제 값~13 min · tailwind, theme, design-tokens
   • 02
     새로고침 뒤에도 유지되는 다크 모드~13 min · dark-mode, system-preference, tailwind
   • 03
     CSS cascade layer로 우선순위 정하기~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
     CSS 애니메이션의 기본과 선택 기준~12 min · animation, transition, keyframes, tailwind
   • 07
     글꼴과 간격으로 작은 디자인 시스템 만들기~12 min · typography, spacing, design-system

   ✓퀴즈 · 4 문제→

5. 05🌀비동기와 Suspense

   0/7 lessons

   프로미스, Suspense 경계, use(), cwkPippa 스트리밍 채팅

   React 19에서는 데이터 불러오기 흐름을 훨씬 선언적으로 짤 수 있어. Suspense, use(), 오류 경계를 조합하면 컴포넌트마다 로딩·오류·성공 상태를 따로 들고 다니지 않아도 돼. 마지막에는 cwkPippa의 스트리밍 채팅을 실제 사례로 조립해 볼 거야.

   Lesson list (7)

   • 01
     React의 프로미스 — fetch, 상태, 에러~14 min · promises, fetch, async
   • 02
     Suspense — 로딩 상태가 사는 자리~13 min · suspense, boundary, fallback
   • 03
     오류 경계 — 여전히 쓰는 유일한 클래스~11 min · error-boundary, errors, fallback
   • 04
     use() 훅 — 인라인 비동기 읽기~13 min · use, react-19, suspense
   • 05
     fetch 취소와 오래된 응답 막기~11 min · fetch, abortcontroller, cancellation
   • 06
     공유 캐시가 필요할 때 TanStack Query 쓰기~11 min · tanstack-query, state-management, ecosystem
   • 07
     cwkPippa 스트리밍 채팅 사례~20 min · case-study, cwkpippa, streaming, sse, real-world

   ✓퀴즈 · 4 문제→

6. 06⚡React 19 Actions

   0/6 lessons

   useActionState, useFormStatus, useOptimistic의 제출 흐름

   React 19 Actions는 form 제출과 mutation 흐름을 하나의 모델로 묶어. useActionState, useFormStatus, useOptimistic를 익히고 Zod 검증까지 연결해. 끝나면 SPA의 저장·제출·변경 작업을 어떤 구조로 짜야 하는지 기준이 생길 거야.

   Lesson list (6)

   • 01
     React 19의 폼 액션 모델~13 min · form-action, react-19, forms
   • 02
     useActionState — 대기·오류·결과를 한곳에서~14 min · useactionstate, react-19, actions
   • 03
     useFormStatus — prop-drilling 없는 대기~11 min · useformstatus, react-19, actions
   • 04
     useOptimistic로 즉시 반응하는 UI 만들기~14 min · useoptimistic, react-19, actions
   • 05
     Action을 감싸고 이어 붙이는 방법~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와 남은 수동 최적화

   Concurrent React는 무거운 업데이트가 입력과 클릭을 가로막지 않게 해. Transition과 DeferredValue로 우선순위를 표현하고, React Compiler가 메모이제이션을 어디까지 맡는지도 살펴봐. 목표는 수동 최적화를 늘리는 게 아니라 필요한 작업만 부드럽게 처리하는 거야.

   Lesson list (6)

   • 01
     useTransition — 비긴급 상태 업데이트~12 min · usetransition, concurrent, priority
   • 02
     useDeferredValue — 무거운 결과를 뒤따라오게 하기~11 min · usedeferredvalue, concurrent, rendering
   • 03
     스케줄링 직관 — 우선순위, 배칭, yielding~10 min · scheduling, concurrent, internals
   • 04
     React Compiler의 자동 메모이제이션~13 min · react-compiler, memoization, build
   • 05
     수동 메모이제이션이 필요한 자리~10 min · usememo, react.memo, edge-cases
   • 06
     Concurrent React 프로파일링~11 min · profiling, devtools, performance

   ✓퀴즈 · 4 문제→

8. 08🚀배포하기

   0/7 lessons

   Vite 빌드, 코드 분할, 환경 모드, 배포 대상과 다음 스택

   개발 서버가 잘 도는 것과 제품을 출하하는 건 다른 일이야. 이 트랙에서는 Vite 빌드 결과, 코드 분할, 환경 변수, 플러그인, 배포 대상, Lighthouse와 접근성까지 확인해. 마지막에는 cwkPippa와 cwk-site를 나란히 놓고 Vite SPA와 메타 프레임워크의 경계를 정리할 거야.

   Lesson list (7)

   • 01
     vite build — 출력 검사~11 min · vite-build, rollup, bundling
   • 02
     Code Splitting — lazy 라우트, lazy 컴포넌트~11 min · code-splitting, lazy, performance
   • 03
     비밀을 노출하지 않는 Vite 환경 변수~10 min · env, vite, modes, secrets
   • 04
     필요에 맞는 Vite 플러그인 고르기~10 min · vite-plugins, ecosystem
   • 05
     배포 대상 — Vercel, Cloudflare Pages, Tauri~11 min · deploy, vercel, cloudflare-pages, tauri
   • 06
     Lighthouse + 접근성 바닥~12 min · lighthouse, accessibility, a11y, performance
   • 07
     마지막 선택 — cwkPippa와 cwk-site, 언제 어떤 스택을 쓸까?~22 min · case-study, cwkpippa, cwk-site, strategic

   ✓퀴즈 · 4 문제→