JavaScript Browser APIs란?

JavaScript Browser APIs란?

JavaScript Browser APIs는 웹 브라우저가 제공하는 프로그래밍 인터페이스로, JavaScript를 통해 브라우저 기능과 하드웨어(카메라, GPS 등)를 제어할 수 있게 합니다.
웹 페이지가 정적인 콘텐츠를 넘어 동적이고 인터랙티브한 경험을 제공할 수 있는 핵심 기술입니다.

---

📌 주요 Browser APIs 분류

1. DOM 조작
   • document.getElementById(), element.addEventListener()
     → HTML/CSS를 동적으로 수정.
2. 통신
   • fetch(), XMLHttpRequest
     → 서버와 데이터 비동기 통신.
3. 저장소
   • localStorage, IndexedDB
     → 클라이언트 측 데이터 저장.
4. 디바이스 접근
   • navigator.geolocation, MediaDevices.getUserMedia()
     → GPS, 카메라, 마이크 사용.
5. 그래픽/애니메이션
   • Canvas API, WebGL
     → 복잡한 시각적 요소 생성.
6. 성능 최적화
   • Intersection Observer API, requestAnimationFrame()
     → 렌더링 성능 개선.

---

🌐 핵심 API 예시

1. Geolocation API

navigator.geolocation.getCurrentPosition((position) => {
  console.log("위도:", position.coords.latitude);
  console.log("경도:", position.coords.longitude);
});

→ 사용자 위치 추적 (지도 앱에 활용).

2. Web Storage API

localStorage.setItem("theme", "dark"); // 저장
const theme = localStorage.getItem("theme"); // 읽기

→ 브라우저에 간단한 데이터 영구 저장.

3. Fetch API

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data));

→ 서버에서 JSON 데이터 비동기 로드.

---

💡 Browser APIs의 특징

• 브라우저 종속성: Chrome, Firefox마다 지원 범위 다름 (예: IE는 최신 API 미지원).
• 보안 제약: 사용자 권한 필요 (예: 카메라 접근 시 allow 팝업 표시).
• 이벤트 기반: 대부분의 API는 콜백 또는 Promise 반환.

---

🚀 현실적 적용 사례

1. 드래그 앤 드롭
   • Drag & Drop API로 파일 업로더 구현.
2. 알림 기능
   • Notification API로 브라우저 알림 표시.
3. 오프라인 앱
   • Service Worker API로 오프라인 캐싱.

---

🔍 웹 API vs JavaScript 코어

구분	JavaScript (ECMAScript)	Browser APIs
정의	언어 자체의 문법 (예: Array.map())	브라우저가 추가로 제공하는 기능
실행 환경	모든 JS 런타임 (Node.js 포함)	브라우저 전용
예시	Promise, async/await	document.querySelector()

---

✨ 결론

Browser APIs는 웹을 "앱 수준"으로 발전시키는 도구입니다.
최신 API들은 PWA(Progressive Web Apps), 웹 게임, AR/VR까지 가능하게 확장 중입니다!

TIP: MDN Web Docs에서 API 호환성과 사용법을 꼭 확인하세요.