교재 목차

HTML은 페이지의 내용과 구조를, CSS는 표현을, 자바스크립트는 사용자 조작에 대한 반응을 맡습니다. 이 교재는 이 세 가지를 연결해 자기소개 페이지 하나를 만드는 데서 시작합니다. 첫 페이지를 만든 뒤에는 화면 조작, 값 저장, 서버 요청처럼 필요한 기능을 골라 배울 수도 있고, 15개 장을 차례로 읽으며 테스트와 서버, 보안, 성능, 개발 도구까지 웹의 전체 흐름을 이어 갈 수도 있습니다.

프로그래밍을 처음 배워도 첫 페이지는 시작할 수 있습니다. 예제에서 낯선 개념을 만나면 연결된 기초 글로 돌아가 복습하세요. 성능과 접근성, 보안도 따로 외우기보다 만든 페이지가 실제로 어떻게 동작하는지 살펴보며 익힙니다.

9장부터 쓰는 개발 도구는 2026년 11월의 npm 최신 버전을 기준으로 합니다. Jest 30.5, Babel 8, Express 5.3, json-server 1.x, webpack 5.112, Vite 8이 그 예이며, 각 도구가 요구하는 Node.js 버전은 해당 글에 적어 두었습니다. 본문에 실은 실행 결과와 오류 메시지는 MDN과 각 도구의 공식 문서에 적힌 동작을 따라 손으로 계산한 예상값이며, 실제로 실행해 옮긴 출력은 아닙니다. 예제를 볼 때는 먼저 결과를 예상한 뒤 본문과 비교하고, 직접 실행해 다르게 나오면 어느 단계에서 갈라졌는지 따라가 보세요.

---

첫 목표: 세 파일로 자기소개 페이지 만들기

웹 작동 원리와 HTML·CSS·자바스크립트의 역할을 읽고, 개발 환경 설정에서 편집기와 브라우저, 실습 폴더를 준비합니다. 이어 첫 웹 페이지 만들기에서 다음 세 파일을 만듭니다. 환경 설정에서 만든 index.html, style.css, script.js는 그대로 두세요.

• my_profile.html: 이름과 소개, 목록, 문의 버튼을 담습니다.
• profile_style.css: HTML의 link로 연결해 배경과 글꼴, 각 영역의 모양을 바꿉니다.
• profile_script.js: HTML의 script로 연결해 문의 버튼을 누르면 안내창을 띄웁니다.

세 파일을 저장하고 my_profile.html을 열어 보세요. 소개 내용에 스타일이 적용되고, 문의하기 버튼을 눌렀을 때 “아직 문의 기능은 개발 중입니다...”로 시작하는 안내창이 뜨면 첫 목표를 마친 것입니다. 이 버튼은 문의를 실제로 보내는 기능까지 만들지는 않습니다.

스타일이 보이지 않으면 href의 CSS 파일 이름과 두 파일이 같은 폴더에 있는지를 확인하세요. 안내창이 뜨지 않으면 src의 JS 파일 이름과 저장 여부를 먼저 확인하고, 브라우저 개발자 도구의 Console에서 오류를 찾아봅니다. 바꾼 내용이 보이지 않을 때는 지금 연 HTML 파일이 맞는지 확인한 뒤 새로고침하세요.

변수나 버튼에 등록한 함수가 낯설면 변수·타입, 함수·스코프, DOM·이벤트에서 필요한 부분부터 복습합니다. DOM은 브라우저가 HTML을 읽어 만든 요소의 구조입니다. 이 첫 페이지를 만들기 위해 서버나 DB, 로그인을 먼저 준비할 필요는 없습니다.

---

원하는 기능으로 이어 가기

아래 예제들은 각 글에서 따로 시작합니다. 같은 자기소개 페이지에 모두 이어 붙인 코드라고 생각하기보다, 필요한 동작을 먼저 이해한 뒤 자신의 페이지에 옮겨 보세요.

