웹 엔지니어가 꼭 알아야 할 10가지 웹 API!

자바스크립트에는 사용률이 상대적으로 낮을 수 있는 API들이 있습니다. 이하에서는 각각의 사용법과 사용 시나리오를 하나씩 소개합니다.

Blob API

Blob API는 이진 데이터를 처리하는 데 사용되며, Blob 객체로 데이터를 쉽게 변환하거나 Blob 객체에서 데이터를 읽을 수 있습니다.

// Blob 객체 생성
const myBlob = new Blob(["안녕, 세상!"], { type: "text/plain" });
// Blob 객체의 데이터 읽기
const reader = new FileReader();
reader. addEventListener("loadend", () => {
  console.log(reader.result);
});
reader.readAsText(myBlob);

• 사용 시나리오: 웹 애플리케이션에서 이진 파일을 업로드하거나 다운로드해야 할 수 있으며, 이러한 데이터는 Blob API를 사용하여 편리하게 처리할 수 있습니다.
• 사용 예: 사용자가 선택한 이미지나 문서를 웹 앱에 업로드 할 때, Blob API를 이용하여 해당 파일을 바이너리 형태로 처리하고 서버로 전송합니다.
• 유용한 사이트: 이미지 편집 플랫폼, 파일 공유 서비스, 문서 관리 시스템

WeakSet

WeakSet은 Set과 유사하지만 약하게 참조된 객체를 저장할 수 있습니다. 다른 참조가 객체를 가리키고 있지 않으면 객체는 수동으로 WeakSet에서 제거하지 않고도 가비지 컬렉터에 의해 회수될 수 있습니다.

const myWeakSet = new WeakSet();
const obj1 = {};
const obj2 = {};
myWeakSet.add(obj1);
myWeakSet.add(obj2);
console.log(myWeakSet.has(obj1)); // true
obj1 = null;
console.log(myWeakSet.has(obj1)); // false

• 사용 시나리오: 일시적인 객체를 저장해야 할 때가 있지만, 이러한 객체가 너무 많은 메모리를 차지하지 않길 원할 수 있습니다. 이러한 객체들은 WeakSet을 사용하여 쉽게 관리할 수 있습니다.
• 사용 예: 객체의 메모리 누수를 방지하기 위해 일시적으로 참조해야하는 객체를 WeakSet에 저장합니다. 이렇게 하면 객체가 다른 곳에서 참조되지 않는 경우 가비지 컬렉션 대상이 됩니다.
• 유용한 사이트: 싱글 페이지 애플리케이션, 메모리 관리가 중요한 대규모 웹 애플리케이션

TextEncoder와 TextDecoder

TextEncoder와 TextDecoder는 문자열과 바이트 시퀀스 간의 변환을 처리하는 데 사용됩니다. 문자열을 바이트 시퀀스로 인코딩하거나 바이트 시퀀스를 문자열로 디코딩하는 데 유용합니다.

const encoder = new TextEncoder();
const decoder = new TextDecoder();
const myString = "안녕, 세상!";
const myBuffer = encoder.encode(myString);
console.log(myBuffer); // Uint8Array(13) [72, 101, 108, 108, 111, 44, 32, 119, 111, 114, 108, 100, 33]
const decodedString = decoder.decode(myBuffer);
console.log(decodedString); // "안녕, 세상!"

• 사용 시나리오: 웹 애플리케이션에서 문자열을 이진 데이터로 변환하거나, 이진 데이터를 문자열로 변환해야 할 수 있습니다. 이러한 변환들은 TextEncoder와 TextDecoder를 사용하여 편리하게 수행됩니다.
• 사용 예: 사용자가 입력한 텍스트를 바이트 배열로 인코딩하거나, 서버에서 받은 바이트 배열 데이터를 문자열로 디코딩할 때 사용합니다.
• 유용한 사이트: 데이터 암호화 서비스, 통신 앱, 문자 메시징 플랫폼

Proxy API

Proxy API는 프록시 객체를 생성하는 데 사용될 수 있으며, 객체 속성을 읽거나 할당하는 등의 연산을 가로챌 수 있습니다. 이 기능은 메타프로그래밍과 데이터 하이재킹과 같은 기능을 구현하는 데 사용될 수 있습니다.

