파일 처리, 애니메이션, 음성 인식, 데이터 저장 등 브라우저 내장 기능을 활용해 실무에서 필요한 다양한 기능을 구현하는 방법을 한 권으로 정리해 놓은 책입니다.

책의 가장 큰 특징은 문제 → 해결 → 설명 구조로, 실제 개발 상황에서 어떻게 적용할 수 있는지 직관적으로 이해할 수 있도록 구성되어 있습니다. 예를 들어, 무한 스크롤 기능을 구현할 때 'placeholder 엘리먼트를 IntersectionObserver로 감시하여 자동으로 데이터를 불러오는 방법'을 문제와 코드, 설명까지 한 번에 보여주는 방식입니다. 덕분에 예제를 통해 빠르게 핵심 개념을 습득할 수 있습니다.

내장 API를 다루기는 하나 무조건 라이브러리를 피해야 한다는 식은 아니며, IndexedDB처럼 동작이 까다로운 API는 라이브러리를 사용하는 것이 더 효율적일 수 있다는 균형 잡힌 시각을 제공합니다. 즉, 내장 API의 장점과 한계를 이해하고 적절히 활용하는 능력을 키우는 것이 중요하다는 것을 느낄 수 있는 대목입니다.

 

저는 이 책을 통해 존재조차 몰랐던 브라우저 API들을 많이 알게 되었고, 앞으로 실무에서 바로 적용할 수 있는 기초를 쌓을 수 있었습니다.  당장 필요한 부분만 참고하여 쓰는 용도로도 좋고, 어떤 API들이 존재하는지 알고 향후 깊은 학습을 위한 방향성을 잡는 용도로도 유용해 보입니다.

? 추천 대상

브라우저 표준 API에 대한 기초를 탄탄히 다지고 싶은 웹 개발자

실무에서 바로 참고할 수 있는 빠른 가이드가 필요한 분

웹 개발자
 

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

웹 개발을 하다 보면 새로운 기능을 구현할 때마다 “어떤 라이브러리를 써야 하지?”라는 고민을 하게 된다. 그런데 이 책을 읽으며 깨달은 건, 우리가 찾던 많은 기능들이 이미 브라우저 네이티브 API로 제공된다는 사실이었다.

이 책은 단순히 스펙을 나열하는 게 아니라, 실무 상황에서 바로 활용할 수 있는 코드와 함께 Web API를 소개한다. 비동기 처리(Promise)와 웹 스토리지 같은 기본기부터 시작해, URL 라우팅, 네트워크 요청, IndexedDB, DOM 감시, 웹 애니메이션, 파일 처리, 음성 인식과 합성, 성능 API, 웹 컴포넌트까지 폭넓은 영역을 다룬다.

특히 좋았던 점은 다음과 같다:

문제 → 해결 → 설명 구조: 필요한 기능을 빠르게 찾아보고 바로 적용할 수 있어 레퍼런스북처럼 활용 가능하다.

실무적 주의사항: 단순히 예제 코드만 보여주는 게 아니라, 브라우저 호환성·에러 처리·성능 같은 현실적인 고려사항을 함께 짚어준다.

풍부한 예제: 해커톤이나 프로젝트에서 바로 참고할 수 있는 수준으로 실용적이다.

읽는 내내 “굳이 서드파티 라이브러리를 쓰지 않아도 여기까지 구현이 가능하구나”라는 생각이 들었다. 예컨대 Axios로 하던 HTTP 통신을 Fetch API로 충분히 대체할 수 있고, 로컬 스토리지의 한계를 IndexedDB로 보완할 수 있다. 이 과정에서 저자가 강조한 “접착 코드(glue code)” 개념도 크게 와닿았다.

추천 대상

자바스크립트 기본기는 있지만 브라우저 네이티브 API를 깊게 다뤄본 적 없는 개발자

프레임워크/라이브러리에 의존하지 않고 순수 웹 기술의 가능성을 탐구하고 싶은 사람

해커톤이나 사이드 프로젝트에서 빠르게 기능을 붙여보고 싶은 프론트엔드 개발자

실무적으로 유용한 기능이 이미 있는데 놓치고 있었던 html5와 native api들을 팔로업할 수 있는 책입니다.

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

# 책 한눈에 보기

저는 “내가 되고 싶은 사람처럼 행동하면 결국 그 사람이 되어 있을 것이다”라는 말을 좋아합니다. 제가 가장 바라는 것은 개발자가 되어 경제활동을 하는 것이고, 그렇다면 개발자가 된 것처럼 행동하다 보면 언젠가 진짜로 그 모습에 닿을 수 있지 않을까 기대합니다. 이번 책도 그런 마음으로 골랐습니다. 제목에 담긴 ‘실무’, ‘웹 API’라는 단어가 웹과 프론트엔드를 중심으로 공부해 온 제게 실무와 맞닿은 지식을 얻을 수 있을 것 같은 기대를 주었기 때문입니다.

책을 처음 받아들었을 때는 생각보다 얇다는 점이 가장 눈에 띄었습니다. 300쪽 남짓한 분량이라 생각보다 가벼웠습니다. 이동 중에도 부담 없이 펼쳐 볼 수 있겠다 싶었습니다. 실제로 대중교통을 이용할 때마다 자연스럽게 꺼내 읽으며 시간을 보낼 수 있었습니다.

# 인사이트

책에서는 정말 다양한 Web API들을 다룹니다. Fetch, Promise, Storage 등을 포함해 10개 이상의 Web API가 소개되고, 앞으로 나올 API들도 함께 언급됩니다. 그래서 마지막 챕터에서 저자가 말한 것처럼, “서드파티 라이브러리를 굳이 쓰지 않아도 많은 기능을 구현할 수 있지만, 그렇다고 라이브러리를 무조건 배제할 필요는 없다”는 메시지가 크게 와닿았습니다.

