#리액트
85 편의 글
Context와 제네릭 컴포넌트
Context 타입 안전성 패턴(null + wrapper 훅), state·dispatch 분리, 제네릭 컴포넌트, 그리고 다형 컴포넌트의 as prop까지 한 번에 다룹니다.
E2E 테스팅 — Playwright
Playwright로 실제 브라우저에서 풀 시나리오 자동화. 셋업, locator 규칙, 인증 storageState, 페이지 객체 패턴, flaky 다루기, CI 통합과 시각 회귀까지.
fetch와 API 응답 타이핑
외부 데이터를 안전하게 다루는 흐름 — fetch는 unknown, zod 스키마로 검증과 타입을 동시에. 그리고 RSC 환경에서 fetch가 가지는 의미까지 짚어 4부로 이어집니다.
hooks 타이핑 — useState · useReducer · useRef
빌트인 hook들의 타입 추론과 명시 시점. useReducer의 discriminated union 액션, useRef의 두 갈래(DOM ref와 값 보관), 그리고 React 19 ref-as-prop까지 다룹니다.
Next.js 시작과 App Router
Next.js 15 프로젝트를 만들고 App Router의 파일 기반 라우팅과 layout 시스템을 손에 익힙니다. 파일 규약(page · layout · loading · error · not-found · route group)을 한 번에 다룹니다.
props와 children 타이핑
props 타입 정의 패턴, ReactNode와 ReactElement와 JSX.Element 차이, PropsWithChildren을 쓰는 경우, discriminated union까지 한 번에 다룹니다.
React 19 신규 기능 정리
Actions · useActionState · useFormStatus · useOptimistic · use() · React Compiler · ref as prop. 22~27장에 흩어져 등장한 React 19 신기능을 한곳에 묶어 정리합니다.
Server Actions와 폼
Server Actions로 API 라우트 없이 mutation을 처리하고, React 19의 `useActionState` · `useFormStatus` · `useOptimistic`으로 UX를 다듬는 패턴. 4부 마무리 미니 프로젝트 (방명록)까지.
Server Components vs Client Components
두 종류의 컴포넌트 차이, `use client` 디렉티브의 정확한 의미, 둘을 섞어 쓰는 패턴(서버가 클라이언트를 import / 클라이언트가 서버를 children으로 받기), 그리고 props 직렬화 제약까지.
Suspense와 use()로 로딩 처리
Suspense의 경계 모델로 streaming 렌더링을 만들고, `loading.tsx` · skeleton fallback · 리액트 19에서 안정화된 `use()` 훅까지 정리합니다.