프론트엔드의 기초

웹은 결국 세 종류 파일 (HTML / CSS / JS) 로 시작합니다. 이 셋을 단단히 잡고 위에 React 19 → Next.js 16 → Tailwind 4 를 한 칸씩 얹어요.

이 강좌가 끝나면 가능한 것:

• 정적 HTML 페이지를 의미 있게 작성한다
• CSS 박스 모델·Flexbox·Grid 로 어떤 레이아웃이든 짠다
• JavaScript 의 변수·함수·이벤트 세 가지로 페이지를 움직인다
• React 19 의 사고방식으로 컴포넌트를 짠다
• Next.js App Router 로 라우트와 데이터 흐름을 이해한다
• Tailwind 토큰으로 디자인을 일관되게 유지한다
• 폼 검증·로딩 UX 까지 마무리한다
• 이미지를 안전하게 업로드·검증·변환·저장한다
• TypeScript 의 strict·타입 좁히기·제네릭·유틸리티 타입을 다룬다

단계 흐름

[1] 인터넷 ──▶ [2] HTML ──▶ [3] CSS ──▶ [4] JavaScript ──▶ [5] React 19
                                                                │
                                                                ▼
[10] TypeScript ◀── [9] 이미지 ◀── [8] 폼·UX ◀── [7] Tailwind ◀── [6] Next.js

14 는 브라우저 표준 기본기. 57 은 모던 프레임워크 (React → Next → Tailwind). 8~10 은 제품 수준의 마감 (폼 · 미디어 · 타입).

전제 — getting-started 강좌 1~5 단계 (Node + pnpm + VS Code 설치).