실무로 통하는 웹 API

 

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

 

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

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

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

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

 

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

 

 

■ 내용 살펴보기

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

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

· 에제코드

https://www.webapis.info/

Web API Cookbook

> 변역서 : 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

 

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

 

· 비동기 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

 

· 웹스토리지 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를 경험해볼수 있는 좋은 책입니다.