프론트엔드 학습 로드맵

문서의 구조를 만들고, 화면을 구성하고, 사용자 입력에 반응하기까지. 웹 표준과 브라우저의 동작을 바탕으로 프론트엔드의 기본기를 순서대로 익힙니다.

학습 목표

할 일 관리 웹 앱을 HTML, CSS, JavaScript로 만듭니다. 정적인 화면에서 시작해 입력과 필터링, 데이터 저장, API 연동을 더하고, 다양한 사용자가 이용할 수 있는 화면으로 완성해 보세요.

전체 학습 순서

단계	주제	목표
01	웹과 브라우저	페이지가 전달되고 화면에 표시되는 과정 이해하기
02	HTML과 문서 구조	의미 있는 마크업과 입력 폼 작성하기
03	CSS와 반응형 레이아웃	다양한 화면 크기에 대응하는 UI 만들기
04	JavaScript 기초	데이터와 로직을 다루는 언어 기본기 익히기
05	DOM과 이벤트	사용자 입력에 반응하고 화면 갱신하기
06	비동기 처리와 데이터	API를 연결하고 로딩·실패 상태 처리하기
07	접근성과 사용성	키보드와 보조 기술로도 이용 가능한 화면 만들기
08	브라우저 심화와 성능	실행·렌더링 흐름을 이해하고 병목 개선하기
09	개발 도구와 TypeScript	코드를 검사하고 유지보수하기 쉬운 구조 만들기
10	테스트와 배포	주요 사용자 흐름을 검증하고 웹에 공개하기

01. 웹과 브라우저

• URL, DNS, HTTP 요청과 응답, HTTPS
• HTML, CSS, JavaScript가 전달되는 흐름
• DOM, CSSOM과 브라우저 렌더링의 기본 과정
• 개발자 도구의 Elements, Console, Network 탭
• Git으로 변경 사항 기록하기

완료 기준: 페이지를 열었을 때 필요한 파일이 어떻게 로드되는지 설명하고, 개발자 도구에서 요청과 오류를 확인할 수 있습니다.

02. HTML과 문서 구조

• 제목, 문단, 목록, 링크와 이미지
• header, nav, main, section 등 의미에 맞는 요소 선택
• button과 a의 역할 구분
• form, label, input과 기본 입력 검증
• 이미지 대체 텍스트와 문서 메타데이터

완료 기준: 제목 구조가 명확한 할 일 목록과 입력 폼을 작성하고, 각 입력 요소에 레이블을 연결할 수 있습니다.

03. CSS와 반응형 레이아웃

• 선택자, 상속, 명시도와 캐스케이드
• 박스 모델, display, position과 쌓임 맥락
• Flexbox와 Grid
• 상대 단위, 미디어 쿼리와 유연한 레이아웃
• 사용자 정의 속성, 상태 스타일과 간단한 전환 효과

완료 기준: 모바일과 데스크톱에서 가로 넘침 없이 동작하는 화면을 만들고, 포커스와 비활성 상태를 구분할 수 있습니다.

04. JavaScript 기초

• 값과 타입, 변수, 조건문, 반복문, 함수
• 배열과 객체, 데이터 변환과 불변성의 기본 개념
• 스코프, 클로저와 this
• 모듈의 import와 export
• 오류 처리와 디버거 사용

완료 기준: 할 일의 추가·수정·삭제·필터링 로직을 화면 코드와 분리해 함수로 작성할 수 있습니다.

05. DOM과 이벤트

• 요소 선택, 생성, 수정과 삭제
• 이벤트 전파와 이벤트 위임
• 폼 제출과 기본 동작 제어
• 데이터 상태를 기준으로 화면 갱신하기
• 사용자 입력을 안전하게 텍스트로 표시하기

완료 기준: 입력 폼으로 할 일을 추가하고, 완료 상태 변경·삭제·필터링 결과가 화면에 반영되도록 구현할 수 있습니다.

06. 비동기 처리와 데이터

• Promise와 async/await
• fetch, JSON과 HTTP 오류 처리
• 로딩, 빈 결과, 성공과 실패 상태
• 요청 취소와 응답 순서로 인한 화면 오류
• localStorage의 활용과 한계
• 동일 출처 정책, CORS와 쿠키의 기본 개념

완료 기준: API에서 목록을 불러오고, 네트워크 실패 시 안내와 재시도 수단을 제공할 수 있습니다. 서버가 없다면 로컬 저장부터 구현합니다.

07. 접근성과 사용성

• 시맨틱 HTML과 접근 가능한 이름
• 키보드 탐색, 포커스 순서와 포커스 복원
• 색상 대비와 색상에만 의존하지 않는 상태 표시
• 폼 오류 안내와 동적 변경 알림
• 화면 확대와 동작 줄이기 설정 대응
• 기본 HTML로 표현하기 어려운 경우의 ARIA 사용

완료 기준: 마우스 없이 핵심 기능을 사용할 수 있고, 스크린 리더로 입력 레이블과 처리 결과를 확인할 수 있습니다.

08. 브라우저 심화와 성능

• 호출 스택, 이벤트 루프, 태스크와 마이크로태스크
• 레이아웃, 페인트, 합성과 화면 갱신 비용
• 이미지 크기·형식과 지연 로딩
• 캐시와 리소스 로딩 전략
• 개발자 도구로 긴 작업과 불필요한 레이아웃 측정
• 리스너·타이머 정리와 메모리 누수의 기본 개념

완료 기준: 느린 화면의 원인을 측정하고, 개선 전후의 로딩 또는 상호작용 성능을 비교할 수 있습니다.

09. 개발 도구와 TypeScript

• 패키지 관리와 개발·프로덕션 빌드 구분
• 코드 포맷, 정적 분석과 실행 스크립트
• 파일과 모듈의 책임 분리
• TypeScript 기본 타입, 유니온, 타입 좁히기와 제네릭
• 컴파일 시 타입 검사와 런타임 데이터 검증의 차이

완료 기준: 데이터 모델과 함수의 입출력에 타입을 정의하고, 빌드와 코드 검사 명령을 실행할 수 있습니다.

10. 테스트와 배포

• 데이터 처리 함수의 단위 테스트
• 입력·추가·수정·삭제 등 사용자 흐름 테스트
• 키보드 조작과 모바일 화면 확인
• 정적 파일 배포, 경로 설정과 HTTPS
• 배포 전 자동 검사와 배포 후 오류 확인
• 실행 방법과 기능을 설명하는 README 작성

완료 기준: 주요 기능의 성공·실패 흐름을 검증하고, 배포된 주소에서 새로고침과 모바일 접근까지 확인할 수 있습니다.

기본기를 익힌 다음

프로젝트에 필요한 주제를 골라 확장합니다.

• 웹 API: 파일 처리, 드래그 앤 드롭, Intersection Observer
• 오프라인 경험: Service Worker와 캐시 갱신 전략
• 복잡한 처리: Web Worker와 메인 스레드 작업 분리
• 국제화: 언어별 문구, 날짜·숫자 형식과 시간대
• 웹 컴포넌트: Custom Elements와 Shadow DOM

각 단계에서 동작하는 결과물을 남기고, 왜 그렇게 동작하는지 설명할 수 있는지 확인해 보세요.