9 Native Browser APIs You Might Be Reinventing Capsule

Summary#

라이브러리 설치 전에 "브라우저가 이미 해결해놨나?"를 먼저 묻자. 모던 브라우저에 내장된 9개 API는 수많은 의존성을 없애준다. 아래는 자주 간과되는 것들.

Claim#

1. requestIdleCallback(cb) — 유휴 시간 작업#

렌더링 완료 후 남는 유휴 시간에 저우선 작업(analytics, 프리페치, 인덱싱) 실행. Safari 구버전 폴백은 setTimeout.

if ('requestIdleCallback' in window) requestIdleCallback(trackScrolling);
else setTimeout(trackScrolling, 0);

2. :focus-within — 자식 focus 시 부모 스타일#

JS 없이 input focus 시 form wrapper 강조.

.form-field:focus-within { border-color: hotpink; }

3. navigator.onLine + online/offline 이벤트 — PWA 오프라인 대응#

주의: "online" ≠ "내 백엔드 OK". 요청 실패 폴백 필요.

window.addEventListener('offline', () => saveToIndexedDB());
window.addEventListener('online',  () => syncQueue());

4. requestAnimationFrame — 브라우저 리페인트와 동기화#

setInterval(fn, 16) 대신 rAF 사용 — 탭이 백그라운드면 자동 정지.

function tick(){ el.style.transform = `translateX(${Date.now()%300}px)`; requestAnimationFrame(tick); }
requestAnimationFrame(tick);

5. Container queries — 부모 컨테이너 기준 반응형#

media query는 viewport 기준. 컴포넌트 기준 분기가 필요하면 container query.

.wrap { container-type: inline-size; }
@container (min-width: 400px) { .card { grid-template-columns: 1fr 2fr; } }

6. crypto.getRandomValues(buf) — 양질 난수#

Math.random().toString(36) 금지 — 충돌 확률 높고 엔진 구현 의존.

const bytes = new Uint8Array(8); crypto.getRandomValues(bytes);
const id = Array.from(bytes).map(b => b.toString(16).padStart(2,'0')).join('');

UUIDv4는 crypto.randomUUID() 한 줄.

7. <dialog> — 네이티브 모달#

접근성(focus trap, Escape close) 기본 제공. 기존 modal 라이브러리 12KB 제거 가능.

<dialog id="m"><p>Deploy on Friday?</p><button onclick="m.close()">취소</button></dialog>
<script>m.showModal();</script>

8. <details>/<summary> — 접기/펼치기#

React Accordion 라이브러리 불필요. 키보드 접근성 기본.

<details><summary>FAQ</summary><p>여기에 답변</p></details>

9. @supports — CSS 피처 감지#

JS 없이 폴백 CSS 분기.

.card { background: white; }
@supports (backdrop-filter: blur(10px)) {
  .card { backdrop-filter: blur(10px); background: rgba(255,255,255,.6); }
}

Scope#

• Chrome/Edge/Firefox 최근 2년 버전에서 모두 동작
• Safari는 requestIdleCallback 늦게 지원 — 폴백 유지

Caveats#

• :focus-within, <dialog>, container queries는 모두 Baseline 2023+ — 타겟 브라우저 확인
• crypto.randomUUID()는 HTTPS 또는 localhost 필요 (secure context)
• <dialog>의 ::backdrop은 브라우저마다 기본 스타일 다름 — 명시적 스타일 권장

Source#

• Post: https://dev.to/sylwia-lask/9-things-youre-overengineering-the-browser-already-solved-them-o99 — by Sylwia Laskowska
• Published: 2026-04-02
• License: fair-use-summary (dev.to 저자 저작권 유지, 요약·설명 목적)
• 조회일: 2026-04-19

Sagwan Revalidation 2026-04-18T23:31:17Z#

• verdict: ok
• note: 9개 API 모두 2026년 현재 주요 브라우저에서 안정 지원; Safari의 requestIdleCallback 폴백은 보수적이나 여전히 유효.