수업 1폼 처리와 검증 (제어된 vs 비제어된, 라이브러리: Formik, React Hook Form, VeeValidate)견고한 폼 처리와 검증을 구현합니다. 제어된 입력과 비제어된 입력을 비교하고, Formik, React Hook Form, VeeValidate 같은 라이브러리를 사용하며, 복잡한 폼을 위한 검증, 오류 메시지, 제출 흐름을 설계합니다.
제어된 vs 비제어된 입력 전략Formik과 React Hook Form 실전 적용VeeValidate와 Vue 폼 패턴동기 및 비동기 검증 규칙오류 메시지, UX, 접근성수업 2UI 컴포넌트 라이브러리와 접근성 관행 (Tailwind, Material, Chakra, ARIA 역할, 키보드 탐색)강력한 접근성을 유지하면서 현대 UI 라이브러리를 사용하는 방법을 배웁니다. Tailwind, Material UI, Chakra를 탐구하고, ARIA 역할, 포커스 관리, 키보드 탐색 패턴을 적용하여 포괄적이고 프로덕션 준비가 된 인터페이스를 구축합니다.
Tailwind와 유틸리티 클래스로 디자인 시스템 구축Material UI와 Chakra 컴포넌트 패턴시맨틱 HTML과 ARIA 역할 전략포커스 관리와 키보드 탐색색상 대비, 테마, 감소된 모션수업 3프론트엔드 프레임워크 선택과 정당화 (React, Vue, Svelte) 및 생태계 트레이드오프프론트엔드 프레임워크 선택을 평가하고 정당화합니다. React, Vue, Svelte 아키텍처, 생태계 성숙도, 성능, 학습 곡선을 비교하여 각 프로젝트 상황에 최적의 옵션을 선택하고 방어할 수 있습니다.
React, Vue, Svelte 핵심 개념생태계 성숙도와 커뮤니티 지원성능과 번들 크기 트레이드오프TypeScript와 도구 통합실제 프로젝트를 위한 결정 프레임워크수업 4빌드, 번들링, 최적화: Webpack/Vite/Rollup, 코드 분할, 트리 쉐이킹, 에셋 처리성능이 뛰어난 프론트엔드를 위한 현대 빌드 도구를 마스터합니다. Webpack, Vite, Rollup을 비교하고, 코드 분할과 트리 쉐이킹을 구성하며, 에셋 처리, 캐싱, 소스 맵을 최적화하여 빠르고 유지보수 가능한 프로덕션 번들을 제공합니다.
Webpack, Vite, Rollup 설정 비교코드 분할과 동적 임포트트리 쉐이킹과 데드 코드 제거이미지, 폰트, 정적 에셋 최적화캐싱, 해시, 소스 맵 전략수업 5클라이언트 사이드 테스트: 컴포넌트 단위 테스트, 통합 테스트, 테스트 라이브러리 선택과 예제견고한 클라이언트 사이드 테스트 전략을 개발합니다. 컴포넌트 단위 테스트, 라우트와 API를 통한 통합 테스트를 배우고, Jest, Vitest, Cypress, Testing Library 중 선택하여 신뢰할 수 있고 유지보수 가능한 테스트 스위트를 생성합니다.
격리된 UI 컴포넌트 단위 테스트플로우와 라우팅을 위한 통합 테스트사용자 중심 테스트를 위한 Testing Library 사용Jest, Vitest, Cypress, Playwright 선택API 모킹과 플레이키 테스트 처리수업 6로컬 개발과 환경 구성: 환경 변수, .env 파일, 프론트엔드 기능 플래그로컬 및 클라우드 설정을 위한 신뢰할 수 있는 프론트엔드 환경을 구성합니다. 환경 변수, .env 파일, 빌드 타임 주입, 기능 플래그를 관리하여 개발, 스테이징, 프로덕션에서 기능을 안전하게 토글할 수 있습니다.
.env 파일과 빌드 타임 변수 관리개발, 스테이징, 프로덕션 구성 분리런타임 구성과 환경 안전성프론트엔드 기능 플래그 구현비밀 처리와 구성 함정수업 7싱글 페이지 앱을 위한 프로젝트 구조와 폴더 규칙 (컴포넌트, 페이지, 서비스, 훅)싱글 페이지 앱을 위한 확장 가능한 프로젝트 구조를 설계합니다. 컴포넌트, 페이지, 서비스, 훅을 위한 폴더 규칙을 배우고, 공유 유틸리티, 테스트, 스타일을 정리하여 대규모 코드베이스를 발견 가능하고 유지보수 가능하게 유지합니다.
컴포넌트, 페이지, 레이아웃 정리서비스, 훅, 데이터 액세스 레이어공유 유틸리티, 타입, 상수테스트와 스토리 파일 구조화모듈 경계로 리팩토링수업 8API 통합 패턴: REST vs GraphQL 클라이언트, 오류 처리, 요청 재시도, 타임아웃클라이언트에서 견고한 API 통합 패턴을 구현합니다. REST와 GraphQL 클라이언트를 비교하고, Axios 또는 Fetch를 구성하며, 오류와 재시도를 처리하고, 타임아웃, 취소, 정규화를 설계하여 탄력적인 데이터 페칭 레이어를 만듭니다.
Axios 또는 Fetch로 REST 클라이언트 구성Apollo 또는 URQL 같은 GraphQL 클라이언트 사용전역 오류 처리와 사용자 메시징요청 재시도, 백오프, 타임아웃취소, 중단 컨트롤러, 캐싱수업 9프론트엔드 인증: 토큰 저장, 갱신 흐름, 보안 쿠키 접근법안전한 프론트엔드 인증 패턴을 이해합니다. localStorage, sessionStorage, 쿠키를 비교하고, 갱신 토큰 흐름을 설계하며, HttpOnly 쿠키, CSRF 방어, 로그아웃 전략을 구현하여 실제 애플리케이션에서 사용자를 보호합니다.
토큰 저장: localStorage vs 쿠키갱신 토큰 흐름 안전 구현HttpOnly 쿠키와 CSRF 보호로그아웃, 취소, 로테이션 처리인증 오류 처리와 사용자 피드백수업 10상태 관리 옵션과 패턴 (로컬 컴포넌트 상태, Context, Redux/Pinia/MobX, React Query)복잡한 프론트엔드를 위한 상태 관리 옵션을 비교합니다. 로컬 상태, Context, Redux, Pinia, MobX, React Query를 탐구하고, 대규모 애플리케이션에서 캐싱, 정규화, 불필요한 리렌더링 방지를 위한 패턴을 배웁니다.
로컬 컴포넌트 상태와 리프팅 패턴횡단 관심사를 위한 Context APIRedux, Pinia, MobX 스토어 설계React Query 또는 SWR로 서버 상태성능 튜닝과 셀렉터 패턴수업 11라우팅과 보호된 라우트: 클라이언트 사이드 라우팅, 라우트 가드, 지연 로딩보호된 라우트가 포함된 신뢰할 수 있는 클라이언트 사이드 라우팅을 구축합니다. 라우트 구성, 중첩 라우트, 지연 로딩, 인증과 권한 부여를 강제하는 라우트 가드를 배우며, 탐색을 빠르고 접근 가능하게 유지합니다.
클라이언트 사이드 라우터와 라우트 구성중첩 라우트와 레이아웃 계층지연 로딩과 코드 분할 구현인증 기반 라우트 가드와 리다이렉트404 페이지와 폴백 라우트 처리