제가 자주 쓰던 Axios 같은 라이브러리의 `get`, `post` 메서드들은 사실 순수 Fetch API만으로도 구현이 가능한 경우가 많습니다. 다만 라이브러리를 쓰면 여러 보일러플레이트(반복 코드)를 줄일 수 있습니다. 그래서 책에서 지적한 “접착 코드(glue code)”라는 표현에 공감됐습니다.

```jsx
// Axios 예시
axios.get('/api/users')
 .then(response => {
   console.log(response.data);
 })
 .catch(error => {
   console.error(error);
 });

// Fetch로 비슷하게 구현한 예시
fetch('/api/users')
 .then(response => {
   if (!response.ok) {
     throw new Error('Network response was not ok');
   }
   // Fetch API는 Axios 라이브러리와 다르게JSON 파싱이 필요하다.
   return response.json(); 
 })
 .then(data => {
   console.log(data);
 })
 .catch(error => {
   console.error(error);
 });
```

가장 기억에 남는 개념은 **IndexedDB**였습니다. 그동안 사용해본 적도 없고, 왜 필요한지도 잘 몰랐는데, 책을 통해 알아낼 수 있었습니다. 웹 스토리지는 **문자열 데이터만 저장할 수 있다**는 한계가 있어서, 복잡한 구조의 데이터를 다루기에는 제약이 있습니다. 이 한계를 보완하기 위해 IndexedDB가 도입 되었습니다.

IndexedDB는 객체 단위로 데이터를 저장할 수 있습니다. 또한 비동기 API라서 사용자 인터페이스(UI)를 막지 않으며, PWA(Progressive Web App) 같은 **오프라인 기능**을 구현하거나 **네트워크가 불안정한 상황**에서 데이터를 임시 저장하는 데 유용합니다.

IndexedDB가 실제로 어떤 서비스에 활용되는지 궁금해 추가로 조사해 본 결과, 노션이나 트렐로 같은 서비스가 오프라인에서도 일정 부분 동작할 수 있는 이유를 이해하게 되었습니다.

# 한 줄 평

서드파티 라이브러리를 쓰지 않아도 브라우저가 기본적으로 제공하는 Web API가 이렇게 다양하다니!

최근 프론트엔드개발은 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를 깊이 이해하고 싶은 입문 개발자, 초보 개발자, 프레임워크의 추상화 이면이 궁금한 중급 개발자 모두에게 추천합니다.

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

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

웹 API를 처음 접한 건 아마도 Fetch API가 아닐까 싶다. 그땐 그게 웹 API인지도 몰랐고, 그 이후에 axios로 CRUD를 구현하면서 큰 고민 없이 사용했다. 개발자로서 첫 1년은 웹 API보다는 잘 알려진 서드파티 라이브러리로 기능을 구현하는 데 익숙했다. 주니어 입장에서 익숙하지 않은 웹 API를 당장 적용해야 할지 확신하기 어려웠고, 라이브러리 공식 문서보다 딱딱하고 불친절한 MDN 문서를 급한 마음에 들여다볼 여유도 없었다. 라이브러리 관련 자료는 차고 넘치기에 당장 기능 구현하기에 바빴던 게 사실이었다.

연차가 쌓이면서 라이브러리 의존도가 높을 때의 단점이 눈에 보이기 시작했다. 책에서 언급하듯이 오픈 소스가 유지보수를 중단하는 경우도 있고, 번들 사이즈가 커지는 경우, 혹은 보안 이슈가 터지는 경우도 있었다. 그 와중에 웹 API는 꾸준히 발전해 왔고, 기존 라이브러리를 대체할 만한 수준에 이른 경우도 생겨났다. 이제는 Moment.js나 Day.js 대신 Intl API를 사용하고, 무한 스크롤은 라이브러리 대신 Intersection Observer API로 구현하는 것이 자연스러운 흐름이 되었다.

책의 흐름은 개별 섹션으로 구분되어 있다. 각 섹션 상단에는 실무에서 마주할 법한 ‘문제’가 정의되어 있다. 예컨대 비동기 API를 다루는 첫 챕터에서는 Promise로 해결할 수 있는 실무적 과제를 섹션별로 제시하는 식이다. 만약 특정 과제를 서드파티 라이브러리로 해결한 경험이 있다면, 웹 API를 통해 해결하는 사례를 보고 비교하며 더 즐겁게 읽어 나가는 것이 가능하다.

그런 맥락에서 requestAnimationFrame 또한 실무 관점에서 살펴볼 수 있다. 까다롭거나 리소스가 많이 필요한 애니메이션 구현의 경우 requestAnimationFrame를 활용하면 최적화가 가능한데, 기본적으로 다른 브라우저 탭으로 전환하면 애니메이션을 잠시 중단하기도 하고, 디스플레이 주사율에 맞게 최적화되어 있기 때문이다.

웹 스토리지 API는 비교적 익숙했다. 하지만 단순히 getItem, setItem에 국한된 게 아니라 직렬화, 역직렬화를 한다거나, 스토리지 변경을 리스닝하는 등 다양한 방식에 대해 한 번쯤 다시 훑어보기에 용이하다. 덕분에 과거 실무에서 스토리지 변경 감지를 시도했던 경험을 다시 한번 복기할 수 있어 좋았다.

URL과 라우팅 챕터도 마찬가지이다. 쿼리 파라미터를 읽고 추가하고, 그걸 통해 상태 관리를 해본 경험이 있다면 조금 더 익숙하게 읽힐 챕터였다. 일반적으로 React Router나 TanStack Router 같은 라이브러리를 사용하기에 직접 구현할 일은 거의 없지만, 그 기반 기술인 history.pushState와 popstate 이벤트의 동작 원리를 짚어준다는 점에서 의미가 있었다. 추가로 과거 크로스 브라우징 이슈로 적용하지 않고 끝내 정규식을 사용하긴 했지만, URL Pattern API도 함께 다루고 있어 반가웠다.

