AI 시대에도 필요한 자바스크립트 기초 — DOM·이벤트·실무 UI 노트

이지웹

2026. 10. 11. 14:53

수정됨

ZIP

자바스크립트_기초부터_DOM_이벤트_실무까지.zip

10.6MB

이런 고민, 하고 계신가요?

영상을 따라 코드를 쳐 봤는데, 왜 그렇게 동작하는지는 모르겠어요.
querySelector, addEventListener, classList는 많이 봤는데 어떻게 조합하는지 막막해요.
콘솔에 빨간 오류가 뜨면 어디부터 봐야 할지 모르겠어요.
탭 메뉴, 아코디언, 팝업을 만들고 싶은데 처음부터 혼자 만들 자신이 없어요.
AI가 만들어 준 자바스크립트를 그대로 쓰는데, 조금만 바꾸려 해도 어디를 고쳐야 할지 모르겠어요.

이 책은 바로 이 질문들에 답하기 위해 만들었습니다.

왜 AI 시대에도 자바스크립트 기초가 필요할까요?

"탭 메뉴 만들어 줘" 한마디면 AI가 코드를 써 줍니다. 하지만 결과가 마음에 들지 않을 때 "클릭하면 active 클래스만 바뀌게 해 줘", "이 요소가 없을 때는 오류가 나지 않게 해 줘"라고 정확히 말하려면 용어와 원리를 알아야 합니다.

1. AI가 만든 코드를 읽는 기준이 됩니다.

어떤 요소를 선택하고, 어떤 이벤트에 무엇을 바꾸는지 읽을 수 있어야 코드를 믿어도 되는지 판단할 수 있습니다.

2. 정확한 지시는 정확한 용어에서 나옵니다.

"querySelectorAll로 모두 선택하고, forEach에서 classList.toggle을 쓰세요"처럼 말할 수 있으면 원하는 결과를 훨씬 빨리 얻습니다.

3. 오류를 해결하는 사람은 결국 나 자신입니다.

Console의 오류 메시지를 읽고 원인을 찾는 일은 AI가 대신해 줄 수 없습니다. 이 책은 가장 자주 만나는 오류의 원인을 장마다 정리했습니다.

이 책의 특징

1. 직접 실행해 확인한 예제 140개

본문의 예제는 실제 브라우저(Chrome)에서 실행해 결과를 확인했습니다. 화면이 있는 UI 예제(탭 메뉴, 아코디언, 라이트박스, Back to Top, 쿠키 팝업 등)는 결과 화면 그림이 실려 있습니다.

2. 같은 기능을 버전별로 개선하며 배웁니다

탭 메뉴, 아코디언, 라이트박스는 v1에서 시작해 문제점을 확인하고 한 단계씩 고쳐 가는 방식입니다. 완성본만 보는 것보다 "왜 이렇게 바꿨는지"가 남습니다.

3. 매 장이 같은 흐름입니다

연계 영상 → 이 장에서 배우는 것 → 단계별 설명과 예제 → 확인 문제와 정답 → 자주 하는 실수

4. 현재 쓰는 문법과 안전한 습관을 함께 익힙니다

let/const, 화살표 함수, 전개 연산자, 옵셔널 체이닝, async/await 같은 현재 문법과 innerHTML의 XSS 위험, API 키 보호, 접근성(aria 속성, 키보드 조작)을 처음부터 기본 습관으로 넣었습니다.

5. 책 한 권에 오류 대응이 들어 있습니다

부록 B에 "자주 하는 실수 TOP 10"과 오류 메시지별 원인표, 점검 체크리스트가 있습니다.

6. 연계 영상과 함께 봅니다

클래스101 강의 38편과 유튜브 재생목록의 대응 관계를 부록 D에 정리했습니다. 영상으로 먼저 익히고 책으로 복습하거나, 책으로 읽다 막히면 영상을 찾아볼 수 있습니다.

구성

프롤로그: 이 책을 읽는 법, 앞으로 만들 것, 실습 환경(VS Code, Live Server, 개발자도구), AI 시대에 자바스크립트를 배우는 이유

PART 1. 자바스크립트 기초 문법

1장 첫 코드와 실행 방법 / 2장 변수와 자료형 / 3장 연산자 / 4장 함수 / 5장 객체 / 6장 배열 / 7장 조건문 / 8장 반복문 / 9장 문자열과 숫자 변환 / 10장 타이머·Date·Math

PART 2. DOM 조작

11장 DOM과 요소 선택 / 12장 여러 요소 선택과 반복 / 13장 요소 탐색과 내용 변경 / 14장 스타일·클래스·속성

PART 3. 이벤트와 ES6

15장 이벤트 시작하기 / 16장 입력·폼 이벤트 / 17장 ES6 핵심 문법

