프론트엔드 기초집

웹 개발 기초에서 배운 HTML, CSS, JavaScript, Git, HTTP를 실제 React 애플리케이션 구조로 연결하는 과정입니다. 24강 동안 하나의 game-release-dashboard 프로젝트를 계속 확장해 게임 출시 정보 검색, 플랫폼 필터, 랭킹, 상세 페이지, 오류 처리까지 갖춘 반응형 웹사이트를 완성합니다.

§과정 목표

• React 컴포넌트와 state를 이용해 데이터에 따라 바뀌는 UI를 설계합니다.
• TypeScript로 props, 이벤트, API 응답의 계약을 명확히 합니다.
• fetch 요청의 로딩·성공·빈 결과·오류·재시도를 구현합니다.
• CSS Modules와 반응형 CSS로 모바일에서도 읽기 좋은 화면을 만듭니다.
• React Router로 목록, 랭킹, 상세, 404 페이지를 연결합니다.
• lint와 프로덕션 build를 통과하는 결과물을 Git에 기록합니다.

§선수지식

• 시맨틱 HTML과 폼, 기본 접근성
• CSS 선택자, 박스 모델, Flexbox, Grid, media query
• JavaScript 함수, 배열, 객체, 모듈, DOM 이벤트
• Promise, async/await, JSON, HTTP 요청·응답의 기본 흐름
• Git add, commit, branch의 기본 사용법

React와 TypeScript는 처음이어도 괜찮습니다. 1강부터 필요한 개념을 작은 코드로 적용합니다.

§최종 결과물

완성할 Release Radar는 다음 기능을 갖습니다.

• JSON API 기반 게임 출시 정보 목록
• 제목 검색과 플랫폼 필터, 빈 결과 안내
• 점수 기준 랭킹과 게임 상세 URL
• 로딩·오류·재시도 및 잘못된 주소의 404 화면
• 키보드 탐색이 가능하고 모바일부터 데스크톱까지 대응하는 UI

§24강 학습 순서

1. 프론트엔드와 React의 역할
2. Node.js, npm, Vite 개발 환경
3. React 프로젝트 구조와 실행 흐름
4. JSX와 컴포넌트
5. Props로 데이터 전달하기
6. State와 화면 갱신
7. 이벤트 처리와 사용자 입력
8. 조건부 렌더링
9. 리스트 렌더링과 key
10. 폼과 Controlled Component
11. useEffect와 컴포넌트 생명주기
12. API 요청과 fetch
13. 로딩·성공·에러 상태 처리
14. TypeScript 기초와 타입 추론
15. Props, State, 이벤트 타입 지정
16. 인터페이스와 API 응답 타입
17. 컴포넌트 스타일링과 CSS 구조화
18. 반응형 UI 만들기
19. React Router로 페이지 전환
20. URL 파라미터와 404 페이지
21. 상태 끌어올리기와 컴포넌트 설계
22. 커스텀 Hook 만들기
23. 성능 기초: memo, useMemo, useCallback을 써야 하는 경우
24. 최종 프로젝트: 게임 출시 정보·랭킹 대시보드

표로 보는 전체 커리큘럼 · 1강 시작하기