DOM과 웹 스토리지 예제에는 API 서버가 필요하지 않습니다. 웹 스토리지의 출처(origin)는 프로토콜과 호스트, 포트의 조합이며, 같은 이름의 키라도 출처가 다르면 같은 저장소를 읽지 않습니다. 웹 스토리지 글은 값을 저장하고 읽는 부분만 다루며, 프로필 입력을 저장하는 화면이나 로그인 기능까지 이어서 만들지는 않습니다.

Fetch 글의 4000번 /posts, /users와 Express 글의 3000번 /api/users는 서로 다른 주소와 데이터를 쓰는 예제라서, 두 글을 읽는 것만으로 클라이언트와 서버가 연결되지는 않습니다. Fetch의 성공과 실패 사례는 준비한 데이터에 따라 달라지므로, 본문에서 요청한 id가 목 데이터에 있는지도 확인하세요.

서버를 다시 시작한 뒤에도 값을 보관하고 싶다면 DB 기초에서 저장 방식과 SQL 예제를 읽습니다. 다만 DB 서버와 드라이버를 준비해 앞의 Express 코드를 영속 저장으로 바꾸는 전체 구현은 이 교재에 없습니다. 인증·권한은 HTTP와 미들웨어를 이해한 뒤, 신원을 확인하는 인증과 허용된 행동을 판단하는 인가를 구분하는 글입니다. 토큰이 없거나 유효하지 않을 때의 401과 권한이 부족할 때의 403을 살펴보며, 로그인 발급과 사용자 저장소를 갖춘 완전한 서버는 따로 준비해야 합니다.

입력 화면의 작은 품질 확인

입력값을 화면에 보여 주고 싶다면 표시 이름 미리보기를 골라 보세요. 같은 서버 주소에서 화면과 API를 함께 제공하는 public/index.html과 security-demo.cjs, 두 파일의 전체 코드가 있습니다. 폼이 낯설면 폼과 입력으로, 서버 준비가 필요하면 Node·Express와 REST API로 돌아갑니다.

본문의 일곱 가지 입력을 비교하면서, 정상적인 이름은 HTTP 200 응답 뒤 화면에 표시되고 문자열 타입이나 길이 규칙을 어기면 400으로 거절되는지 살펴봅니다. 빈 폼은 브라우저가 먼저 막으며, 숫자나 너무 긴 값을 직접 보내는 요청은 Console에서 따로 확인하는 사례입니다. <b>안녕</b>를 입력했을 때 굵은 글자가 아니라 태그 모양 그대로 보이면 이 확인을 마친 것입니다. 결과가 다르면 Network 패널의 주소와 상태, Response, 서버 터미널을 확인하세요.

이 예제의 textContent는 값을 HTML로 해석하지 않고 일반 요소의 글자로 넣습니다. 이름을 보관하거나 회원가입과 로그인까지 구현하는 예제는 아닙니다. 첫 자기소개 페이지를 마친 뒤, 서버를 거친 입력이 화면에 어떻게 출력되는지 배우고 싶을 때 고르면 됩니다.

---

학습 경로

첫 자기소개 페이지를 마쳤다면 첫 결과물을 얻은 것입니다. 교재 전체를 읽는다면 다음 다섯 단계를 차례로 따라가세요.

1단계 · 웹의 세 언어(1–5장)에서는 웹이 동작하는 원리와 개발 환경에서 시작해, HTML의 구조와 폼, 시맨틱 요소, SVG와 Canvas, CSS의 선택자와 박스 모델, Flexbox와 Grid 레이아웃, 반응형 디자인을 익히고, 애니메이션과 CSS 변수, Sass와 CSS 프레임워크로 스타일을 다듬습니다. 이어 자바스크립트의 변수와 타입, 제어문, 함수와 스코프, 객체와 배열, DOM과 이벤트로 페이지에 반응을 더합니다.

2단계 · 언어 심화와 브라우저 API(6–9장)에서는 클로저와 this, 프로토타입, 고차 함수에서 시작해 Promise와 async/await로 다루는 비동기 프로그래밍, 이터레이터와 모듈 시스템, 메모리 관리, 그리고 구조 분해와 Map·Set, Proxy 같은 최신 ECMAScript 기능을 다룹니다. 마지막으로 Fetch API와 웹 스토리지, History API, 웹 워커 같은 브라우저 기능으로 서버의 데이터를 읽고 값을 보관합니다.

