실무로 통하는 웹 API

조 아타디 지음 | 김태곤 옮김

한빛미디어 2025년 09월 01일 출간 국내도서 : 2025년 09월 01일 출간

작품소개

책소개

이 책은 미디어, 클립보드, 알림 등 현대 웹 개발에 꼭 필요한 브라우저 기반 API를 풍부한 코드 예제와 함께 다룬 실전 가이드입니다. 각 장은 ‘문제’ - ‘해결’ -’설명’ 구조로 구성되어 있어 필요한 기능을 빠르게 찾아 적용할 수 있으며, 기능이 잘 작동하는지 확인해야 하는 실무적 주의 사항도 함께 제시해 활용도를 높였습니다.
방대한 웹 API를 조합해 실제 서비스를 구현하는 과정을 통해 이론과 실무를 자연스럽게 연결합니다. 신입 개발자에게는 웹 브라우저와 표준 API의 핵심 원리를 익힐 기회를 제공하고, 프레임워크나 라이브러리에 의존하지 않는 프런트엔드 개발의 새로운 가능성도 보여줍니다. ‘브라우저가 곧 플랫폼’이 된 시대, 이 책은 웹 개발자가 반드시 알아야 할 내용을 가장 실용적인 방식으로 전달합니다.

목차

CHAPTER 1 비동기 API
_1.0 소개
_1.1 Promise 다루기
_1.2 이미지 로딩 에러에 대비하기
_1.3 Promise 체이닝
_1.4 async/await 키워드 사용
_1.5 Promise 병렬 사용
_1.6 requestAnimationFrame을 사용한 엘리먼트 애니메이션
_1.7 이벤트 기반 API를 Promise로 감싸기

CHAPTER 2 웹 스토리지 API를 사용한 데이터 저장
_2.0 소개
_2.1 웹 스토리지 지원 확인
_2.2 문자열 데이터 저장
_2.3 단순한 객체 저장
_2.4 복합적인 객체 저장
_2.5 스토리지 변경 리스닝하기
_2.6 저장된 모든 키 가져오기
_2.7 데이터 삭제

CHAPTER 3 URL과 라우팅
_3.0 소개
_3.1 상대적 URL 파악하기
_3.2 URL에서 쿼리 파라미터 제거하기
_3.3 URL에 쿼리 파라미터 추가하기
_3.4 쿼리 파라미터 읽기
_3.5 간단한 클라이언트 측 라우터 작성하기
_3.6 패턴에 일치하는 URL 찾기

CHAPTER 4 네트워크 요청
_4.0 소개
_4.1 XMLHttpRequest를 사용한 요청 전송
_4.2 Fetch API를 사용한 GET 요청 전송
_4.3 Fetch API를 사용한 POST 요청 전송
_4.4 Fetch API를 사용한 파일 업로드
_4.5 비콘 전송
_4.6 서버 전송 이벤트로 원격 이벤트 리스닝하기
_4.7 웹소켓을 통한 실시간 데이터 교환

CHAPTER 5 IndexedDB
_5.0 소개
_5.1 데이터베이스의 객체를 만들고, 읽고, 삭제하기
_5.2 기존 데이터베이스 업그레이드
_5.3 인덱스 조회
_5.4 커서를 사용한 문자열 값 검색
_5.5 대규모 데이터 페이징
_5.6 IndexedDB API와 Promise 사용하기

CHAPTER 6 DOM 엘리먼트 감시
_6.0 소개
_6.1 이미지가 가시 영역에 있을 때 게으르게 로딩하기
_6.2 IntersectionObserver를 Promise로 감싸기
_6.3 동영상을 자동으로 멈추고 재생하기
_6.4 높이 변화 애니메이션 만들기
_6.5 엘리먼트의 크기에 따라 콘텐츠 바꾸기
_6.6 엘리먼트가 가시 영역에 있을 때 페이드인 적용하기
_6.7 무한 스크롤 사용하기

CHAPTER 7 폼
_7.0 소개
_7.1 로컬 스토리지의 값으로 폼 필드 채우기
_7.2 페치와 폼데이터 API를 사용한 폼 채우기
_7.3 폼을 JSON 형식으로 전송하기
_7.4 폼 필드를 필수 입력으로 만들기
_7.5 숫자만 입력할 수 있도록 만들기
_7.6 유효성 검사 패턴 설정하기
_7.7 폼 유효성 검사
_7.8 사용자 정의 유효성 검사 로직 사용하기
_7.9 체크박스 그룹 유효성 검사
_7.10 비동기적으로 폼 필드 유효성 검사하기