const myObject = {
 name: "John",
 age: 30,
};
const myProxy = new Proxy(myObject, {
 get(target, property) {
 console.log(`속성 ${property} 가져오기`);
 return target[property];
 },
 set(target, property, value) {
 console.log(`속성 ${property}를 ${value}로 설정`);
 target[property] = value;
 },
});
console.log(myProxy.name); // "John"
myProxy.age = 31; // 속성 age를 31로 설정

• 사용 시나리오: 경우에 따라 객체 속성을 읽거나 할당하는 연산을 가로채서 더 고급 기능을 구현해야 할 수 있습니다. 이러한 기능들은 Proxy API를 사용하여 쉽게 구현될 수 있습니다.
• 사용 예: 객체의 속성 접근이나 변경을 감지하고 싶을 때, Proxy API를 사용하여 객체에 대한 특정 작업을 가로챕니다.
• 유용한 사이트: 웹 기반 IDE, 데이터 바인딩 프레임워크, 설정 관리 대시보드

IntersectionObserver

IntersectionObserver는 요소가 뷰포트에 들어오는지 감지하는 데 사용될 수 있으며, 무한 스크롤링과 지연 로딩과 같은 기능을 구현하는 데 사용될 수 있습니다.

const myObserver = new IntersectionObserver((entries, observer) => {
 entries.forEach((entry) => {
 if (entry.isIntersecting) {
 console.log(`${entry.target.id}가 이제 보입니다`);
 observer.unobserve(entry.target);
 }
 });
});
const myElement = document.getElementById("myElement");
myObserver.observe(myElement);

• 사용 시나리오: 웹 애플리케이션에서 무한 스크롤링과 지연 로딩과 같은 기능들을 구현해야 할 때가 있고, 이러한 기능들은 IntersectionObserver를 사용하여 편리하게 구현될 수 있습니다.
• 사용 예: 웹페이지에서 사용자가 특정 섹션에 스크롤하면 애니메이션을 시작하거나, 광고를 로드할 때 IntersectionObserver를 사용합니다.
• 유용한 사이트: 뉴스 포털, 블로그, 쇼핑몰

Clipboard API

Clipboard API는 사용자의 클립보드에 대한 액세스를 제공하며, 텍스트와 이미지를 클립보드에 복사하거나 클립보드에서 붙여넣기하는 데 사용될 수 있습니다.

navigator.clipboard.writeText("안녕, 세상!")
.then(() => {
 console.log("텍스트가 클립보드에 복사되었습니다");
})
.catch((error) => {
 console.error("텍스트를 클립보드에 복사하는 도중 오류가 발생했습니다", error);
});

• 사용 시나리오: 웹 애플리케이션에서 사용자에게 텍스트나 이미지를 복사하거나 붙여넣게 하는 기능을 제공하려면 Clipboard API를 사용할 수 있습니다.
• 사용 예: 사용자가 웹 앱 내의 텍스트나 이미지를 클립보드에 복사하거나 붙여넣기 할 때 Clipboard API를 사용합니다.
• 유용한 사이트: 코드 공유 서비스, 텍스트 편집기, 디자인 플랫폼

BroadcastChannel

BroadcastChannel API는 동일한 출처의 다른 창, 탭, 또는 프레임 간에 데이터를 전송하는 데 사용될 수 있습니다. 이 기능은 창 간의 간단한 통신을 구현하는 데 사용될 수 있습니다.

const myChannel = new BroadcastChannel("myChannel");
myChannel.postMessage("안녕, 세상!");
myChannel.onmessage = (event) => {
 console.log(`메시지 수신: ${event.data}`);
};

• 사용 시나리오: 웹 애플리케이션에서 다양한 창, 탭, 또는 프레임 간에 간단한 데이터를 전송해야 할 때가 있고, 이러한 통신은 BroadcastChannel API를 사용하여 쉽게 구현될 수 있습니다.
• 사용 예: 동일한 브라우저 내 여러 탭이나 창에서 데이터를 실시간으로 공유하고 싶을 때 BroadcastChannel을 사용합니다.
• 유용한 사이트: 웹 기반 채팅 앱, 다중 탭 동기화 도구, 웹 게임