XMLHttpRequest나 Fetch API, SSE, 웹소켓을 다루는 4장은 조금은 익숙한 파트였는데, 요구사항에 맞게 그때그때 이 챕터를 찾아보는 게 꽤 훌륭한 레퍼런스가 될 듯하다. IndexedDB 또한 마찬가지이다. 실제로 아직까지는 IndexedDB가 필요할 만큼 복잡한 요구사항을 마주하진 않았지만, 오프라인 환경을 지원하거나 개인화 데이터가 필요한 경우 이를 활용해 구현해 볼 수 있겠다는 생각이 들었다.

‘DOM 엘리먼트 감시’라는 이름으로 묶인 6장은 더욱 친숙했다. 특히 DOM의 변화를 감시하고 그에 따라 특정 이벤트를 실행해야 할 일이 꽤 있기 때문에 좀 더 익숙했던 것 같다. MutationObserver, IntersectionObserver, ResizeObserver 같은 옵저버는 이미 여러 서드파티 라이브러리 기반 기술로 쓰이고 있다. 하지만 이 옵저버 자체의 사용법 자체가 복잡한 편은 아니기 때문에, 여유가 있다면 직접 구현하는 편이 유지보수 관점에서 더 유리할 수 있다.

반면 Form은 상황에 따라 라이브러리를 활용하는 편이 나을 수도 있다. Form 관련 API 호출을 통해 기능 구현이 가능하지만, Form은 특성상 요소가 많고 기획에 따라 꽤 다양한 형태가 나올 수 있기 때문에 잘 알려진 라이브러리를 통한 구현이 가독성과 안정성을 높이는 방향일 수도 있다. 다만 실제로 Form 요소의 근본적인 특성과 유효성 처리 방식에 대해 이해하는 것이 중요하고, 이 챕터는 그런 기본기를 다지는 데에 도움을 준다.

화면 단위에서의 애니메이션 구현은 개발자에 따라 다르고 접근에 따라 다르겠지만, 난 주로 CSS를 통해 구현해 왔다. 웹 애니메이션 API를 통한 구현은 실제로 시도해본 적이 없었는데, CSS로 구현해 왔던 애니메이션 구성을 자바스크립트를 통해 구현한 예시를 보며 비교해 볼 수 있었다. 간단한 구현은 CSS로 처리하되, 다른 이벤트와 상호작용이 필요한 경우엔 활용할 수 있겠다는 생각이 들었다.

Web Speech API는 가장 흥미로운 챕터였다. IoT와 더불어 AI 관련 기술의 성장과 동시에 최근 몇 년 사이에 많이 활용되었던 기술이 STT(Speech to Text), TTS(Text to Speech) 일 것이다. Web Speech API는 그에 대응하는 표준 기술이지만, 아쉽게도 호환성과 성능 이슈로 상용 웹서비스에서는 클라우드 기반의 외부 API를 사용하는 것이 일반적이다. 그럼에도 불구하고 표준 기술의 가능성을 엿보는 경험은 충분히 흥미로웠다. 문제는 앞서 나온 이슈로 상용 서비스에 적용하기에는 아직 어렵다는 것과 이게 벌써 몇 년이나 지난 API라는 점이다. 표준 API임에도 발전이 더딘 것을 보면 그만큼 우선순위에 밀려 신경을 못 쓰고 있거나, 실제로 이런 기술에는 언어를 포함해 다양한 요소를 고려해야 하기 때문에 다른 웹 표준 API에 비해 들어가는 공수가 많지 않을까 싶다. 사실 그렇게 공수가 많이 들어가는 기술이라면 기업이 소유하고 싶지 않을까. 표준이라는 건 공공성과 웹의 정신을 계승한다는 대의가 있겠지만, 그럼에도 불구하고 브라우저 공급자들의 이해관계가 있다는 걸 감안해야 한다.

다음으로 파일을 다루는 API와 국제화를 위한 API가 이어진다. 파일 API는 익숙한 주제였지만 세부적인 내용을 깊이 들여다볼 기회가 되어 도움이 되었다. 기존에 구현했던 서비스는 day.js를 사용하고 있고 초기 번들 사이즈는 작지만, 각각의 국제화를 세부적으로 구현하려면 번들 사이즈가 늘어나는 구조이다. 반면 브라우저에 내장된 Intl API는 초기 로딩 속도와 캐싱 관리 측면에서 이점이 있다. 다만 개발자 경험적인 측면에서는 여전히 day.js 같은 라이브러리의 사용이 용이하기 때문에 국제화의 규모가 작다면 기존의 라이브러리를 활용도 좋은 선택이다. 하지만 국제화가 메인이 되는 서비스라면 처음부터 Intl API로 접근하는 편이 장기적으로 더 좋은 선택이라고 생각한다.

UI 엘리먼트 관련 API는 여러 요소를 묶어 설명을 이어간다. <dialog>, <details>를 거쳐 최근에 일부 기술 요소로 사용되고 있는 popover 속성 등을 다루고 있다. 여기서 다루는 UI 요소는 예전부터 요구사항을 온전히 반영하기 위해 다양한 방식으로 구현되고 있었는데, 문제는 표준 방식은 아니다 보니 접근성이나 커스텀을 위해선 꽤나 공수가 들어가는 부분이 있어왔다. 그에 비해 표준 API를 활용하면 더 적은 코드로도 견고하고 접근성 높은 UI 구현이 가능하다는 장점이 있다. 물론 아직 일부 브라우저 호환성 문제가 남아 있기 때문에 서비스의 지원 범위나 폴리필 사용 여부에 대한 고민은 동반되어야 한다.

