JS 라이브러리 대신 10개의 네이티브 웹 API

네이티브 웹 API: 인기 있는 JS 라이브러리 대체 기술 10가지

Fetch는 Axios, jQuery.ajax 등과 같은 라이브러리를 대체합니다. 2017년부터 모든 최신 브라우저에서 사용 가능하며, 프로미스, 스트리밍, 모든 HTTP 메서드를 지원합니다.

Axios 예시:

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: { 'Content-Type': 'application/json' }
});

const { data: users } = await api.get('/users');

네이티브 대안:

const BASE_URL = 'https://api.example.com';

const res = await fetch(`${BASE_URL}/users`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const users = await res.json();

const res2 = await fetch(`${BASE_URL}/users`, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Marvel', role: 'developer' })
});
const newUser = await res2.json();

취소를 원할 경우 AbortController 사용:

const controller = new AbortController();
fetch('/api/data', { signal: controller.signal });
controller.abort();

라이브러리 사용 시기: 인터셉터, 재시도 로직, 중앙 집중식 인증이 필요한 대규모 프로젝트에서는 여전히 유용합니다.

폼 데이터 직렬화를 위한 FormData

FormData는 수동 파싱 없이 폼 데이터(파일 포함) 수집을 자동화합니다. 2015년부터 사용 가능합니다.

수동 처리 대신:

const formData = new FormData(form);

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  await fetch('/api/upload', {
    method: 'POST',
    body: formData
  });
});

프로그래밍 방식 생성:

const formData = new FormData();
formData.append('name', 'Marvel');
formData.append('avatar', fileInput.files[0]);

브라우저는 자동으로 multipart/form-data와 경계값을 설정합니다.

제한 사항: 내장 검증이나 다단계 폼 상태 관리 기능 없음 — 이 경우 React Hook Form 또는 Formik 활용하세요.

링크 파싱을 위한 URL 및 URLSearchParams

네이티브 URL과 URLSearchParams 클래스는 정규표현식과 URL.js 같은 라이브러리를 대체합니다. 2018년부터 완전 지원됩니다.

const url = new URL('https://example.com/search?q=web+apis&page=2&sort=recent#results');

url.hostname; // 'example.com'
url.searchParams.get('q'); // 'web apis'

url.searchParams.set('page', '3');
url.searchParams.append('filter', 'new');
console.log(url.toString());

쿼리 문자열 생성:

const params = new URLSearchParams({ q: 'hello world', page: '1' });
params.toString(); // 'q=hello+world&page=1'

자동 인코딩/디코딩으로 파싱 오류 방지됩니다.

부유 요소를 위한 Popover API

2025년 1월 기준 (Chrome 114+, Firefox 125+, Safari 17+) Popover API는 Floating UI나 Tippy.js 없이 툴팁, 드롭다운, 팝오버를 구현할 수 있게 해줍니다.

HTML 마크업:

<button popovertarget="my-popover">팝오버 토글</button>
<div id="my-popover" popover>팝오버 내용</div>

프로그래밍 제어:

const popover = document.querySelector('#my-popover');
popover.showPopover();
popover.hidePopover();

스타일링:

#my-popover:popover-open {
  animation: fadeIn 0.2s ease-out;
}
#my-popover::backdrop {
  background: rgba(0, 0, 0, 0.15);
}

최상위 층, 경량 닫기(ESC 또는 외부 클릭), 포커스 트랩, 키보드 탐색 등 내장 기능 제공.

popover="auto" — 자동 닫기, popover="manual" — 명시적 닫기.

라이브러리가 더 좋은 경우: 미들웨어(플립, 시프트)를 통한 정밀한 위치 조정이 필요할 때.

네이티브 API의 장점

내장 인터페이스로 전환하면 다음과 같은 이점이 있습니다:

• 배럴 사이즈 0 — 브라우저 엔진에 포함된 기능
• 성능 향상 — 가능한 한 메인 스레드에서 분리 실행
• 유지보수 용이 — 브라우저 제조사의 업데이트 반영
• 호환성 우수 — Node.js에서도 사용 가능 (지원 시)
• 보안 강화 — 제3자 코드 없이 안전함

핵심 포인트

• 네이티브 API는 일반적인 작업의 80~90%를 커버해 의존성 감소 가능
• Fetch + AbortController는 기본 HTTP 클라이언트를 완전히 대체
• FormData는 라이브러리 없이 95%의 폼 업로드 시나리오 처리 가능
• URLSearchParams는 정규표현식 관련 파싱 오류 완전 제거
• Popover API는 접근성 기반 UI 컴포넌트 표준화

이러한 인터페이스들은 중급 이상 프로젝트를 기능 손실 없이 최적화할 수 있게 합니다.

— Editorial Team