Web APIs 정리 : 브라우저가 제공하는 기능

🌐 Web APIs?

• Application Programming Interfaces

웹 개발을 하다 보면 브라우저 안에서 아주 많은 기능을 기본적으로 사용할 수 있다.
예를 들어, 서버와 통신하거나, 사용자의 위치를 가져오거나, 알림을 띄우는 것처럼 복잡한 기능들도 자바스크립트만으로 실행할 수 있다.
이처럼 브라우저가 기본으로 제공하는 기능들을 통칭해서 Web API라고 부른다.

 

🧰 Web API 기능

Web API는 말 그대로 “웹 환경에서 사용할 수 있도록 브라우저가 제공하는 API”를 뜻한다.
이 API들을 사용하면 자바스크립트로는 직접 하기 어려운 작업도 간단하게 구현할 수 있다.

대표적인 Web API는 다음과 같다.

DOM API	HTML 요소를 동적으로 조작할 수 있음
Fetch API	HTTP 요청을 보내고 응답을 받을 수 있음 (서버 통신)
Geolocation API	사용자의 현재 위치를 가져올 수 있음
Notification API	데스크톱 알림을 띄울 수 있음
Canvas API	2D 그래픽을 그릴 수 있음
Storage API	localStorage / sessionStorage 등 클라이언트 저장 가능

 

그밖에도 매우 많은 Web API가 있는데 이는 mdn에서 확인할 수 있다.

 

🤔 Web API vs REST API

Web API와 REST API는 이름은 비슷하지만 역할이 다르다.

정의	브라우저에서 자바스크립트로 접근하는 기능	서버에서 HTTP로 제공하는 데이터 인터페이스
제공 주체	브라우저	백엔드 서버
사용 예시	navigator.geolocation.getCurrentPosition()	GET https://api.github.com/users/octocat

 

즉, Web API는 "브라우저가 자바스크립트에게 주는 도구",
REST API는 "서버가 클라이언트에게 주는 데이터 창구"라고 보면 된다.

 

🔨 Web API를 사용하는 상황?

다음과 같은 상황에서 Web API를 활용할 수 있다.

• 현재 위치 기반 서비스를 만들 때 → Geolocation API
• 사용자가 설정한 알림 기능을 구현할 때 → Notification API
• 사용자 정보나 콘텐츠를 받아올 때 → Fetch API
• 그래픽, 그림판, 게임 요소를 그릴 때 → Canvas API
• 로그인 유지, 장바구니 기능 등 → Storage API

대부분의 웹 앱에서 자연스럽게 사용하게 되는 기능들이며, 직접 구현하기 어려운 부분을 브라우저가 대신 처리해준다는 점이 핵심이다.