한빛미디어

최근 프론트엔드개발은 React나 Vue 와 같은 프레임워크를 이용해 빨리 화면을 만들어 내는데 집중하는 경향이 있습니다. 그리고 기능을 구현하다보면 특정 기능을 구현하기 위해, 예를 들어 로컬 파일을 다루기 위해서 등, 이에 대한 라이브러리를 자연스럽게 찾게 됩니다. 브라우저가 제공하는 표준 API를 이해하지 못한 상황에서 완성품을 만들어 내는데만 잡중하는 것은 땅을 다지지 않고 건물을 만드는 상황에 비유할 수 있습니다. 그리고 너무 라이브러리에만 의존하다보면 개발자 스스로 브라우저가 내장한 표준 API의 잠재력도 놓치게 됩니다. 본 도서는 브라우저가 제공하는 표준 API를 제대로 이해하고 제대로 사용하는 표준적인 방법을 [문제]-[해결]-[설명] 쌍을지어 실무적으로 큰 도움이 되도록 설명합니다. 이를 통해 견고한 애플리케이션을 만들 수 있고, 브라우저 자체 기능이 얼마나 다양하고 강력한지 새삼 깨닫게 됩니다.

이 책의 챕터별 특징은 실제 상황 같은 [문제]를 제시한 후 [해결] 상황을 보여주어 [문제]-[해결] 쌍을 확인해 준 뒤 이에 대한 [설명]을 통해 해결 방안을 기술해 주는 형태로 기술되어 있다는 것입니다. 해당 [문제]는 각 챕터별, 예를 들면 10챕터 파일 다루기에서 파일읽기, 드래그앤드롭으로 이미지 읽기 등 당연히 실무에서도 계속 다루게 되면 실제적인 항목들로 구성되어 있습니다. 문제 중심으로 접근함으로써 독자들은 단순하게 비단 코드만 배우는 것이 아니라 상황에 맞는 판단도 생각해 보게 됩니다.
문제들은 실무 문제를 그대로 가져와 해결합니다.이미지 로딩 오류나 쿼리 파라미터 조작, 무한스크롤처럼 프로젝트에서 만나게 되는 문제들을 네이티브 API로 푸는 과정을 보여주며, 이를 해결할 수 있는 코드와 세세한 설명이 곁들여 있어 동작 원리까지 익힐 수 있도록 구성되어 있습니다. 책에서는 브라우저 API의 폭넓은 기능을 배우면서 최신 UI요소도 배우기 때문에 서드파티 라이브러리도 대체할 수 있는 방법을 습득할 수 있다고 강조하고 있습니다.

책은 총 18개의 챕터로 되어 있습니다. 각 챕터들이 핵심만 간결하게 기술되어 있기 때문에 지루하지 않게 읽을 수 있습니다. 예를 들어 비동기 API 장에서는 이미지 로딩 오류를 해결하는 문제를 제시하고 async/await를 사용한 해결책을 보여 준 뒤 그 원리를 설명합니다. 각 장은 서로 옴니버스식으로 독립적이기 때문에 원하는 장부터, 맞닥뜨린 문제와 관련장부터 바로 시작해도 무방합니다.