PART 4. 실무 UI 만들기

18장 탭 메뉴 / 19장 아코디언 / 20장 라이트박스 / 21장 Back to Top / 22장 쿠키와 "오늘 하루 보지 않기" 팝업

PART 5. 외부 서비스 연동

23장 fetch로 데이터 불러오기 / 24장 지도 API (카카오·네이버·구글)

에필로그: 다음 단계 로드맵, AI와 함께 코딩하기(검증 체크리스트)

부록: A 치트시트 / B 자주 하는 실수 TOP 10 / C 확인 문제 정답 / D 영상 대조표 / E 예제 파일 목록 / F 심화 실습 안내

이 책을 읽고 나면

요소를 선택하고, 이벤트에 반응해서 내용·스타일·클래스를 바꾸는 코드를 읽고 쓸 수 있습니다.
콘솔 오류 메시지를 읽고 원인을 찾아 고치는 순서를 압니다.
탭 메뉴, 아코디언, 라이트박스, Back to Top, 쿠키 팝업을 스스로 만들 수 있습니다.
fetch로 데이터를 불러와 화면에 출력하고, 지도 API를 연결하는 기본 구조를 이해합니다.
AI가 만든 자바스크립트 코드를 검증하는 기준이 생깁니다.

이런 분께 추천합니다

HTML·CSS는 배웠는데 자바스크립트에서 막힌 입문자
영상을 따라 쳤지만 "왜 그렇게 되는지"가 정리되지 않은 분
탭·아코디언·팝업 같은 웹사이트 기능을 직접 만들어 보고 싶은 분
AI(ChatGPT 등)가 만든 자바스크립트를 읽고 직접 고치고 싶은 분
웹 퍼블리싱·프론트엔드 수업이나 스터디의 기본 교재가 필요한 분

이 책이 맞지 않을 수 있는 분

HTML 태그나 CSS를 전혀 모르는 분 (같은 시리즈의 HTML·CSS 책을 먼저 보시길 권합니다)
React·Vue 같은 프레임워크를 바로 배우려는 분 (이 책은 프레임워크의 바탕이 되는 DOM·이벤트·ES6를 다룹니다)
Node.js 서버 개발을 배우려는 분 (이 책은 브라우저 자바스크립트를 다룹니다)

한눈에 보기

분량: PDF 270쪽 / DOCX 약 286쪽
구성: 프롤로그 + 24개 장(5개 PART) + 에필로그 + 부록 A~F
실행 검증된 예제 140개, 결과 화면 수록
확인 문제 166문항 + 정답 (부록 C)
장마다 "자주 하는 실수" 정리
연계 영상: 클래스101 강의 38편, 유튜브 재생목록
제공 형식: PDF, DOCX, 예제 파일(압축 파일에 함께 포함)

이용 안내

개인 학습·참고용 자료입니다. 상업적 이용(재판매·재배포·강의 교재 사용)은 불가합니다.
24장의 지도 API 예제에는 API 키가 포함되어 있지 않습니다(YOUR_... 자리표시자). 본인이 발급받은 API 키(카카오, 네이버, 구글)를 넣어 사용해 주세요. 키가 있어야 지도가 표시되며, 키가 없어도 오류 안내 문구가 나오도록 만들어 두었습니다.
외부 서비스(지도 API 콘솔 등)의 화면과 문서는 자주 바뀔 수 있어, 책의 안내와 일부 다를 수 있습니다.
예제 파일은 책에 실린 코드와 같은 이름으로 장별 폴더에 정리되어 있습니다. (부록 E)
이 책은 크롬 브라우저 기준으로 확인했습니다.

자주 묻는 질문

Q. 프로그래밍을 처음 배우는데 따라갈 수 있나요?

A. 변수, 함수 같은 기초 문법부터 시작합니다. 다만 HTML 태그의 기본 구조와 CSS로 색상·크기를 바꾸는 정도는 알고 있다고 가정합니다.

Q. 영상 강의를 꼭 봐야 하나요?

A. 아니요. 책만으로도 학습할 수 있도록 구성했습니다. 영상은 장마다 연계 표시를 해 두었으니, 이해가 어려운 부분에서 함께 보시면 됩니다.

Q. 예제 파일도 받을 수 있나요?

A. 네. 압축 파일에 PDF·DOCX와 함께 장별 예제 폴더예제/ch01 ~ 예제/ch24)가 들어 있습니다. 파일 목록은 부록 E에 정리되어 있습니다.

Q. PDF와 DOCX의 차이는 무엇인가요?

A. 내용은 같습니다. PDF는 읽기용, DOCX는 검색·메모·편집용으로 쓰시면 편리합니다.