React로 실제 인터페이스 구축하기
React는 현재 대부분의 프로덕션 UI가 구축되는 방식을 정의하는 JavaScript 라이브러리입니다. 단일 페이지 앱, Next.js 사이트부터 크로스 플랫폼 모바일 및 데스크톱 애플리케이션까지 확장됩니다. 이 과정은 완전한 분야를 다룹니다: 컴포넌트 아키텍처, 상태 관리, 데이터 페칭, 성능, 테스트, 배포. React의 표면 API만이 아니라 실제 작동 방식 — reconciler, fiber 모델, hooks 의미론 — 에 기반합니다.
배울 내용
JSX, props, state, controlled components부터 시작한 후 useEffect, useRef, useReducer로 나아갑니다. 실무 과정은 React Router v6을 통한 라우팅, React Hook Form을 통한 폼 처리, React Query와 SWR을 통한 서버 상태, Redux Toolkit, Zustand, Jotai를 통한 전역 상태를 다룹니다. React에서 TypeScript로 작업하고, 통합 및 E2E 테스트를 작성하며, Storybook으로 디자인 시스템을 구축하고, WebSockets를 통한 실시간 UI를 처리하고, tRPC를 통해 type-safe API를 배포합니다. 경로에는 Next.js App Router, server components, server actions, NextAuth.js를 통한 인증도 포함됩니다.
학습 경로
95개의 과정이 A1부터 C1까지 진행됩니다. A1과 A2 과정은 React 기초, JSX 렌더링, CSS 애니메이션, 로컬 스토리지 지속성, 다크 모드를 확립합니다. B1 과정은 context 패턴, i18n, React Spring, Framer Motion, dnd-kit을 통한 드래그 앤 드롭, TanStack Table을 통한 복잡한 데이터 테이블로 자신감을 키웁니다. B2 과정은 렌더링과 메모이제이션, Suspense, 코드 분할, React 개발자를 위한 React Native, Vercel과 AWS로의 배포, 데스크톱 앱용 Electron을 다룹니다. C1 레벨은 고급 주제로 마무리합니다: Micro-Frontend Architecture, SSR and Hydration Deep Dive, Module Federation, Islands Architecture with Astro, WebAssembly 통합, Cloudflare Workers를 통한 Edge Rendering, 프론트엔드 관찰성을 위한 OpenTelemetry.
작동 방식
각 과정은 실시간 피드백이 있는 내장 코드 에디터에서 완료하는 짧고 집중적인 강의로 나뉩니다. 개념이나 실패한 테스트에 막혔을 때는 언제든지 AI 튜터를 이용할 수 있습니다. 순차적으로 과정을 진행하거나 현재 경험에 맞는 레벨로 건너뛸 수 있습니다.