첫 번째 장에서는 자바스크립트의 비동기 처리 패턴을 다룹니다. 콜백 함수에서 시작해 Promise와 async/await로 코드를 간결하게 만드는 법, 여러 비동기 작업을 병렬로 처리하고 오류를 다루는 법을 소개합니다. 특히 requestAnimationFrame를 이용해 애니메이션을 브라우저의 렌더링 주기에 맞추는 예제는 프레임워크 없이 애니메이션을 최적화하는 방법을 보여 줍니다. 이어지는 웹 스토리지 API와 URL/라우팅 장에서는 localStorage와 sessionStorage를 사용해 문자열과 객체를 저장하고, 저장된 데이터를 다른 탭과 공유하는 방법을 설명합니다. URL과 라우팅 장에서는 쿼리 파라미터 읽기/추가/삭제, 간단한 클라이언트 라우터 구현 등 SPA의 기반 기술을 직접 구현해 봅니다. 이런 내용은 프레임워크를 사용하더라도 내부 동작을 이해하는 데 큰 도움이 됩니다.
네트워크 요청 장에서는 Fetch API를 이용한 기본 요청과 에러 처리, 비콘 API와 서버 전송 이벤트, 웹소켓 등 다양한 통신 방식을 소개해 채팅이나 실시간 알림의 동작 원리를 설명합니다. IndexedDB 장에서는 브라우저에서 구조화된 데이터를 저장/검색하는 기본 패턴을 배우고, 이를 통해 오프라인 기능을 갖춘 애플리케이션 설계의 기초를 익힙니다.
중반부에는 사용자 인터페이스의 반응성을 높이는 API를 살펴봅니다. IntersectionObserver로 요소가 보일 때만 로딩하거나 애니메이션을 시작하고, MutationObserver와 ResizeObserver를 통해 DOM 변화에 대응하는 방법을 소개합니다. 폼 장에서는 FormData를 사용해 입력을 수집하고 HTML 속성만으로 기본적인 유효성 검사를 처리하는 법을 설명하며 필요할 때 사용자 정의 검증을 추가하는 방법을 간단히 다룹니다.
후반부에서는 사용자 경험을 풍성하게 만드는 API를 소개합니다. Web Animations API로 자바스크립트에서 복잡한 애니메이션을 제어하는 법, Web Speech API로 간단한 음성 인식과 합성을 구현하는 법, 파일 API로 텍스트/이미지를 읽고 파일을 업로드하는 법을 간략히 살펴봅니다. 또한 Intl API를 통해 날짜와 숫자, 통화를 로케일에 맞게 포맷해 국제화의 기본을 익힐 수 있습니다.
웹 컴포넌트 장에서는 브라우저 표준만으로 재사용 가능한 컴포넌트를 만들고 <dialog>나 <details> 같은 요소를 활용해 기본 UI를 구현하는 법을 간단히 다룹니다. 기기 통합 API 장은 배터리/네트워크 상태, 위치 정보, 클립보드와 공유 기능처럼 브라우저가 제공하는 하드웨어 접근 기능을 소개하고, 성능 측정 장에서는 Performance API와 콘솔/CSS/미디어 API의 주요 포인트를 간략히 정리합니다.
책의 마지막 부분에서는 애플리케이션을 최적화하고 디버깅하는 데 필요한 도구를 소개합니다. Performance API를 통해 페이지 로딩 시간과 개별 리소스의 로딩 시간을 측정하고, PerformanceObserver로 중요한 성능 이벤트를 감시하는 방법을 배울 수 있습니다. 예제로는 performance.now()를 이용해 함수 실행 시간을 측정하거나, 여러 단계로 구성된 비동기 작업의 각 단계가 얼마나 오래 걸리는지 프로파일링하는 방법이 포함되어 있습니다.
디버깅을 돕는 콘솔 API도 유용합니다. console.table로 데이터를 표로 출력하고, console.group으로 관련 로그를 묶어 가독성을 높이며, console.time과 console.timeEnd로 코드 실행 시간을 측정하는 방법을 실습합니다.
또한 CSS와 미디어 API를 사용해 자바스크립트로 스타일을 동적으로 변경하거나, matchMedia로 미디어 쿼리 상태를 확인하는 방법, 화면을 녹화하거나 카메라에 접근해 이미지를 캡처하는 기능도 소개합니다.

책도 괜찮지만 저자의 블로그도 책과 괘를 같이 합니다. 최신 기법과 새로운 API에 대해 소개해 준다는 점에서 관련 기술에 관심있는 분들이라면 한번 쯤 방문해볼만 합니다.

본 도서는 브라우저가 제공하는 다양한 API를 한권에 차곡차곡 압축한 안내서 입니다. 이 책을 통해 브라우저 만으로도 네트워크 통신, 데이터 저장, 애니메이션, 음성 처리, 파일시스템, 국제화, 하드웨어 연동, 성능 측정 등 플랫폼이 다루는 모든 것을 구현할 수 있다는 사실을 확인할 수 있습니다. 각 장을 실습하면서 MDN Web Docs로 이해를 확장하고 실험적 API는 caniuse.com으로 지원 여부를 확인하는 습관을 들인다면 더욱 좋습니다.

프레임워크를 배우기 전에 브라우저 API를 이해하는 것은 큰 자산입니다. 문제 해결 중심의 구성과 풍부한 예제를 통해 네이티브 API의 잠재력을 확인하고, 라이브러리의 의존도도 줄일 수 있으며 더 견고한 코드를 작성할 수 있는 습관을 배양해 줍니다.
앞서 건물에도 비유했 듯 기초를 다지는 교재 이자, 숙련된 개발자에게 최신 기능을 복습하는 참고서로 활용할 수 있습니다. 문제 해결 중심의 구성과 폭넓은 아이템으로 프론트엔드 개발자라면 책상 한켠에 손으로 바로 집어들 수 있는 거리에 두고 수시로 찾아볼 만한 가치가 있습니다. 브라우저 표준 API의 힘을 제대로 이해하고 활용할 수 있는 좋은 방법입니다.웹 API를 깊이 이해하고 싶은 입문 개발자, 초보 개발자, 프레임워크의 추상화 이면이 궁금한 중급 개발자 모두에게 추천합니다.

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."