CHAPTER 8 웹 애니메이션 API
_8.0 소개
_8.1 클릭할 때 물결 효과 적용하기
_8.2 애니메이션 시작과 중지
_8.3 DOM 추가와 제거 애니메이션
_8.4 역방향 애니메이션
_8.5 스크롤 프로그레스 바
_8.6 통통 튀는 엘리먼트
_8.7 여러 애니메이션 동시 실행
_8.8 로딩 애니메이션
_8.9 사용자 설정에 따르는 애니메이션

CHAPTER 9 웹 스피치 API
_9.0 소개
_9.1 텍스트 필드에 받아쓰기 추가하기
_9.2 Promise 기반 음성 인식 도우미 작성하기
_9.3 사용할 수 있는 목소리 확인하기
_9.4 음성 합성
_9.5 음성 합성 커스터마이징
_9.6 음성 합성 자동으로 중단하기

CHAPTER 10 파일 다루기
_10.0 소개
_10.1 파일에서 텍스트 읽기
_10.2 이미지를 Data URL로 읽기
_10.3 동영상을 객체 URL로 읽기
_10.4 드래그앤드롭을 통한 이미지 읽기
_10.5 권한 확인하고 요청하기
_10.6 API 데이터를 파일로 내보내기
_10.7 API 데이터를 다운로드 링크로 내보내기
_10.8 드래그앤드롭으로 파일 업로드하기

CHAPTER 11 국제화
_11.0 소개
_11.1 날짜 포맷하기
_11.2 포맷된 날짜 일부 가져오기
_11.3 상대적인 날짜 포맷하기
_11.4 숫자 포맷하기
_11.5 특정 소수점 자리에서 반올림하기
_11.6 가격 범위 형식 설정하기
_11.7 측정 단위 형식 설정하기
_11.8 복수형 규칙 적용하기
_11.9 문자 수, 단어 수, 문장 수 세기
_11.10 목록 형식 설정하기
_11.11 이름 배열 정렬하기

CHAPTER 12 웹 컴포넌트
_12.0 소개
_12.1 오늘 날짜를 보여주는 컴포넌트 작성
_12.2 임의의 날짜를 포맷하는 컴포넌트 작성
_12.3 피드백 컴포넌트 작성
_12.4 프로필 카드 컴포넌트 작성
_12.5 게으른 로딩 이미지 컴포넌트 작성
_12.6 더보기 컴포넌트 작성
_12.7 스타일이 적용된 버튼 컴포넌트 작성

CHAPTER 13 UI 엘리먼트
_13.0 소개
_13.1 경고창 작성
_13.2 확인창 작성
_13.3 확인창 웹 컴포넌트 작성
_13.4 더보기 엘리먼트 사용
_13.5 팝오버 표시
_13.6 팝오버 수동으로 조작하기
_13.7 팝오버의 위치를 엘리먼트에 상대적인 위치로 설정하기
_13.8 툴팁 표시
_13.9 알림 표시

CHAPTER 14 기기 통합
_14.0 소개
_14.1 배터리 상태 확인
_14.2 네트워크 상태 확인
_14.3 기기 위치 확인
_14.4 지도에 기기 위치 표시
_14.5 텍스트 복사하고 붙여넣기
_14.6 웹 공유 API를 사용한 콘텐츠 공유
_14.7 기기 진동하기
_14.8 화면 방향 확인

CHAPTER 15 성능 측정
_15.0 소개
_15.1 페이지 로딩 성능 측정
_15.2 리소스 성능 측정
_15.3 가장 느린 리소스 탐지
_15.4 특정 리소스의 타이밍 확인
_15.5 렌더링 성능 프로파일링
_15.6 다단계 작업 프로파일링
_15.7 성능 측정 항목 감시

CHAPTER 16 콘솔 다루기
_16.0 소개
_16.1 콘솔 출력 꾸미기
_16.2 로그 수준 사용
_16.3 이름이 정해진 로그 함수 사용하기
_16.4 객체 배열을 표로 출력
_16.5 콘솔 타이머 사용
_16.6 콘솔 그룹 사용
_16.7 카운터 사용
_16.8 변수와 변수의 값 기록
_16.9 스택 추적 기록
_16.10 기댓값 검증
_16.11 객체의 프로퍼티 조사