이 외에도 사용자 기기의 배터리나 네트워크 상태를 확인하거나 성능을 측정하는 API를 언급하기도 하고, 텍스트 영역을 강조하거나 DOM 전환 애니메이션을 다루는 API 등 다양한 기술을 가볍게 훑으며 넘어갔다. 일부는 아직 실험적인 기능이라 당장 실무에 적용하기는 어렵지만, 웹의 미래를 엿볼 수 있는 대목들이었다. 그리고 콘솔을 세부적으로 다루는 챕터를 지나 비디오와 오디오 스트림을 다루는 API를 설명하며 마무리된다.

마지막 챕터를 통해 저자가 이야기하지만, 이 책은 모든 서드파티 라이브러리를 버리고 내장 API만 사용하라고 주장하지 않는다. 오히려 라이브러리를 사용할 때 왜 이 라이브러리를 써야 하는지에 대한 근본적인 답을 스스로 내릴 수 있는 힘을 길러준다. 무작정 유행하는 기술을 도입하기 전에, 번들 사이즈, 유지보수, 브라우저 호환성, 그리고 개발 경험 사이의 트레이드오프를 현명하게 저울질할 수 있는 시야를 제공하는 셈이다. 표준 API의 발전이 더디게 느껴질 때도 있지만, 웹 생태계가 커짐과 동시에 그 속도는 분명 빨라지고 있다. 오늘날 당연하게 쓰이는 라이브러리의 기능이 내일의 브라우저 표준이 될 수 있기에 우린 빠른 변화의 흐름에 놓여 있고, 이 책은 그 흐름에 적응하는 데에 분명한 도움을 줄 책이라고 생각한다.

예전 게시글에서 이야기 했듯이 요즘에는 AI개발이 아닌 AI 백엔드 엔지니어라는 직무로 업무를 담당하고 있다. 그렇다 보니 자연스레 API를 직접 개발하고 유지보수 관리를 담당하고 있다.

하여 해당 도서를 고르게 되었다. 내 상황과 조금 다른 것은 나는 백엔드에서 restful API 로 서비스를 하는 것이고 해당 도서는 웹 API 라고 되어 있다.

이는 말 그대로 웹에서 보여지는 백단에서 일어나는 API들에 대해 전체적으로 서술하는 도서라고 보면 좋을 것 같다.

우선 목차부터 보면 아래와 같다.

CHAPTER 1: 비동기 API
CHAPTER 2: 웹 스토리지 API를 사용한 데이터 저장
CHAPTER 3: URL과 라우팅
CHAPTER 4: 네트워크 요청
CHAPTER 5: IndexedDB
CHAPTER 6: DOM 엘리먼트 감시
CHAPTER 7: 폼
CHAPTER 8: 웹 애니메이션 API
CHAPTER 9: 웹 스피치 API
CHAPTER 10: 파일 다루기
CHAPTER 11: 국제화
CHAPTER 12: 웹 컴포넌트
CHAPTER 13: UI 엘리먼트
CHAPTER 14: 기기 통합
CHAPTER 15: 성능 측정
CHAPTER 16: 콘솔 다루기
CHAPTER 17: CSS
CHAPTER 18: 미디어

다양한 목차들이 구성되어 있었고 실제 웹을 구성할 때 알아야할 것들이 정말 많았다. 아직 100% 이해하지 못했지만 기존에 내가 업무하면서 고민이 있다거나 문제를 직면했던 주제들을 기반으로 읽어내려갔다.

최근에 파일을 front 쪽에서 backend 쪽에 어떻게 전달해야 나이스하게 작업을 할 수 있을 지에 대해서 고민 중이다.

단순히 base64로 인코딩하고 있는데 해당 부분에서는 어떤게 좋다라기 보다는 도서에서도 base64로 인코딩하고 있는 것으로 보아 따로 조금 더 알아봐야할 것 같다.

국제화 부분도 잘 몰랐던 부분이라 좋았다. 국제적인 기준의 시간 부터 해서 동일하게 맞춰서 개발을 진행해야한다.

웹 API 이다 보니 프론트에서 화면이 완벽하게 구성되는 시간도 중요하다. 자바스크립트 들을 얼마나 빨리 읽어들이는지도 중요한데 이를 체크하는 부분이 나온다.

바로 성능 측정 부분이다. 여기서 나오는 내용들은 리소스 전체를 탐지하거나 특정 늦은 리소스를 탐지하는 등 다양한 방법으로 리소스를 탐지하여 느린 부분을 개선하는 내용들이 나온다.

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

일반적으로 책을 통해서, 실제 업무에 활용하고 더 좋은 기술을 적용하려고 하는 부분이 많이 있습니다.

책의 제목을 보면 API로 정의 되어 있어서 요즘 FE, BE의 영역중에 Backend 분야의 API를 구성하고 작성하는 것인지 

살펴봐야할 부분이고, API를 정의하고 구현하는 언어 기술은 매우 다양한데, 실제 책에서는 어떠한 언어 기반으로 예시 및 코드 샘플이 있는지 확인해보고 싶은 내용입니다.

책의 서브 제목으로 파일처리, 애니메이션, 음성인식, 저장소, 웹 컴포넌트까지 다양한 기술들이 언급되어 있어서, 해당 부분도 살펴볼 예정입니다. 

저자분 조 아타디 님은 20년 이상 프런트앤드 개발자로, 자바스크립트, 타입스크립트개발을 전문적으로 다룹니다.

■ 내용 살펴보기

