단계 1 — 시작하기
시작하기· 5강
GitHub + Vercel로 첫 배포부터 React/Next.js까지
GitHub + Vercel로 5분 만에 내 홈페이지 만들기
코드 한 줄로 시작하는 첫 배포
GitHub에 코드를 올리기만 하면 Vercel이 자동 배포하는 현대적인 워크플로우를 익히고, https://내이름.vercel.app 으로 작동하는 첫 홈페이지를 만듭니다. 준비물은 노트북과 이메일 계정뿐이고, 난이도는 완전 초보, 예상 시간은 약 2시간입니다.
CSS로 내 홈페이지 예쁘게 꾸미기
선택자, 색상, 레이아웃, 반응형까지
강의1에서 만든 페이지를 CSS로 꾸며봅니다. 선택자와 속성의 문법부터 Flexbox 레이아웃, 모바일 반응형까지 한 번에 다룹니다.
Git 명령어로 진짜 개발자처럼 일하기
터미널에서 직접 커밋하고 푸시하기
GitHub 웹 UI 대신 터미널에서 Git 명령어로 코드를 관리합니다. clone, status, add, commit, push 4개의 핵심 명령으로 개발자의 일상 워크플로우를 익힙니다.
JavaScript로 내 홈페이지에 동작 넣기
정적 페이지에서 “살아있는 페이지”로
버튼을 누르면 반응하고 입력에 따라 실시간으로 바뀌는 페이지를 만듭니다. 변수와 DOM 조작, 이벤트, 그리고 다크모드 토글·클릭 카운터·실시간 인사 미니 프로젝트를 직접 구현합니다.
React + Next.js로 진짜 웹앱 만들기
현업에서 쓰는 컴포넌트·상태·라우팅
현업에서 실제로 쓰이는 React + Next.js로 진짜 웹앱을 만들어 Vercel에 배포합니다. 컴포넌트 사고, props, useState, 폴더 기반 라우팅을 한 흐름으로 익힙니다.
단계 2 — 언어 기초
HTML· 6강
웹 문서의 뼈대를 만드는 마크업
HTML 기초 · 텍스트 요소 · 링크와 이미지
DOCTYPE · head/body · 기본 태그 · strong · em · blockquote · code · pre · 위/아래첨자 · a · img · figure · 절대/상대 경로
HTML 문서의 뼈대를 이루는 기본 구조와 자주 쓰이는 태그(h1-h6, p, div, span, ul/ol)를 익힙니다. 글을 더 풍부하고 의미 있게 표현하는 다양한 텍스트 태그(strong, em, blockquote, q, cite, code, pre, sup/sub, mark, del, ins, abbr)를 익힙니다. 웹 페이지를 연결하는 a 태그와 이미지를 삽입하는 img 태그, 그리고 figure/figcaption으로 의미 있는 미디어 묶음을 만드는 법을 익힙니다.
테이블 · 폼 · 시맨틱 HTML
table · thead/tbody/tfoot · colspan · rowspan · input 다양한 타입 · select · textarea · 검증 · header · nav · main · section · article · aside · footer
데이터를 행과 열로 구조화하는 테이블의 문법(table, thead/tbody/tfoot, tr/th/td)과 셀 병합(colspan, rowspan), 접근성을 위한 scope/caption을 익힙니다. 사용자로부터 데이터를 입력받는 폼의 모든 것 — form 태그, input의 다양한 type, label, select, textarea, fieldset, 그리고 입력 검증 속성까지. 의미 있는 태그를 사용해 SEO와 접근성에 강한 HTML을 작성합니다. div의 무더기를 header/nav/main/section/article/aside/footer로 대체합니다.
CSS· 7강
색상·박스·Flexbox·Grid·반응형
CSS 기초 · 색상 & 폰트 · 박스 모델 · 배경 & 테두리
선택자 · 우선순위 · 상속 · HEX/RGB/HSL · Google Fonts · CSS 변수 · content · padding · border · margin · box-sizing · background · border-radius · box-shadow · transition
CSS를 HTML에 연결하는 3가지 방법, 선택자 종류, 우선순위(specificity), 상속 개념과 기본 텍스트 속성을 익힙니다. CSS의 다양한 색상 표기(HEX/RGB/RGBA/HSL), 폰트 속성과 Google Fonts 연결, CSS 변수(:root)로 디자인 시스템을 구축하는 법을 익힙니다. CSS의 모든 요소가 박스 형태로 렌더링되는 원리(content/padding/border/margin), box-sizing의 차이, display 속성과 margin 겹침 현상을 익힙니다. background-color/image/gradient, border와 border-radius, box-shadow와 그림자, opacity·cursor, 부드러운 전환을 위한 transition을 익혀 버튼·카드 UI를 만듭니다.
Flexbox · CSS Grid · 반응형 웹 디자인
1차원 레이아웃의 표준 · 2차원 레이아웃의 강자 · @media · Mobile-First · rem · clamp()
1차원(가로 또는 세로) 레이아웃을 손쉽게 만드는 Flexbox — flex-direction, justify-content, align-items, gap, flex-wrap, flex 단축속성, order, align-self까지. 2차원(가로+세로 동시) 레이아웃을 만드는 CSS Grid — grid-template-columns/rows, fr 단위, grid-column/row, grid-template-areas, auto-fill/fit까지. 뷰포트 메타 태그, @media 쿼리, Mobile-First 접근, rem/em/vw 단위, 그리고 clamp()로 단계 없이 부드럽게 변하는 유동 크기를 익힙니다.
JavaScript· 8강
변수·함수·DOM·이벤트·비동기
변수와 타입 · 제어문 · 함수 · 배열
var · let · const · 원시 타입 · 형변환 · 템플릿 리터럴 · if/else · switch · for · while · break/continue · 선언식 · 표현식 · 화살표 · 콜백 · push/pop · map · filter · find · sort · spread
var/let/const의 차이, 6가지 원시 타입, typeof 연산자, 명시적·암묵적 형변환, 그리고 백틱으로 작성하는 템플릿 리터럴을 익힙니다. 조건 분기(if/else, 삼항, switch), 비교·논리 연산자, 반복문(for, while, do-while), 흐름 제어(break, continue, 단락 평가)를 익힙니다. 함수의 3가지 작성 방식(선언식·표현식·화살표), 호이스팅 차이, 매개변수와 반환값, 기본값, 스코프, 그리고 콜백 함수의 개념을 익힙니다. 배열 생성·접근·수정 메서드(push, pop, shift, unshift, splice)와 강력한 고차함수(forEach, map, filter, find, includes, sort), 그리고 전개 연산자를 익힙니다.
객체 · DOM 조작 · 이벤트 · 비동기 프로그래밍
리터럴 · 메서드/this · 구조분해 · 전개 · JSON · querySelector · createElement · classList · dataset · addEventListener · event 객체 · 버블링 · 위임 · Promise · async/await · fetch · try/catch
객체 리터럴, 점/대괄호 표기법, 메서드와 this, 객체 배열 패턴, 구조분해할당, 전개 연산자, 그리고 JSON 직렬화를 익힙니다. DOM 요소를 선택(getElementById/querySelector), 변경(textContent vs innerHTML), 동적 추가/삭제(createElement, appendChild), classList 토글, data-* 속성을 익힙니다. addEventListener로 이벤트 등록, 자주 쓰는 이벤트(click/input/submit/keydown 등), event 객체의 target·key·preventDefault, 버블링, 그리고 이벤트 위임 패턴을 익힙니다. 동기 vs 비동기, setTimeout/setInterval, Promise의 then/catch, async/await로 비동기 코드를 동기처럼, fetch API로 외부 데이터 가져오기, 그리고 try/catch 에러 처리를 익힙니다.
단계 3 — 백엔드 입문
Node.js· 6강
서버 사이드 JS와 REST API
Node.js 기초 · 내장 모듈 · npm과 패키지 · Express 기초
REPL · CommonJS/ESM · process · fs · path · os · events · package.json · install · nodemon · dayjs · 라우팅 · req/res · 미들웨어 · static
Chrome V8 엔진 위에서 동작하는 서버 사이드 JavaScript 런타임 Node.js의 기초 — REPL, 모듈 시스템(CommonJS/ESM), 파일 실행, process 객체를 익힙니다. Node.js가 기본 제공하는 핵심 모듈들 — fs(파일 시스템), path(경로 처리), os(운영체제 정보), events(이벤트 패턴)를 익힙니다. package.json 구조와 npm 명령어, dependencies와 devDependencies의 차이, npx, nodemon, 그리고 실용 라이브러리 dayjs를 익힙니다. Node.js의 가장 인기 있는 웹 프레임워크 Express로 HTTP 서버 띄우기, 라우팅, req/res 객체, 미들웨어, 정적 파일 제공까지 한 번에 다룹니다.
REST API · 파일 DB와 .env
자원/행위 · HTTP 메서드 · 상태 코드 · JSON · JSON 영속화 · dotenv · .gitignore
REST 아키텍처 원칙(자원·행위·표현), HTTP 메서드별 역할(GET/POST/PUT/PATCH/DELETE), 상태 코드(200/201/400/404/500), express.json()을 익혀 RESTful API를 만듭니다. 메모리에만 저장하던 데이터를 JSON 파일로 영속화하고, .env로 환경 변수를 안전하게 관리하는 방법을 익힙니다.
데이터베이스· 6강
SQL·SQLite·Prisma·MongoDB
DB 개념 · SQL 기초 · SQL 심화
RDBMS vs NoSQL · SQL · SQLite · CREATE · INSERT · SELECT · UPDATE · DELETE · JOIN · GROUP BY · 서브쿼리 · 인덱스
JSON 파일의 한계와 데이터베이스가 필요한 이유, RDBMS와 NoSQL의 차이, SQL의 역할, 그리고 학습용으로 적합한 SQLite를 소개합니다. SQLite의 데이터 타입, CREATE TABLE로 테이블 만들기, INSERT/SELECT/UPDATE/DELETE의 기본 문법, WHERE/ORDER BY/LIMIT를 익힙니다. 여러 테이블을 연결하는 JOIN(INNER/LEFT), GROUP BY와 집계 함수, HAVING, 서브쿼리, 그리고 성능을 위한 인덱스(EXPLAIN QUERY PLAN)를 익힙니다.
Node.js + SQLite · Prisma ORM · MongoDB 기초
better-sqlite3 · prepare/run/get/all · CRUD API · schema.prisma · migrate · Client · 1:N 관계 · Atlas · Mongoose · Schema/Model · CRUD
Node.js에서 SQLite를 다루는 가장 인기 있는 better-sqlite3 라이브러리로 prepare/run/get/all 메서드를 익히고, Express와 결합한 CRUD API를 만듭니다. 차세대 ORM Prisma로 schema.prisma 파일에 모델을 정의하고, 마이그레이션으로 DB 스키마를 관리하며, 자동 생성된 Client로 타입 안전한 CRUD를 작성합니다. NoSQL의 대표 MongoDB의 문서·컬렉션 개념, Atlas 무료 클러스터 생성, Mongoose로 Node에서 연결, Schema/Model 정의와 CRUD를 익힙니다.
단계 4 — 프레임워크
TypeScript· 6강
타입 안전한 JavaScript
TypeScript 기초 · 타입 선언 · 인터페이스와 타입 · 클래스
tsc · tsconfig · 기본 타입 · 변수 · 함수 · void/never · 타입 추론 · as · interface · type · ? · readonly · | · & · constructor · public/private · 상속 · abstract · implements
JavaScript의 타입 오류를 컴파일 시점에 잡아주는 TypeScript의 가치, tsc 컴파일러, tsconfig.json 설정, 그리고 기본 타입(string/number/boolean/any/unknown/배열/튜플)을 익힙니다. 변수와 함수의 타입 선언, 선택적/기본값 매개변수, void와 never의 차이, 타입 추론, 그리고 타입 단언(as)까지 익힙니다. interface와 type alias의 차이, 선택적 프로퍼티, readonly, 인터페이스 확장(extends), 유니온(|)과 교차(&) 타입, 인덱스 시그니처를 익힙니다. TypeScript 클래스 — 매개변수 프로퍼티 축약, 접근 제어자(public/private/protected/readonly), 상속(extends/super), 추상 클래스(abstract), 인터페이스 구현(implements)을 익힙니다.
제네릭 · React + TypeScript
<T> · 제약 · keyof · Partial/Pick/Omit/Record · Props 타입 · useState<T> · 이벤트 타입
타입을 매개변수처럼 사용하는 제네릭으로 재사용 가능한 함수·인터페이스·클래스를 작성하고, keyof와 유틸리티 타입(Partial/Pick/Omit/Record)을 활용합니다. React 컴포넌트에 TypeScript 적용하기 — Props 인터페이스, useState<T>, 이벤트 타입(ChangeEvent/FormEvent/MouseEvent), API 응답 타입 지정까지.
React 심화· 8강
컴포넌트·훅·라우팅·상태관리
컴포넌트 심화 · useEffect · useContext · useReducer
단일 책임 · children · render prop · 합성 vs 상속 · Side Effect · 의존성 배열 · 클린업 · fetch 패턴 · props drilling · createContext · Provider · 커스텀 훅 · action · dispatch · reducer · 불변성
컴포넌트 설계의 핵심 원칙(단일 책임), children/render prop 패턴, 조건부 렌더링 3가지 방법, 그리고 React가 권장하는 합성 vs 상속을 다룹니다. Side Effect의 개념, useEffect의 3가지 의존성 배열 패턴, 클린업 함수, AbortController를 활용한 fetch 취소, 그리고 흔한 무한 루프 함정을 익힙니다. props drilling 문제, createContext/Provider/useContext 3단계, Context를 안전하게 감싸는 커스텀 훅, Context 적합·부적합 상황, 그리고 다크모드 패턴을 익힙니다. 복잡한 상태 로직을 useState 대신 useReducer로 분리하기 — action/dispatch/reducer 패턴, useState와의 선택 기준, 그리고 불변성을 유지한 상태 업데이트.
커스텀 훅 · 성능 최적화 · React Router · 상태 관리 라이브러리
use* · useFetch · useLocalStorage · useDebounce · React.memo · useMemo · useCallback · useRef · v6 · useParams · useNavigate · Outlet · 404 · 전역 상태 · Zustand · slice · devtools
use로 시작하는 커스텀 훅의 개념과 ESLint 규칙, 공통 로직 추출의 이점, 그리고 useFetch/useLocalStorage/useDebounce 직접 구현을 다룹니다. 불필요한 리렌더링을 방지하는 React.memo, 비싼 계산을 메모하는 useMemo, 함수 참조를 유지하는 useCallback, 그리고 렌더링 없이 값을 저장하는 useRef를 익힙니다. react-router-dom v6의 핵심(BrowserRouter/Routes/Route/Link), useParams/useNavigate/useLocation 훅, 중첩 라우트(Outlet), 404 처리, 그리고 보호된 라우트 패턴까지. 전역 상태가 필요한 시점, Zustand vs Redux 비교, create로 store 만들기, 선택적 구독으로 성능 최적화, slice 패턴, devtools 미들웨어를 익힙니다.
단계 5 — 실무 역량
Git 협업· 4강
브랜치·충돌·PR 리뷰·심화
웹 접근성· 4강
WCAG·ARIA·시맨틱·폼·미디어
웹 보안· 4강
XSS·CSRF·SQLi·HTTPS·환경변수