교재 목차

HTML은 페이지의 내용과 구조를, CSS는 표현을, JavaScript는 사용자 조작에 대한 반응을 맡습니다. 처음에는 이 세 가지를 연결해 자기소개 페이지 하나를 만들어 보세요. 첫 페이지를 만든 뒤에는 화면 조작, 값 저장, 서버 요청처럼 필요한 기능을 골라 배울 수 있습니다.

전체 내용을 차근차근 읽고 싶은 경우에는 아래 15개 장의 순서를 따라가세요. 예제에서 낯선 개념을 만나면 연결된 기초 절로 돌아가 복습할 수 있습니다. 성능·접근성·보안도 만든 페이지의 구체적인 동작을 살펴보며 익힙니다.

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

웹 작동 원리와 HTML·CSS·JavaScript의 역할을 읽고, 개발 환경 설정에서 편집기와 브라우저, 실습 폴더를 준비합니다. 이어 첫 웹 페이지 만들기에서 다음 세 파일을 만듭니다. 환경 설정에서 만든 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과 Web Storage 예제에는 API 서버가 필요하지 않습니다. Web Storage의 출처는 프로토콜·호스트·포트의 조합이며, 같은 이름의 키라도 출처가 다르면 같은 저장소를 읽지 않습니다. 이 절은 값을 저장하고 읽는 발췌이며, 프로필 입력을 저장하는 UI나 로그인 기능까지 연결해 제공하지는 않습니다.

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

값을 서버 재시작 뒤에도 보관하고 싶다면 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–5장에서 내용·스타일·JavaScript 기초를 다지고, 6–9장에서 언어 심화와 브라우저 API를 이어 읽습니다. 10–11장은 테스트·디버깅과 프런트엔드, 12–13장은 HTTP·서버와 보안·성능, 14–15장은 개발 도구와 웹 기술 확장으로 이어집니다.

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

---

장별 목차

---

만든 페이지를 돌아볼 때

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

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

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

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