한빛미디어 서평단 <나는리뷰어다> 활동을 위해서 책을 협찬 받아 작성된 서평입니다.
들어가며
웹 개발을 하다 보면 "이런 기능 구현하려면 또 어떤 라이브러리를 찾아야 하나" 하는 고민이 자주 생깁니다.
그런데 사실 현대의 브라우저는 이미 우리가 필요로 하는 많은 기능들을 표준 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들을 체계적으로 다루고 있어요.
비동기 처리와 Promise부터 시작해서 웹 스토리지, URL 라우팅, 네트워크 요청, IndexedDB 같은 기본기는 물론이고, DOM 감시, 웹 애니메이션, 음성 인식과 합성, 파일 다루기까지 폭넓은 영역을 다루는데요.
특히 웹 컴포넌트나 성능 측정, 미디어 처리 같은 고급 주제도 빠뜨리지 않고 있었습니다.
각 장은 국제화, 콘솔 활용, CSS 조작 등 실무에서 자주 마주치는 상황들을 실제 코드와 함께 설명하고 있습니다.
단순히 API 스펙을 나열하는 게 아니라, 실제 프로젝트에서 어떻게 활용할 수 있는지에 초점을 맞춰서 알려줍니다.
특징
제가 가장 눈에 띄었던 건 '문제 - 해결 - 설명' 구조로 내용이 정리되어 있다는 점이에요.
궁금한 기능이 있을 때 바로 해당 부분을 찾아서 코드 예제를 확인하고 적용할 수 있도록 되어 있어서, 마치 실무용 레퍼런스북처럼 활용할 수 있습니다.
이론적인 설명도 충분하지만, "이런 상황에서는 이렇게 해결하면 돼" 하는 식으로 직관적으로 접근할 수 있어서 좋았어요.
또 다른 장점은 각 기능이 제대로 작동하는지 확인해야 하는 실무적인 주의사항들을 함께 제시한다는 점입니다.
단순히 코드만 보여주는 게 아니라 브라우저 호환성이나 예외 처리 같은 현실적인 고려사항들도 놓치지 않고 있었어요.
추천 이유와 대상
제가 이전에 해커톤에 참여했을 때, 웹에서의 음성인식 기능을 구현해야했던 경험이 있습니다.
그 때 관련 문서와 예제를 찾으며 힘들게 구현했던 기억이 있는데요.
이 책은 공식 문서만으로는 이해하기 어려울 수도 있는 부분들을 실제 예제와 함께 설명해주니까, 그 때 이 책이 있었다면 정말 도움이 되었을 것 같아요.
자바스크립트의 기본기는 갖추고 있지만 브라우저 API를 깊이 있게 활용해보지 못한 개발자분들에게 적합합니다.
또 프레임워크나 라이브러리에 의존하지 않는 순수한 웹 개발의 가능성을 한번 탐구해보고 싶은 분들에게도 좋은 길잡이가 될 것 같아요.
맺음말
브라우저의 네이티브 API의 힘을 제대로 활용할 수만 있다면 정말 실용적이겠다라는 걸 느끼게 해준 책입니다.
교과서처럼 옆에 두고 필요할 때마다 찾아보기에도 좋고, 처음부터 끝까지 읽으면서 웹 API의 전체적인 그림을 그려보기에도 충분합니다.
웹 개발자라면 한 번쯤은 꼭 읽어볼 만한 책이라고 생각해요!
