HTML/CSS/JS 부터 React, Next, Tailwind 까지
프론트엔드의 시작부터 상태·오프라인 데이터 경계까지를 한 흐름으로 잇는 12단계 강좌.
- 난이도
- 입문
- 강의
- 12
웹은 결국 세 종류 파일 (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·타입 좁히기·제네릭·유틸리티 타입을 다룬다
- 사용자가 떠났다가 돌아오는 콘텐츠 연속성 UX를 설계한다
- 서버 상태·UI 상태·IndexedDB 오프라인 데이터를 수명에 따라 분리한다
단계 흐름
웹 화면을 제품으로 확장하는 순서
인터넷 요청 위에 HTML·CSS·JavaScript가 어떻게 화면을 만드는지 익힙니다.
React와 Next.js로 상태와 서버·클라이언트 경계를 구성합니다.
스타일, 폼, 이미지, 접근성을 함께 다듬어 실제 입력 실패에 대응합니다.
TypeScript와 로컬 데이터 수명 계약으로 이어보기와 복구를 구현합니다.
14 는 브라우저 표준 기본기. 57 은 모던 프레임워크 (React → Next → Tailwind). 8~12 는 제품 수준의 마감 (폼·미디어·타입·사용자 연속성·데이터 수명).
전제 — getting-started 강좌 1~5 단계 (Node + pnpm + VS Code 설치).