프론트엔드 학습 로드맵

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

전체 학습 순서

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

01. 웹과 브라우저

인터넷의 동작: IP, 도메인 이름, 호스팅과 DNS
URL, HTTP 요청과 응답, HTTPS
HTML, CSS, JavaScript가 전달되는 흐름
DOM, CSSOM과 브라우저 렌더링의 기본 과정
개발자 도구의 Elements, Console, Network 탭
Git으로 변경 사항 기록하고 원격 저장소에 올리기

02. HTML과 문서 구조

제목, 문단, 목록, 링크와 이미지
header, nav, main, section 등 의미에 맞는 요소 선택
button과 a의 역할 구분
form, label, input과 기본 입력 검증
input type에 따른 모바일 키보드와 자동 완성 속성
table의 구조: thead, tbody, th와 scope
dialog, details 등 동작이 내장된 요소
이미지 대체 텍스트와 문서 메타데이터

03. CSS와 반응형 레이아웃

선택자, 상속, 명시도와 캐스케이드
캐스케이드 레이어와 :has() 등 관계 선택자
박스 모델, display, position과 쌓임 맥락
Flexbox와 Grid
상대 단위, 미디어 쿼리와 유연한 레이아웃
컨테이너 쿼리와 논리 속성
글꼴 지정, 웹폰트 로딩과 줄 간격·자간
사용자 정의 속성, 상태 스타일과 간단한 전환 효과
prefers-color-scheme과 다크 모드 대응
직접 작성하는 CSS와 유틸리티 기반 프레임워크(Tailwind)의 차이

04. JavaScript 기초

값과 타입, 변수, 조건문, 반복문, 함수
형변환, truthy와 falsy, ==와 ===의 차이
배열과 객체, 데이터 변환과 불변성의 기본 개념
스프레드와 나머지 매개변수, 옵셔널 체이닝과 널 병합
Map과 Set
스코프, 클로저와 this
모듈의 import와 export
오류 처리와 디버거 사용

05. DOM과 이벤트

요소 선택, 생성, 수정과 삭제
이벤트 전파와 이벤트 위임
폼 제출과 기본 동작 제어
커스텀 이벤트로 동작 알리기
AbortController로 리스너 한 번에 해제하기
데이터 상태를 기준으로 화면 갱신하기
textContent와 innerHTML의 차이

06. 비동기 처리와 데이터

Promise와 async/await
Promise.all, race와 allSettled로 여러 작업 조합하기
fetch, JSON과 HTTP 오류 처리
로딩, 빈 결과, 성공과 실패 상태
요청 취소와 응답 순서로 인한 화면 오류
디바운스, 스로틀과 실패 시 재시도
localStorage의 활용과 한계

07. 웹 보안

동일 출처 정책과 CORS
XSS: 저장형, 반사형과 DOM 기반
innerHTML, 속성과 URL에서 입력이 코드로 해석되는 지점
콘텐츠 보안 정책(CSP)
CSRF와 SameSite·토큰 대응
쿠키 보안 속성: HttpOnly, Secure, SameSite
토큰을 저장하는 위치에 따른 노출 위험
클릭재킹과 프레임 차단
OWASP Top 10으로 자주 나오는 취약점 점검하기
의존성 취약점 점검과 갱신

08. 접근성과 사용성

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

09. 브라우저 심화와 성능

호출 스택, 이벤트 루프, 태스크와 마이크로태스크
레이아웃, 페인트와 화면 갱신 비용
Core Web Vitals: LCP, INP와 CLS
이미지 크기·형식과 지연 로딩
Cache-Control과 리소스 로딩 전략
스트리밍 응답으로 첫 화면 앞당기기
번들 크기와 코드 분할
Lighthouse와 개발자 도구로 긴 작업과 불필요한 레이아웃 측정
리스너·타이머 정리와 메모리 누수의 기본 개념

10. 개발 도구와 TypeScript

패키지 매니저(npm, pnpm, yarn, Bun)와 락 파일의 역할
개발 빌드와 프로덕션 빌드의 차이
번들러(Vite, Rollup, esbuild)의 모듈 그래프와 트리 셰이킹
소스맵으로 빌드된 코드 디버깅하기
포매터·린터(Prettier, ESLint, Biome)와 실행 스크립트
파일과 모듈의 책임 분리
TypeScript 기본 타입, 유니온, 타입 좁히기와 제네릭
컴파일 시 타입 검사와 런타임 데이터 검증의 차이

11. 테스트와 배포

데이터 처리 함수의 단위 테스트(Vitest, Jest)
입력·추가·수정·삭제 등 사용자 흐름 테스트(Playwright, Cypress)
테스트 더블: 모의 객체와 가짜 서버 응답
키보드 조작과 모바일 화면 확인
CI에서 검사 자동화하기
정적 파일 배포와 경로 설정(GitHub Pages, Vercel, Netlify, Cloudflare)
배포 전 자동 검사와 배포 후 오류 확인

기본기를 익힌 다음

기본기 위에 올리는 단계입니다. 한 번에 다루기보다 필요해지는 시점에 주제를 골라 확장합니다.

프레임워크

하나를 골라 깊게 익히기: React, Vue, Angular, Svelte, Solid
컴포넌트 분리, 상태 관리와 렌더링 주기
클라이언트 라우팅과 데이터 패칭
디자인 시스템: 토큰, 공용 컴포넌트와 문서화

렌더링 전략과 인증

CSR, SSR, SSG의 차이와 선택 기준
메타 프레임워크: Next.js, Nuxt, SvelteKit, Astro
하이드레이션 비용과 부분 렌더링
인증 전략: 세션과 토큰, 소셜 로그인 연동과 보호된 라우트

AI를 활용한 개발

LLM의 동작 방식과 기존 코딩 방식과의 차이
AI 보조 코딩 도구: Claude Code, Cursor, Copilot
의도와 제약을 분명히 전달하는 프롬프트 작성
코드 리뷰, 리팩터링, 문서 생성에 활용하기
에이전트, MCP와 스킬로 작업 환경 확장하기
LLM API로 제품에 기능 붙이기: Anthropic, OpenAI, Gemini
생성된 코드를 그대로 믿지 않고 검증하는 습관

데이터와 웹 API

GraphQL과 클라이언트: Apollo, Relay
파일 처리, 드래그 앤 드롭, Intersection Observer
복잡한 처리: Web Worker와 메인 스레드 작업 분리
국제화: 언어별 문구, 날짜·숫자 형식과 시간대

플랫폼 확장

오프라인 경험: PWA, Service Worker와 캐시 갱신 전략
웹 컴포넌트: HTML Template, Custom Elements와 Shadow DOM
데스크톱 앱: Electron, Tauri
모바일 앱: React Native, Flutter, Ionic

다음 단계로 넘어가기 전에, 왜 그렇게 동작하는지 설명할 수 있는지 확인해 보세요.