3단계 · 테스트와 프런트엔드(10–11장)에서는 Jest로 작성하는 단위 테스트와 E2E 테스트, 크로스 브라우저 테스트, 개발자 도구로 하는 디버깅과 성능 프로파일링을 익힌 뒤, SPA의 개념과 React의 컴포넌트와 상태, 상태 관리 라이브러리를 살펴봅니다.

4단계 · 서버와 보안, 성능(12–13장)에서는 클라이언트와 서버의 관계, Node.js와 Express로 만드는 REST API, 데이터베이스 기초를 거쳐, HTTPS와 XSS, CSRF 같은 웹 보안의 기초와 인증·인가, 성능 측정과 에셋 최적화까지 이어 갑니다.

5단계 · 개발 도구와 최신 웹 기술(14–15장)에서는 Git과 npm, webpack과 Babel로 개발 흐름을 갖추고, PWA와 WebAssembly, JAMstack 아키텍처, 실시간 웹 통신으로 웹 기술이 넓어지는 방향을 살펴봅니다.

장마다 다루는 예제와 시작 상태가 다르므로, 하나의 앱을 15장 내내 이어서 완성하는 과정으로 보지는 마세요. 관심 있는 기능부터 시작할 때도 해당 글에서 필요한 개념과 제공하는 파일을 먼저 확인합니다. 패키지 버전과 브라우저의 지원 범위는 글에 적힌 조건을 살피고, 사용하는 환경의 공식 문서와 비교하세요.

다른 교재로 이어 가기

12장의 HTTP와 그 아래의 TCP는 네트워크에서, 12장의 SQL과 데이터 모델은 데이터베이스에서 더 자세히 다룹니다. 11장에서 맛본 React는 React와 Next.js에서, 자바스크립트에 타입을 더하는 방법은 타입스크립트에서 이어집니다. 12장의 Express 서버를 프레임워크로 더 크게 만들고 싶다면 NestJS나 Spring을 참고하세요.

---

장별 목차

---

만든 페이지를 돌아볼 때

시맨틱 HTML과 접근성을 읽으며 자신의 소개 페이지에 의미 있는 제목과 문서 언어, 네이티브 버튼을 썼는지 살펴보세요. 접근성(accessibility, a11y)은 키보드나 보조 기술처럼 다양한 사용 방법을 고려하는 일입니다. Tab 키로 문의 버튼을 찾아 Enter나 Space로 누를 수 있는지부터 확인해 보고, 한 번의 조작이나 자동 도구의 점수만으로 접근성 전체를 확인했다고 보지는 않습니다.

화면이 느리거나 입력에 늦게 반응하면 디버깅과 성능 측정으로 이어 갑니다. Core Web Vitals(CWV)는 로딩과 상호작용, 화면 안정성을 보는 핵심 성능 지표의 묶음입니다. 그중 INP(Interaction to Next Paint)는 방문하는 동안의 클릭, 탭, 키보드 조작이 다음 화면에 반영되기까지의 지연으로 페이지의 반응성을 나타냅니다. 페이지를 열기만 하는 검사와 상호작용을 살피는 검사를 구분하고, 같은 페이지와 행동, 조건에서 값을 비교해 보세요.

웹 보안에서는 입력 규칙과 값을 출력하는 위치를 함께 살펴봅니다. CSP(Content Security Policy)는 브라우저가 불러오거나 실행할 리소스를 제한하는 정책입니다. 입력 검증과 안전한 출력, 서버의 권한 검사를 대신하지는 않으며, 앞의 표시 이름 미리보기는 CSP 설정까지 다루지 않습니다.

기능을 하나 더할 때마다 무엇을 바꿨고 어떤 화면이나 값, 응답으로 확인할지 설명해 보세요. 스타일은 Elements 패널, 자바스크립트 오류는 Console 패널, HTTP 요청은 Network 패널처럼 확인할 단서가 남는 곳부터 살펴보면 됩니다. 네트워크와 배포 결과는 그 기능을 다루는 글에서 확인하고, 첫 페이지에서는 세 파일의 연결과 버튼의 반응부터 마칩니다.