· 책에서 다루는 API에 대해서 다시 정의를 하면, 브라우저 내장 기능을 실무에 바로 적용할수 있도록 구성된 실전 가이드 입니다. 

일반 API가 아니라 웹 API로 정의되어 있습니다. 혼란이 없으셨으면 좋겠습니다.

· 에제코드

https://www.webapis.info/

Web API Cookbook

Web API Cookbook Level Up Your JavaScript Applications by Joe Attardi Unlock the power of modern web browser APIs. Also available from:

www.webapis.info

> 변역서 : https://github.com/taggon/web-api-cookbook

> 원서 : https://github.com/joeattardi/web-api-cookbook

GitHub - taggon/web-api-cookbook: Code examples for Web Browser API Cookbook, published by O'Reilly Media

Code examples for Web Browser API Cookbook, published by O'Reilly Media - taggon/web-api-cookbook

github.com

각 기술요소마다 각각 새로운 기술요소 및 필수적으로 알아야 하는 사항에 대해서 내용 및 이론이 설명되어 있습니다.

· 비동기 API

대부분의 서비스들은 비동기로 처리됩니다. 동기방식이 아니기 때문에 반드시 알고 있어야 하는 개념들이 있습니다.

기존에는 Jquery도 많이 사용했고, Axios등 라이브러리를 사용하는 경우도 많고, 요즘은 바닐라 자바스크립트 개념으로 직접 구현하는 경우도 많이 있습니다. 

비동기를 처리하는 방식에서, 콜백함수, 이벤트를 핸들링 해야 합니다.

요즘은 Promise를 많이 사용하고 있습니다. 이것에 대해서 상세히 다룹니다. 여기서 추가적으로 비동기 처리시 다양한 연결 흐름을 다루는데, Promise~then대신에 async/await방식을 통해서 조금 더 순차적/동기적으로 동작하는 코드를 작성하는 부분도 언급해서

실제 적용할때, 개념을 학습할수 있습니다.

또한 아래와 같이 평소에 잘 알지 못했던 API를 살펴볼수 있는 부분도 좋았습니다.

requestAnimationFrame : 웹 브라우저에서 애니메이션을 부드럽고 효율적으로 구현하기 위한 JavaScript API입니다

https://developer.mozilla.org/ko/docs/Web/API/Window/requestAnimationFrame

Window: requestAnimationFrame() method - Web API | MDN

콜백 목록의 항목을 고유하게 식별하는 요청 id인 long 정수 값. 이것은 0이 아닌 값이지만, 그 값에 대해 어떠한 다른 추측을 할 수 없습니다. 이 값을 window.cancelAnimationFrame() 에 전달해 콜백 요청

developer.mozilla.org

· 웹스토리지 API를 사용한 데이터 저장

기존에는 cookie, session을 통해서 사용자의 정보를 저장하는 방법을 client, server관점으로 많이 사용하였습니다.

요즘은 cookie를 사용하는 대신 sessionStorage, localStorage를 많이 사용합니다.

일반적인 getItem, setItem. clear을 일반적인 사항 말고, 단점등에 대해서 살펴보게 됩니다.

책을 통해서 조금더 한반 앞으로 생각해서 단순한 객체 저장, 복잡한 객체 저장시 어떻게 접근해야 할지 알게 됩니다.

객체를 직렬화 해서 저장하는 방법
로컬스토리지에 변경사항이 발생하면, 다른탭에서 알림을 받는 요건
현재 출처의 로컬스토리지의 저장된 모든 키를 조회
등등 사용시 안되는것과 주의할것들에 대해서 사전에 체크할수 있습니다.

· URL과 라우팅

우리의 서비스는 url을 기준으로 서비스를 하고 통신을 하고 있습니다.

사용자의 url을 변경하거나, 파라미터를 변경하고 수정을 통해서 원하는 방향대로 동작을 변경하는 역활이 필요합니다.

쿼리 파리미터 제거하기
쿼리 파라미터 추가하기
쿼리 파라미터 읽기
클라이언트 라우터 작성하기
패턴에 일치하는 URL찾기
등 다양하게 클라이언트 입장에서 필요한 사항을 변경하거나 핸들링 할수 있는 부분은 개발의 확장가능성을 제공합니다.
다만 해당 기능을 제공하는 브라우저인지 확인하는 절차가 필요합니다.

· 네트워크 요청

요즘을 잘 알지 못할수 있지만, Ajax를 처음 구현할때 XMLHttpRequest를 사용해서 기능 동작을 하였는데, 이제는 2015년 Fetch라는 Promise기반 API표준이 되었고, 점차 확대되었습니다.

XMLHttpRequest 구현 방식
Fetch를 통한 GET, POST요청 전송 방식
Fetch를 통한 파일 업로드

기타라 관심있게 본 주제는

비콘 전송 (응답을 기다리지 않고 빠르게 요청 보내는 방법)

서버 전송 이벤트 원격 이벤트 리스팅 (반복해서 폴링하지 않고, 백엔드 서버 알림 받기)

· IndexedDB

sessionStorage, localStorage방식 말고, 관계형데이터베이스 방식과 비슷하게 객체 저장소를 제공합니다.

이것은 버전 관리 및 트랜잭션과 같은 고급기능을 제공합니다.

데이터베이스에 객체를 만들고, 읽고, 삭제하기
인덱스 조회, 기존 데이터베이스 업그레이드
커서를 사용한 문자열 값 검색
대규모 데이터 페이징
IndexedDB API와 Promise 사용하기

등 기존에 경험하지 못한 것을 식별하고 테스트 해보면 다앙한 활용 방법을 찾을수 있는 기회를 제공합니다.

· DOM엘리먼트 감시