ResizeObserver

ResizeObserver는 요소의 크기 변경을 감지하는 데 사용될 수 있습니다. 이 기능은 요소의 크기에 따라 동적으로 스타일을 조정하는 데 사용될 수 있습니다.

const myObserver = new ResizeObserver((entries, observer) => {
 entries.forEach((entry) => {
 console.log(`${entry.target.id}의 크기가 변경되었습니다`);
 });
});
const myElement = document.getElementById("myElement");
myObserver.observe(myElement);

• 사용 시나리오: 웹 애플리케이션에서 요소의 크기에 따라 동적으로 스타일을 조정해야 할 때가 있고, 이러한 스타일 조정은 ResizeObserver를 사용하여 쉽게 구현될 수 있습니다.
• 사용 예: 웹페이지의 특정 요소의 크기 변경을 감지하고, 그에 따라 레이아웃이나 스타일을 동적으로 조정할 때 사용합니다.
• 유용한 사이트: 대화형 웹 애플리케이션, UI/UX 디자인 툴, 반응형 웹 사이트

IndexedDB

IndexedDB는 브라우저에서 구조화된 데이터를 저장하는 데 사용될 수 있으며, 오프라인 데이터 저장과 검색에 사용될 수 있습니다.

const openRequest = indexedDB.open("myDatabase", 1);
openRequest.onupgradeneeded = (event) => {
 const db = event.target.result;
 const store = db.createObjectStore("myStore", { keyPath: "id" });
 store.createIndex("name", "name", { unique: false });
};
openRequest.onsuccess = (event) => {
 const db = event.target.result;
 const transaction = db.transaction(["myStore"], "readwrite");
 const store = transaction.objectStore("myStore");
 store.add({ id: 1, name: "John" });
 store.add({ id: 2, name: "Jane" });
};

• 사용 시나리오: 웹 애플리케이션에서 오프라인 데이터 저장과 검색을 구현해야 할 때가 있고, 이러한 기능들은 IndexedDB를 사용하여 쉽게 구현될 수 있습니다.
• 사용 예: 웹 앱에서 대량의 데이터를 클라이언트 측에서 비동기적으로 저장하고 검색할 때 IndexedDB를 사용합니다.
• 유용한 사이트: 오프라인 웹 앱, 프로젝트 관리 도구, 데이터 분석 대시보드

FinalizationRegistry

FinalizationRegistry는 객체가 가비지 컬렉터에 의해 회수될 때 사용자 정의 연산을 실행하는 데 사용될 수 있습니다. 이 기능은 메모리 누수를 방지하는 데 도움이 될 수 있습니다.

const myRegistry = new FinalizationRegistry((value) => {
 console.log(`가비지 컬렉터에 의해 회수된 객체: ${value}`);
});
const myObject = {};
myRegistry.register(myObject, "myObject");
myObject = null;

• 사용 시나리오: 웹 애플리케이션에서 메모리 누수를 방지하거나, 가비지 컬렉터에 의해 회수된 객체에 대한 사용자 정의 연산을 실행하려면 FinalizationRegistry를 사용할 수 있습니다.
• 사용 예: 객체가 가비지 컬렉션에 의해 수거되었을 때 커스텀 로직을 실행하고 싶을 때 FinalizationRegistry를 사용합니다.
• 유용한 사이트: 웹 기반 개발 도구, 메모리 관리 도구, 대규모 웹 애플리케이션

이상 10가지의 웹 API를 간략하게 살펴보았습니다. 각 API의 사용 시나리오에 따라 필요한 API를 선택하여 웹 애플리케이션 개발에 활용해 보세요!

각 API와 기능은 웹 애플리케이션 개발에서 중요한 역할을 합니다. 웹 개발자는 이러한 API를 활용하여 더욱 효율적이고 다양한 기능을 제공하는 웹 사이트와 애플리케이션을 제작할 수 있습니다.