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