실제 서비스에 많이들 사용하고 있습니다. 보통 x,y의 좌표를 기준으로 마우스나 포인트의 이동 거리를 측정하거나 계산을 해서 기능을 구현하는데, 엘리먼트를 감시하고 체크하는 목적으로 3개의 요소를 사용하면 조금 더 원하는 결과를 효과적으로 개발할수 있습니다.

MutationObserver, IntersectionObserver, ResizeObserver입니다.

아래 기능을 FE에서 개발을 진행할때, 도움이 많이 됩니다.

이미지가 가시 영역에 있을때 게이르게 로딩하기
동영상을 자동으로 멈추고 재상하기
높이 변화 에니메이션 만들기
엘리먼트의 크기에 따라 콘텐츠 바꾸기
엘리먼트가 가시 영역에 있을때 페이드인 적용하기
무한스크롤 사용하기

· 웹 애니메이션 API

동적인 화면을 제공하고, 서비스 요소에 적용하는 것은 사용자에게 자신이 원하는 메세지를 잘 전달할수 있는 좋은 요소입니다

움직이는 이미지를 제공하거나, 다른 형태로 서비스를 제공할수 있는데, 여기서는 브라우저의 기능을 활용해서 구현하는 방법을 제공합니다.

css3에 있는 키프레임 기반 애니메이션
클릭할때, 물결 효과 내기
애니미에션 시작과 중지
DOM 추가와 제거 애니메이션
역방향 애니메이션
스크롤 프로그레스바
통통 튀는 엘리먼트
여러 애니메이션 동시 실행
로딩 애니메이션
사용자 설정에 따르는 애니메이션

보통 BE에서 처리해야 할것 같은 동작들이 제공되는 것을 보고, 더 효과적인 방법으로 기능개발 할수 있는 옵션이 생긴것 같아서 흥미로웠습니다.

· 웹 스피치 API

음성에 대한 처리(음성 합성, 목소리 확인, 커스터마이징) 이러한 부분도 핸들링할수 있는 부분이 신기하였습니다. 추가적으로 계속 성능이 좋아질것이라고 생각이 듭니다.

· 파일 다루기

다양한 형태의 파일, 영상에 대해서 사용자의 로컬파일시스템을 이용해서 핸들링 합니다.

보통은 BE에서 물리적인 파일을 업로드해서 처리를 하지만, 간단한 작업은 해당 API를 이용해서 처리하는 방향이 좋은것 같습니다.

파일 뿐만이 아니라 이미지에 대해서도 파일처럼 핸들링이 가능합니다.

추가로 동영상 객체를 URL을 통해서 읽고, 드래그앤드롭을 통한 이미지 처리, 로컬 파일에 접근 권한 체크, API데이터를 외부로 보내기 처리를 실습합니다.

· 웹컴포넌트 구성 / UI 엘리먼트

 - extends HTMLElement를 이용한 고유한 동작을 하는 새로운 html 요소 작성

 - 구성한 것은 slot을 이용해서 화면 구성하는 방법

 - 실제 화면에 notice메시지 등에 많이 사용하는 대화창, 경고창, 확인창, 팝오버, 툴팁, 일림 표시등을 더 효과적으로 하기 위한 방법

14장부터 매우 흥미로운 내용이 구성됩니다.

· 기기 통합

모바일 기기를 통해서 우리는 무선망을 사용해서 다양하고, 편리한 서비스를 제공합니다. 일반적으로 App을 통해서 브릿지 함수로 상호 통신을 하고 정보를 제공받고, 제공합니다. 하지만 최신 브라우저 플랫폼에서는 아래와 같은 Spec을 API를 통해서 제공하고 있습니다.

다만 해당 기능을 서비스에 적용시, 지원해주는 최신 브라우저를 기반으로 하기 때문에 그것에 따른 체크도 필요합니다.

배터리 상태
네트워크 상태
지리적 위치 데이터
기기 클립보드
공유 콘텐츠
촉각 피드백 
화면 방향 확인

여기서 언급되는 것들이 별도의 모바일 네이티브의 기능을 쉽게 구현할수 있어서, 흥미로웠습니다.

· 성능점검

우리는 크롬이나 브라우저에서 제공하는 성능탭애서 그 느린 사항을 확인하고 체크합니다.

이러한 사항을 프로그램으로 파악해서 단순한 시간 측정이 아닌, 다양한 요소로 확인이 가능합니다.

아래 사항들을 보면, 처음에 체크하고 싶은 일반적이지만 매우 중요한 사항들입니다.

javascript로 PerformanceObserver, DomHighResTimeStamp등을 이용해서 구현합니다.

페이지 로딩 속도 측정
리소스 성능 측정
가장 느린 리소스 탐지
특정 리소스의 타이밍 확인
랜더링 성능 프로파일링
다단계 작업 프로파일링
성능 측정 항목 감시

· 콘솔 다루기

이 내용도 매우 흥미로운 부분입니다. 브라우저에 랜더링된 부분을 우리는 개발자도구를 통해서 값을 확인하고 체크하고 디버깅에 사용합니다. 일반적으로 console.log에 확인하기도 합니다. 이러한 디버깅 기법을 더 다양하게 확장해서 사용이 가능합니다.

로그를 출력하는 포맷을 변경
로그 수준 사용도 가능하고
객체 배열을 표로 출력 
콘솔 타이버 사용
콘솔 그룹 사용
변수명과 변숫값 기록
스택 추적 기록
기댓값 검증
객체의 프로퍼티 조사

 

새로운 최신 기술을 사용하고, 필요에 따라서 적절하게 사용하면

시스템 아키텍처도 변화할수 있고, 더 효과적인 방법으로 개발할수 있는 다양한 웹API를 경험해볼수 있는 좋은 책입니다.

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

