liminfoWeb API Reference
브라우저 Web API 레퍼런스
Web API Reference 소개
Web API 레퍼런스는 JavaScript 개발자가 매일 사용하는 필수 브라우저 API를 다루는 검색 가능한 치트 시트입니다. DOM 조작 메서드(querySelector, createElement, addEventListener, classList, MutationObserver, IntersectionObserver, ResizeObserver), AbortController 취소와 Response 처리를 포함한 Fetch API 패턴, localStorage, sessionStorage, 구조화된 데이터를 위한 IndexedDB, Service Worker 캐싱 전략을 위한 Cache API를 아우르는 스토리지 API를 포함합니다.
기본 사항 외에도 toDataURL/toBlob 내보내기와 Web Worker 그래픽을 위한 OffscreenCanvas를 포함한 Canvas 2D 렌더링, 세 가지 유형의 Worker(백그라운드 스레드용 Web Worker, 탭 간 통신용 SharedWorker, 오프라인 지원 및 네트워크 가로채기용 Service Worker), 실시간 통신 API(양방향 스트리밍용 WebSocket, 서버 푸시용 Server-Sent Events, 탭 간 메시지 전달용 BroadcastChannel), 클립보드 읽기/쓰기, Geolocation 위치 정보, Notification 알림, Performance 측정, Web Crypto 해싱 및 암호화, URL/URLSearchParams 파싱을 포함한 유틸리티 API를 다룹니다.
각 항목은 간결한 설명과 바로 사용할 수 있는 JavaScript 코드 스니펫을 제공합니다. 모든 콘텐츠는 서버 통신 없이 브라우저에서 렌더링됩니다. DOM, Fetch, Storage, Canvas, Workers, WebSocket, 기타 7개 카테고리로 정리되어 있습니다. 즉시 검색 필터링, 다크 모드, 데스크톱/태블릿/모바일 반응형 레이아웃을 지원합니다. 의존성이나 프레임워크 지식이 필요 없으며 모든 최신 브라우저에서 사용 가능한 네이티브 브라우저 API입니다.
주요 기능
- DOM API: querySelector, querySelectorAll, createElement, addEventListener, classList, innerHTML, setAttribute, 3가지 Observer API
- GET, JSON POST, AbortController 요청 취소, Headers 조작, Response 처리를 포함한 Fetch API 패턴
- 4가지 스토리지 API 비교: localStorage(영구), sessionStorage(탭 범위), IndexedDB(구조화), Cache API(HTTP 캐싱)
- Canvas 2D 그리기, toDataURL/toBlob 이미지 내보내기, Web Worker 렌더링을 위한 OffscreenCanvas
- postMessage 통신 예제를 포함한 Web Worker, SharedWorker, Service Worker 패턴
- 실시간 API: WebSocket 양방향 통신, Server-Sent Events 스트리밍, BroadcastChannel 탭 간 메시지
- 유틸리티 API: Clipboard 읽기/쓰기, Geolocation, Notification, Performance 마크, Web Crypto 다이제스트, URL 파싱
- 심층 참조 및 브라우저 호환성 확인을 위한 MDN 문서 링크 포함
자주 묻는 질문
이 레퍼런스는 어떤 브라우저 API를 다루나요?
7개 카테고리로 정리된 36개 필수 브라우저 API를 다룹니다: DOM(querySelector, createElement, addEventListener, classList, MutationObserver, IntersectionObserver, ResizeObserver), Fetch(fetch GET/POST, AbortController, Headers, Response), Storage(localStorage, sessionStorage, IndexedDB, Cache API), Canvas(2D context, toDataURL, toBlob, OffscreenCanvas), Workers(Web Worker, SharedWorker, Service Worker), WebSocket(WebSocket, Server-Sent Events, BroadcastChannel), 기타(Clipboard, Geolocation, Notification, Performance, Web Crypto, URL).
Fetch API 예제는 어떻게 사용하나요?
바로 사용할 수 있는 코드 스니펫을 제공합니다. 기본 GET 요청: "const res = await fetch('/api/data'); const data = await res.json();". POST: method, Content-Type 헤더, JSON.stringify한 body를 포함합니다. AbortController 항목은 ctrl.abort()로 진행 중인 요청을 취소하는 방법을 보여줍니다. 모든 예제는 최신 async/await 구문을 사용하며 브라우저 콘솔이나 프로젝트 코드에 직접 붙여넣을 수 있습니다.
localStorage와 IndexedDB의 차이점은 무엇인가요?
localStorage는 문자열 값, 동기 접근, 오리진당 약 5MB 저장 한도를 가진 간단한 키-값 저장소로 작은 설정과 환경설정에 이상적입니다. IndexedDB는 인덱스를 지원하는 구조화된 데이터, 비동기 접근, 훨씬 큰 저장 용량(수백 MB)을 가진 트랜잭션 데이터베이스입니다. 사용자 환경설정 같은 간단한 데이터에는 localStorage를, 오프라인 캐시, 대용량 데이터셋, 앱 상태 같은 복잡한 구조화 데이터에는 IndexedDB를 사용하세요.
Web Worker와 Service Worker는 언제 사용해야 하나요?
Web Worker는 메인 UI 스레드 차단을 방지하기 위해 백그라운드 스레드에서 JavaScript를 실행합니다. 데이터 처리, 이미지 조작, 복잡한 계산 같은 CPU 집약적 작업에 사용하세요. Service Worker는 네트워크와 페이지 사이에서 fetch 요청을 가로채 오프라인 지원, 캐싱 전략, 푸시 알림을 제공합니다. SharedWorker는 여러 탭/프레임이 단일 워커 인스턴스를 공유하여 상태를 조정할 수 있게 합니다.
Observer API는 어떻게 작동하나요?
세 가지 Observer API는 효율적인 이벤트 기반 모니터링을 제공합니다. MutationObserver는 DOM 변경(자식 추가, 속성 수정)을 감시합니다. IntersectionObserver는 요소가 뷰포트에 진입하거나 나갈 때를 감지하며 이미지 지연 로딩과 무한 스크롤에 필수적입니다. ResizeObserver는 요소 크기 변경 시 발동하며 반응형 컴포넌트 로직에 유용합니다. 세 가지 모두 observe() 메서드를 사용하는 콜백 패턴이며 폴링이나 스크롤 이벤트 리스너보다 성능이 우수합니다.
어떤 실시간 통신 옵션이 있나요?
WebSocket은 지속적 연결을 통한 전이중 양방향 통신을 제공하며 채팅, 게임, 실시간 데이터 피드에 이상적입니다. Server-Sent Events(EventSource)는 HTTP를 통한 단방향 서버-클라이언트 스트리밍으로 서버 푸시만 필요할 때 WebSocket보다 간단합니다. BroadcastChannel은 서버 없이 같은 오리진 내 탭 간 메시지를 전달하며 같은 앱의 여러 탭에서 상태를 동기화하는 데 유용합니다.
이 API들은 모든 브라우저에서 사용할 수 있나요?
이 레퍼런스의 API는 모든 최신 에버그린 브라우저(Chrome, Firefox, Safari, Edge)에서 지원됩니다. OffscreenCanvas, BroadcastChannel, 특정 Web Crypto 메서드 같은 최신 API는 이전 브라우저 버전에서 부분 지원될 수 있습니다. 각 항목에는 상세한 브라우저 호환성 표를 확인할 수 있는 MDN 링크가 포함되어 있습니다. 핵심 API(DOM, Fetch, localStorage, Canvas, Web Worker, WebSocket)는 모든 현재 브라우저에서 폭넓게 지원됩니다.
이 레퍼런스는 특정 프레임워크에 종속되나요?
아닙니다. 이 레퍼런스의 모든 API는 JavaScript에 내장된 네이티브 브라우저 API로 프레임워크나 라이브러리 없이 사용할 수 있습니다. 순수 JavaScript, React, Vue, Angular, Svelte 등 모든 프레임워크에서 작동합니다. 코드 예제는 일반 JavaScript 구문을 사용하므로 어떤 프로젝트에든 적용할 수 있습니다. 간단한 정적 페이지부터 복잡한 SPA까지 유용합니다.