전체 커리큘럼

각 강의는 이전 결과물을 이어서 수정합니다. 강의를 건너뛰기보다 코드가 실행되는 상태로 커밋한 뒤 다음 단계로 이동하세요.

강	주제	핵심 목표	실습 결과물
1	프론트엔드와 React의 역할	UI·API 책임과 선언형 화면 이해	대시보드 컴포넌트 설계도
2	Node.js, npm, Vite 개발 환경	React TypeScript 개발 환경 준비	실행·빌드되는 Vite 프로젝트
3	React 프로젝트 구조와 실행 흐름	index.html부터 App까지 추적	정리된 시작 화면
4	JSX와 컴포넌트	화면을 책임별 함수로 분리	Header와 GameCard
5	Props로 데이터 전달하기	재사용 컴포넌트 계약 작성	서로 다른 게임 카드
6	State와 화면 갱신	사용자 행동을 UI 상태로 보존	관심 게임 토글
7	이벤트 처리와 사용자 입력	입력·클릭 이벤트 연결	검색 입력 UI
8	조건부 렌더링	상태별 화면 선택	검색 결과·빈 상태
9	리스트 렌더링과 key	배열을 안정적인 목록으로 변환	필터 가능한 카드 목록
10	폼과 Controlled Component	폼 값을 한 원본에서 관리	검색·플랫폼 제어 폼
11	useEffect와 생명주기	외부 시스템 동기화와 정리	문서 제목 동기화
12	API 요청과 fetch	HTTP 상태 확인과 JSON 처리	JSON 기반 게임 목록
13	요청 상태 처리	로딩·성공·빈 결과·오류 모델링	재시도 가능한 상태 UI
14	TypeScript 기초와 타입 추론	기본 타입과 유니온 활용	Game 도메인 타입
15	React 타입 지정	props·state·이벤트 계약 강화	타입 안전한 FilterBar
16	인터페이스와 API 응답 타입	외부 JSON 런타임 검증	검증된 API 계층
17	CSS 구조화	전역 규칙과 모듈 스타일 분리	충돌 없는 카드 스타일
18	반응형 UI	모바일 우선 유연한 레이아웃	반응형 필터·카드 그리드
19	React Router	URL과 페이지 컴포넌트 연결	출시 정보·랭킹 페이지
20	URL 파라미터와 404	동적 상세 주소와 실패 경로 처리	게임 상세·404 화면
21	상태 끌어올리기	공유 state의 소유권 설계	동기화된 필터·관심 목록
22	커스텀 Hook	요청 로직 재사용	useGames Hook
23	성능 기초	측정 후 필요한 메모이제이션 적용	최적화된 랭킹 목록
24	최종 프로젝트	기능·품질 검사를 하나로 통합	Release Radar 포트폴리오

§권장 학습 방법

1. 설명을 읽기 전에 “이번 강의에서 해결할 문제”를 자신의 말로 적습니다.
2. 코드 예시를 직접 입력하고 한 부분씩 바꾸어 결과를 확인합니다.
3. 직접 실습을 별도 커밋으로 남깁니다.
4. 이해 점검 질문에 코드 없이 답한 뒤 다음 강의로 이동합니다.