프론트엔드 개발을 하다 보면 “이 기능을 꼭 라이브러리 없이 브라우저만으로 구현할 수 없을까?”라는 고민을 하게 된다. 『실무로 통하는 웹 API』는 그런 질문에 바로 답을 줄 수 있는 책이다.

이 책의 가장 큰 특징은 레시피 형식이다. 각 장은 "문제 → 해결 → 설명" 구조로 되어 있어, 필요한 기능을 빠르게 찾아보고 바로 적용할 수 있다. 예를 들어, Promise를 활용한 비동기 처리, async/await 패턴, 이미지 로딩 에러 처리, 병렬 처리 같은 부분은 실무에서 자주 맞닥뜨리는 상황들이다. 단순히 API를 소개하는 데서 끝나지 않고, 실제로 사용할 때 놓치기 쉬운 예외 처리까지 다뤄주는 점이 특히 좋았다.

범위도 넓다. 파일 읽기/쓰기, 클립보드 접근, 알림 API, 웹 스토리지와 IndexedDB, 애니메이션, 음성 인식, 웹 컴포넌트 등 브라우저에서 제공하는 기능들을 고르게 다루고 있다. 최신 프레임워크에 익숙해진 개발자라면 놓치고 있는 네이티브 API의 활용 가능성을 새삼 깨닫게 된다.

다만 아쉬운 점은 있다. 각 주제가 독립적으로 구성되어 있어서 책을 처음부터 끝까지 읽기에는 흐름이 다소 끊긴다. 또, 설명의 깊이는 기본적인 이해와 실무 적용에 맞춰져 있어서, 더 깊은 원리나 최적화까지 다루지는 않는다. 결국 이 책은 개념서라기보다는 실전용 참고서에 가깝다.

실무에서 특정 기능을 바로 구현해야 할 때, “어떻게 쓰더라?” 하고 검색하기 전에 책을 열면 답을 얻을 수 있다. 브라우저 API를 정리해두고 싶은 프론트엔드 개발자라면 책상 위에 두고 필요할 때마다 꺼내 볼 만한 가치가 충분하다.

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

들어가며

웹 개발을 하다 보면 "이런 기능 구현하려면 또 어떤 라이브러리를 찾아야 하나" 하는 고민이 자주 생깁니다.

그런데 사실 현대의 브라우저는 이미 우리가 필요로 하는 많은 기능들을 표준 API로 제공하고 있다고해요.

<실무로 통하는 웹 API>는 브라우저 네이티브 기능의 강력함을 보여주는 책이에요!

별도의 라이브러리 없이도 음성 인식, 파일 처리, 데이터 저장 등 복잡한 기능들을 구현할 수 있다는 점에서 웹 개발자라면 반드시 알아둬야 할 내용들을 담고 있는 책이라는 생각이 들었습니다.

주요 내용

이 책은 웹 브라우저가 기본적으로 제공하는 API들을 체계적으로 다루고 있어요.

비동기 처리와 Promise부터 시작해서 웹 스토리지, URL 라우팅, 네트워크 요청, IndexedDB 같은 기본기는 물론이고, DOM 감시, 웹 애니메이션, 음성 인식과 합성, 파일 다루기까지 폭넓은 영역을 다루는데요.

특히 웹 컴포넌트나 성능 측정, 미디어 처리 같은 고급 주제도 빠뜨리지 않고 있었습니다.

각 장은 국제화, 콘솔 활용, CSS 조작 등 실무에서 자주 마주치는 상황들을 실제 코드와 함께 설명하고 있습니다.

단순히 API 스펙을 나열하는 게 아니라, 실제 프로젝트에서 어떻게 활용할 수 있는지에 초점을 맞춰서 알려줍니다.

특징

제가 가장 눈에 띄었던 건 '문제 - 해결 - 설명' 구조로 내용이 정리되어 있다는 점이에요.

궁금한 기능이 있을 때 바로 해당 부분을 찾아서 코드 예제를 확인하고 적용할 수 있도록 되어 있어서, 마치 실무용 레퍼런스북처럼 활용할 수 있습니다.

이론적인 설명도 충분하지만, "이런 상황에서는 이렇게 해결하면 돼" 하는 식으로 직관적으로 접근할 수 있어서 좋았어요.

또 다른 장점은 각 기능이 제대로 작동하는지 확인해야 하는 실무적인 주의사항들을 함께 제시한다는 점입니다.

단순히 코드만 보여주는 게 아니라 브라우저 호환성이나 예외 처리 같은 현실적인 고려사항들도 놓치지 않고 있었어요.

추천 이유와 대상

제가 이전에 해커톤에 참여했을 때, 웹에서의 음성인식 기능을 구현해야했던 경험이 있습니다.

그 때 관련 문서와 예제를 찾으며 힘들게 구현했던 기억이 있는데요.

이 책은 공식 문서만으로는 이해하기 어려울 수도 있는 부분들을 실제 예제와 함께 설명해주니까, 그 때 이 책이 있었다면 정말 도움이 되었을 것 같아요.

자바스크립트의 기본기는 갖추고 있지만 브라우저 API를 깊이 있게 활용해보지 못한 개발자분들에게 적합합니다.

또 프레임워크나 라이브러리에 의존하지 않는 순수한 웹 개발의 가능성을 한번 탐구해보고 싶은 분들에게도 좋은 길잡이가 될 것 같아요.

맺음말

브라우저의 네이티브 API의 힘을 제대로 활용할 수만 있다면 정말 실용적이겠다라는 걸 느끼게 해준 책입니다.

교과서처럼 옆에 두고 필요할 때마다 찾아보기에도 좋고, 처음부터 끝까지 읽으면서 웹 API의 전체적인 그림을 그려보기에도 충분합니다.

웹 개발자라면 한 번쯤은 꼭 읽어볼 만한 책이라고 생각해요!

