라이브러리 설치를 멈추세요: 이미 문제를 해결해 주는 10가지 Browser API
Source: Dev.to
웹 플랫폼은 대부분의 개발자가 생각하는 것보다 더 강력하며, 매년 조용히 새로운 초능력을 얻고 있습니다. 아래는 외부 라이브러리를 끌어오는 대신 사용할 수 있는, 사용이 저조한 10가지 브라우저 API이며, 이를 통해 코드를 더 깔끔하고, 빠르며, 신뢰성 있게 만들 수 있습니다.
Structured Clone (structuredClone)
대부분의 내장 타입을 처리하는 한 줄짜리 깊은 복사이며, Map, Set, Date, Blob, File, ArrayBuffer 등을 포함합니다. 순환 참조도 정상적으로 복제하므로 (JSON‑stringify 로 인한 폭발이 더 이상 발생하지 않음) 함수는 복제되지 않음에 유의하세요.
const copy = structuredClone(original);지원: 최신 브라우저(Chrome, Firefox, Safari, Edge)에서 사용 가능. 프로덕션 환경에서도 안전합니다.
Performance API (performance.mark / performance.measure)
마이크로‑벤치마크, Web Worker나 WASM이 오버헤드 대비 가치가 있는지 확인하거나, 단순히 가정들을 현실과 비교할 때 유용합니다.
performance.mark('start');
// code to measure
performance.mark('end');
performance.measure('calc', 'start', 'end');
console.log(performance.getEntriesByName('calc'));지원: 최신 브라우저 전반에 걸쳐 뛰어납니다.
Page Visibility API
탭이 숨겨지거나 표시될 때를 감지하여 비디오를 일시 정지하거나, 폴링을 중지하거나, CPU 사용량을 줄일 수 있습니다.
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
video.pause();
}
});지원: 모든 최신 브라우저.
ResizeObserver
Observe size changes of any element—not just the window—making responsive components, charts, and dashboards far easier to implement.
const ro = new ResizeObserver(entries => {
for (const entry of entries) {
console.log(entry.contentRect.width);
}
});
ro.observe(element);지원: 최신 브라우저에서 사용 가능하며, 널리 지원됩니다.
IntersectionObserver
요소가 뷰포트에 들어오거나 나갈 때를 감지합니다. 무한 스크롤, 레이지 로딩, 스크롤 기반 애니메이션에 적합합니다.
const io = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log('Visible!');
}
});
});
io.observe(element);지원: 모든 최신 브라우저.
AbortController
Clean하고 확장 가능한 패턴으로 fetch 요청 및 기타 중단 가능한 API(예: 스트림, 이벤트 리스너)를 취소합니다.
const controller = new AbortController();
fetch(url, { signal: controller.signal })
.catch(err => {
if (err.name === 'AbortError') console.log('Fetch aborted');
});
// later
controller.abort();지원: 모든 최신 브라우저.
IdleDetector
사용자(또는 장치)가 유휴 상태인지 감지하여 자동 로그아웃, “자리 비움” 상태, 혹은 백그라운드 최적화를 가능하게 합니다.
const detector = new IdleDetector();
await detector.start();
detector.addEventListener('change', () => {
console.log(detector.userState); // "active", "idle", etc.
});지원: 주로 Chromium 기반 브라우저; 사용자 권한이 필요합니다.
BroadcastChannel
Simple, multi‑tab communication without a server round‑trip.
const channel = new BroadcastChannel('app');
channel.postMessage('logout');
channel.onmessage = e => {
console.log(e.data);
};Support: Modern browsers (Safari added support later).
Web Locks API
탭 간에 공유 자원을 조정하여 동일한 데이터에 대한 여러 번의 fetch와 같은 중복 작업을 방지합니다.
navigator.locks.request('data-lock', async lock => {
await fetchData(); // only one tab runs this at a time
});지원: 주로 Chromium 기반 브라우저에서 지원되며, 아직 모든 브라우저에서 지원되는 것은 아닙니다.
파일 시스템 액세스 API
웹 앱에 실제 파일‑시스템 기능을 제공—편집기, 가져오기/내보내기 도구, 그리고 파워‑유저 애플리케이션에 이상적입니다.
const [fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();지원: Chromium‑중심 브라우저; 다른 곳에서는 제한적.
마무리 생각
이 API들은 대부분 최신 브라우저에서 잘 지원되지만, 사용하기 전에 호환성을 반드시 다시 확인하세요. 존재한다는 사실만으로도 서드‑파티 라이브러리 의존도를 크게 줄이고 코드베이스를 가볍게 유지할 수 있습니다.
아무도 이야기하지 않는 당신이 가장 좋아하는 저평가된 Web API는 무엇인가요?
(이번 4월 이탈리아에 계신다면, jsday.it에서 WebGPU + WASM에 관한 제 강연을 들어보세요.)