Frontend Development

Frontend 개발

프론트엔드를 '기본 → 심화 → 실무' 학습 경로로 정리합니다. 브라우저 동작 원리와 타입 기반 언어로 토대를 세운 뒤, React와 성능을 깊게 다루고, 스타일링·렌더링 전략·접근성 같은 현장 주제로 이어집니다.

기본 · Foundations

프레임워크 이전에 알아야 할 브라우저 동작 원리와 타입 기반 언어

HTML 파싱과 DOM·CSSOM, 렌더 트리와 레이아웃·페인트, 임계 렌더링 경로, 리플로우·리페인트, 이벤트 루프, 가상 DOM까지 브라우저의 동작 토대를 세웁니다.

유틸리티 타입과 판별 유니온, 도메인 타입 모델링, infer, Zod 런타임 검증까지 타입 전략을 정리합니다.

프레임워크와 성능을 깊게 — 컴포넌트·상태·렌더링 비용을 다스리는 법

클라이언트·서버 상태 구분부터 Zustand·TanStack Query, 렌더링 최적화, 컴포넌트 설계까지 React 실무 패턴을 다룹니다.

Core Web Vitals 측정부터 불필요한 리렌더 줄이기, 번들·코드 스플리팅, 이미지·폰트, 네트워크·캐싱까지 성능 병목을 다스리는 법을 정리합니다.

현장에서 완성하는 단계 — 스타일링, 렌더링 전략 선택, 그리고 접근성

styled-components와 디자인 토큰, 다크 모드, CSS 아키텍처와 동적 스타일링 패턴을 다룹니다.

Astro·Next·Remix가 푸는 문제와 CSR/SSR/SSG/ISR, 아일랜드 아키텍처, 콘텐츠 중심 워크플로우, 프레임워크 선택 기준을 정리합니다.

시맨틱 HTML과 랜드마크, 키보드 접근성과 포커스 관리, 꼭 필요할 때만 쓰는 ARIA, 접근 가능한 폼까지 모두가 쓸 수 있는 UI를 만드는 법을 정리합니다.