JavaScript에 친숙하지 않은 사람이라도, 가볍게 읽으며 “웹에서 이런 것도 가능하구나”라는 경험을 얻을 수 있게 해주는 책이었다. 물론 프런트엔드를 주로 다루는 개발자라면 더 깊이 있는 활용 아이디어를 얻을 수 있겠지만, 꼭 전문적으로 다루지 않더라도 충분히 재미있게 읽을 수 있는 책이라고 생각한다.

그래서 이 책을 조심스럽게 추천하고 싶다. JavaScript를 자주 다루는 사람뿐만 아니라, 개발을 좋아하는 사람이라면 누구든 가볍게 읽으며 새로운 인사이트를 얻을 수 있을 것이다. 특히 과거의 나처럼 JavaScript 앞에서 좌절했던 경험이 있는 독자라면, 이 책을 통해 그때와는 다른 감각으로 언어를 마주할 수 있을 것이다.

"실무로 통하는 웹 API" 는 브라우저 내장 API를 단순히 나열하는 책이 아니라, 실제 문제를 해결하는 과정을 중심으로 학습할 수 있게 해줍니다.

특히 온라인 중고거래 플랫폼을 개발하며 무한 스크롤, API 요청, 로컬 데이터 관리에 관심이 많았던 제 입장에서, 이 책은 구체적인 답을 제시해주었습니다. 단순히 "어떻게 쓰는가"를 넘어서 "왜 이렇게 설계해야 하는가"까지 짚어주기 때문에, 코드를 따라 치는 순간 개념이 자연스럽게 체화됩니다.

웹 프론트엔드 개발자뿐만 아니라, 실무에서 다양한 API를 활용해 사용자 경험을 개선하고 싶은 모든 개발자에게 이 책을 추천합니다. 특히 API 공식 문서가 딱딱하게 느껴졌던 분들에게는 훨씬 친절한 가이드가 되어줄 것 같습니다.

이 책은 자바스크립트로 개발시 해결해야되는 다양한 문제들을 제시하고 해결하고 설명을 통해 자세한 예시코드를 통해 확인하고 직접 실습해볼 수 있게 구성이 되어있다

웹API 의 활용도를 높이고 싶다면 책에 있는 다양한 문제들을 직접 해결해보고 실습해보면서 숙지해보도록 하자 ~

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

웹 플랫폼의 진화와 네이티브 API의 중요성

웹이 애플리케이션 플랫폼으로 변한지 꽤 오랜 시간이 되었다. 최근 등장한 PWA(Progressive Web App), WebAssembly, 그리고 수많은 브라우저 네이티브 API 덕분에  웹은 단순한 하이퍼 미디어 문서 뷰어를 넘어 완전한 애플리케이션 플랫폼으로 자리잡았다.

한빛미디어에서 출간된 <실무로 통하는 웹 API>는 오라일리에서 나온 'Web API Cookbook'의 번역서다. 이 책은 웹 애플리케이션이 실제로 실행되는 브라우저라는 플랫폼에서 제공되는 API를 상세히 살펴본다. 한글판은 총 324쪽이다.

프레임워크에 숨겨진 브라우저 API

대부분의 웹 애플리케이션 개발자들은 리액트나 뷰와 같은 프런트엔드 프레임워크를 사용하기 때문에  브라우저 API를 직접 살펴볼 기회는 많지 않다. 하지만 이런 프레임워크 역시 내부적으로는 브라우저 네이티브 API를 활용한다. 따라서 프레임워크의 추상화 계층 이면에서 실제로 어떤 일이 일어나는지를 이해한다면  더 효율적인 코드를 작성할 수 있을 뿐만 아니라 프레임워크의 동작 방식을 이해하는데에도 도움이 될 것이다.

이 책은 API를 목적에 따라  구분하여 설명하고 있으므로 1장 비동기 API를 읽고 나서는 관심가는 API에 해당하는 장을 골라서 읽으면 된다. 

이 책에서 다루는 주요 API들

• 웹 스토리지와 IndexedDB: 클라이언트 사이드 데이터 저장
• URL 및 라우팅: SPA 라우팅의 기반 기술
• Fetch API: 현대적인 HTTP 통신
• DOM과 폼: 웹 개발의 기본이 되는 API
• 웹 애니메이션: CSS 애니메이션을 넘어서는 고급 애니메이션
• 웹 컴포넌트: 프레임워크 없이도 재사용 가능한 컴포넌트 작성
• 파일 API: 파일 업로드/다운로드 처리
• 성능 API: 웹 앱 성능 측정과 최적화
• 콘솔 API: 디버깅을 위한 고급 콘솔 기능
• CSS API: JavaScript로 스타일 제어
• 웹 스피치 및 미디어: 음성 인식, TTS, 미디어 스트림 처리

웹 플랫폼의 놀라운 발전

웹 플랫폼이 정말 많이 발전했다는 걸 실감할 수 있었다. Windows API에서 제공되던 배터리 정보도 이제 Battery Status API로 웹에서 접근할 수 있다. 이는 웹이 단순한 브라우저 환경을 넘어 네이티브 앱과 경쟁할 수 있는 플랫폼으로 성장했음을 보여준다. (예전에 네트워크 상태나 배터리 API를 사용하던 윈도우 앱을 개발하던 기억이 떠오른다.)

특히 마지막 장에서는 앞으로 도입될  API를 소개하는데, 웹 블루투스, NFC,바코드, 쿠키 저장소, 결제 API 등이 있다. 이 API들이 도입된다면 웹의 플랫폼화, 특히 크로스 플랫폼화가 가속화될 것 같다.

이 책은 웹 플랫폼이 제공하는 API와 기능, 동작 방식을 이해하는데 도움이 된다.