CHAPTER 17 CSS
_17.0 소개
_17.1 텍스트 영역 강조하기
_17.2 텍스트의 깜빡임 현상 방지
_17.3 DOM 전환 애니메이션
_17.4 실행 중에 스타일시트 변경하기
_17.5 조건에 따른 CSS 클래스 설정
_17.6 미디어 쿼리 확인
_17.7 엘리먼트의 계산된 스타일 구하기

CHAPTER 18 미디어
_18.0 소개
_18.1 화면 녹화
_18.2 사용자의 카메라에서 이미지 캡쳐
_18.3 사용자의 카메라 영상 표시
_18.4 시스템 미디어 지원 확인
_18.5 동영상 필터 적용

CHAPTER 19 마치며
_19.0 소개
_19.1 서드파티 라이브러리
_19.2 브라우저 버전이 아닌 기능을 탐지할 것
_19.3 폴리필
_19.4 다가올 미래

출판사 서평

브라우저 기반 실무 예제로 배우는, 웹 개발자가 반드시 알아야 할 필수 API 전략

『실무로 통하는 웹 API』는 웹 브라우저만으로 구현할 수 있는 다양한 웹 API를 ‘문제’ - ‘해결’ - ‘설명’ 구조에 따라 단계별로 풀어냅니다. 웹소켓, 웹스토리지, IndexedDB, DOM 옵저버 등 핵심 기능을 별도 라이브러리 없이 직접 구현할 수 있도록 안내하며, 각 기능의 작동 원리와 실무에서 놓치기 쉬운 주의 사항까지 꼼꼼히 다룹니다. 또한 Promise 기반의 비동기 처리와 구조화된 예제를 통해 실제 프로젝트에 바로 적용할 수 있는 실용성을 제공합니다.
AI, 멀티모달, UX 혁신 등 웹 기술이 빠르게 진화하는 지금, 브라우저만으로 구현 가능한 기능에 대한 이해는 점점 더 중요해지고 있습니다. 이 책은 그런 표준 API 중심의 개발 역량을 쌓는 데 훌륭한 길잡이가 될 것입니다. 웹 API의 원리부터 실전 적용까지 한 권으로 익히고 싶은 개발자라면 꼭 읽어보세요.

누구를 위한 책인가요?

● 웹 플랫폼을 깊이 활용하고 싶은 자바스크립트 경험자
● 자바스크립트 문법, 기능, 표준 라이브러리에 대한 기본기를 갖춘 개발자
● 브라우저 기반의 인터랙티브 애플리케이션 제작에 필요한 DOM API를 이해하고 있는 실무자
● 다양한 실무 예제를 통해 실력을 키우고 싶은 개발자

작가정보

저자(글) 조 아타디

20년 이상의 프런트엔드 소프트웨어 개발 경험을 보유하고 있으며, 다수의 브라우저 기반 애플리케이션을 개발했습니다. 노텔(Nortel), 델(Dell), 컨스탄트 컨택트(Constant Contact), 세일즈포스(Salesforce), 시놉시스(Synopsys) 등에서 풍부한 프런트엔드 실무 경험을 쌓았습니다. 자바스크립트와 타입스크립트 개발을 전문적으로 다룹니다.

번역 김태곤

호기심 많은 프런트엔드 개발자, 프로 리모트 워커, 고양이 볼트의 집사, 소소한 블로거. 새로운 기술을 배우는 것만큼이나 지식을 나누는 것도 좋아해서 오픈 소스는 물론 강의와 번역을 꾸준히 하고 있습니다. 개인 블로그(https://taegon.kim)와 트위터(@taggon)를 통해서도 웹 기술과 관련된 글을 전합니다. 옮긴 책으로는 『전문가를 위한 리액트』(한빛미디어, 2024), 『사라진 개발자들』(한빛미디어, 2023), 『복붙 개발자의 벼락 성공기』(한빛미디어, 2023), 『소프트 스킬』(길벗, 2022), 『객체지향 자바스크립트의 원리』(비제이퍼블릭, 2015) 등이 있습니다.