웹 프론트엔드를 배워요
교과목 3 (웹 프론트엔드 과정) ― 총 8 일, 하루 9 시간 (09:00 – 18:00 / 점심 12:00 – 13:00)
학습 목표
- 최신 JavaScript(ES6 +) 문법과 모듈 시스템을 익혀 브라우저·Node 환경 모두에서 활용한다.
- React + Hooks 기반 싱글페이지 애플리케이션(SPA)을 설계·구현한다.
- GitHub Flow(Branch → PR → Review → Merge)를 적용해 팀으로 협업한다.
- Notion·Velog를 활용해 개발 로그와 포트폴리오를 지속적으로 관리한다.
- REST API 연동, 상태 관리, 테스트, CI/CD·배포까지 전체 프론트엔드 워크플로를 경험한다.
- Demo Day에서 실제로 동작하는 웹앱 + 프로젝트 스토리를 발표한다.
| Day | 오전 세션 (09:00-12:00) | 오후 세션 (13:00-15:30) | 심화/실습 (15:30-18:00) | 일일 산출물‧점검 |
|---|---|---|---|---|
| 1. 개발 환경 & GitHub 세팅 | • 웹 기본 개념 • 프론트엔드 로드맵 • 개발 환경 설정 |
• Git & GitHub • Markdown |
• [실습] GitHub 협업 | ✔ GitHub repo/프로젝트 보드 개설 ✔ Notion 스페이스·Velog 블로그 개설 |
| 2. Modern JavaScript Fundamentals | • JS 소개 • 기본 문법, 변수, 자료형, 제어문, 함수 |
• 배열과 객체 • 클래스와 모듈 • 비동기 프로그래밍 |
• 브라우저/Node.js (DOM, Event) • [실습] 간단한 계산기 만들기 • [실습] Todo List • [실습] 성적 처리 프로그램 • [실습] 간단한 웹 서버 만들기 |
✔ Todo CLI 과제 PR ✔ PR Merge + 리뷰 1건 |
| 3. HTML, CSS, React 기초 | • HTML 기본 구조와 주요 태그 • CSS 기본 문법과 선택자 • 박스 모델과 Flexbox |
• React 소개 및 개발 환경 설정 • JSX, 컴포넌트, Props, useState Hook • React DevTools |
• [실습] 자기소개 페이지 HTML • [실습] 자기소개 페이지 CSS 스타일링 • [실습] Counter, Toggle, Input Form 컴포넌트 |
✔ HTML/CSS 포트폴리오 페이지 완성 ✔ React 기능별 커밋 3건 ✔ Velog 글: "웹 개발 첫걸음" |
| 4. 라우팅·컴포지션·스타일링 | • React Router v6 소개 • Route, Link, Outlet 사용하기 • 컴포넌트 설계 패턴 (Atomic Design) |
• React 스타일링 • CSS Module, Tailwind CSS, Styled-Components 특징 및 적용 방법 |
• [실습] React로 자기소개 페이지 만들기 • 원자-분자-유기체 단위 컴포넌트 설계 • 스타일링 방식 선택 및 적용 |
✔ 다중 페이지 SPA 완성 ✔ 컴포넌트 계층 구조 설계서 ✔ 선택한 스타일링 방식 적용 |
| 5. Hooks 심화 & API 연동 | • Custom Hooks, useEffect 심화 • useRef, useContext |
• API 연동과 REST API • API 모킹 (MSW) |
• [실습] useLocalStorage Hook• [실습] 테마 전환 기능 • [실습] useRef 타이머• [실습] MSW 블로그 |
✔ Custom Hook 1개 이상 구현 ✔ API 연동 기능 구현 |
| 6. 상태 관리·테스트 & 최적화 | • TanStack Query • 상태 관리 라이브러리 비교 • Zustand |
• 에러 처리 • 렌더링 이해 및 최적화 • 테스트 |
• Tailwind CSS • 폼 관리 • 웹 접근성 • [실습] TanStack Query 리팩토링 • [실습] Zustand 전역 상태 관리 • [실습] RHF 회원가입 폼 |
✔ 테스트 통과율 80 %↑ ✔ Lighthouse PWA Score 80↑ |
| 7. AI 기반 개발 & 배포 | • AI 코딩 어시스턴트 소개 • AI 활용 기획/코드 초안 작성 • AI 활용 코드 리뷰/테스트/디버깅 |
• GitHub Actions CI/CD • GitHub Pages 배포 • 환경변수 및 트러블슈팅 |
• [실습] AI와 함께하는 코딩 • [실습] CI/CD 자동화 |
✔ LIVE URL · 커밋 태그 v1.0 ✔ 블로그 글 초안 |
| 8. Demo Day & 회고 | • 개인 포트폴리오 기획 • 핵심 기능 개발 |
• API 연동 및 상태 관리 • 발표 자료 준비 |
• 최종 테스트 및 배포 • 데모 및 동료 리뷰 • 과정 전체 회고 |
✔ 발표 자료 & 수료증 ✔ 최종 포트폴리오 완성 |
| 항목 | 비율 | 평가지표 |
|---|---|---|
| 최종 웹앱 결과물 | 40 점 | 기능 완성도, UI/UX, 반응형, 성능 |
| 코드 품질 & GitHub 협업 | 20 점 | 커밋 메시지, PR 리뷰, Branch 전략 |
| 테스트·접근성·성능 지표 | 15 점 | 테스트 커버리지, Lighthouse·WCAG 준수 |
| 포트폴리오(Notion·Velog) | 15 점 | 과정 기록, 가독성, 시각적 구성 |
| 발표 & 커뮤니케이션 | 10 점 | 데모 안정성, 논리 전개, 질의응답 |
- Daily Stand-up (09:00) / Retrospective (17:45): GitHub Issue 상태 업데이트
- Mentor Clinic: 매일 14:30-15:30, 코드 리뷰 · 버그 헬프
- Checkpoint Quiz: Day 2·4·6 오전, Kahoot! 10문항
- Boilerplate & 리소스 킷: ESLint/Prettier 설정, Vite React TS 템플릿, Tailwind config, 테스트 스니펫
본 커리큘럼은 “설계-구현-검증-배포” 까지 프론트엔드 전 과정을 8일 안에 체험하도록 설계했습니다.