AbortController API: 요청 취소 및 리소스 관리 마스터하기

최신 웹 개발에서 비동기 작업을 효율적으로 관리하는 것은 반응성이 뛰어나고 성능이 좋은 애플리케이션을 구축하는 데 매우 중요합니다. AbortController API는 요청을 취소하고 리소스를 관리하는 강력한 메커니즘을 제공하여 더 나은 사용자 경험을 보장하고 불필요한 오버헤드를 방지합니다. 이 종합 가이드에서는 AbortController API의 핵심 개념, 실제 사용 사례 및 고급 기술에 대해 자세히 살펴봅니다.

AbortController API란 무엇인가?

AbortController API는 하나 이상의 웹 요청을 중단할 수 있게 해주는 내장 JavaScript API입니다. 이는 두 가지 주요 구성 요소로 이루어져 있습니다:

• AbortController: 취소 프로세스를 시작하는 컨트롤러 객체입니다.
• AbortSignal: AbortController와 연결된 신호 객체로, 취소 신호를 수신하기 위해 비동기 작업(예: fetch 요청)에 전달됩니다.

AbortController에서 abort() 메서드가 호출되면, 연결된 AbortSignal은 abort 이벤트를 발생시키고, 비동기 작업은 이를 수신하여 적절하게 응답할 수 있습니다. 이를 통해 요청을 정상적으로 취소하여 불필요한 데이터 전송 및 처리를 방지할 수 있습니다.

핵심 개념

1. AbortController 생성하기

AbortController API를 사용하려면 먼저 AbortController 클래스의 인스턴스를 생성해야 합니다:

const controller = new AbortController();

2. AbortSignal 가져오기

AbortController 인스턴스는 signal 속성을 통해 AbortSignal 객체에 접근할 수 있습니다:

const signal = controller.signal;

3. 비동기 작업에 AbortSignal 전달하기

AbortSignal은 제어하려는 비동기 작업에 옵션으로 전달됩니다. 예를 들어, fetch API를 사용할 때 옵션 객체의 일부로 signal을 전달할 수 있습니다:

fetch('/api/data', { signal })
 .then(response => response.json())
 .then(data => {
 console.log('Data received:', data);
 })
 .catch(error => {
 if (error.name === 'AbortError') {
 console.log('Fetch aborted');
 } else {
 console.error('Fetch error:', error);
 }
 });

4. 요청 중단하기

요청을 취소하려면 AbortController 인스턴스에서 abort() 메서드를 호출합니다:

controller.abort();

이렇게 하면 연결된 AbortSignal에서 abort 이벤트가 발생하여 fetch 요청이 AbortError와 함께 거부됩니다.

실용적인 사용 사례

1. Fetch 요청 취소하기

AbortController API의 가장 일반적인 사용 사례 중 하나는 fetch 요청을 취소하는 것입니다. 이는 사용자가 페이지에서 벗어나거나 진행 중인 요청을 불필요하게 만드는 작업을 수행하는 시나리오에서 특히 유용합니다. 사용자가 전자 상거래 웹사이트에서 제품을 검색하는 시나리오를 생각해 보세요. 이전 검색 요청이 완료되기 전에 사용자가 새로운 검색어를 입력하면, AbortController를 사용하여 이전 요청을 취소하고 대역폭과 처리 능력을 절약할 수 있습니다.

let controller = null;

function searchProducts(query) {
 if (controller) {
 controller.abort();
 }

 controller = new AbortController();
 const signal = controller.signal;

 fetch(`/api/products?q=${query}`, { signal })
 .then(response => response.json())
 .then(products => {
 displayProducts(products);
 })
 .catch(error => {
 if (error.name === 'AbortError') {
 console.log('Search aborted');
 } else {
 console.error('Search error:', error);
 }
 });
}

function displayProducts(products) {
 // UI에 제품 표시
 console.log('Products:', products);
}

// 사용 예시:
searchProducts('shoes');
searchProducts('shirts'); // 'shoes'에 대한 이전 검색을 취소함

2. 타임아웃 구현하기

AbortController API는 비동기 작업에 대한 타임아웃을 구현하는 데에도 사용할 수 있습니다. 이는 서버가 응답하지 않을 경우 요청이 무기한 대기 상태에 빠지는 것을 방지합니다. 이는 네트워크 지연이나 서버 문제로 인해 요청이 예상보다 오래 걸릴 수 있는 분산 시스템에서 중요합니다. 타임아웃을 설정하면 애플리케이션이 결코 도착하지 않을 수 있는 응답을 기다리며 멈추는 것을 방지할 수 있습니다.

async function fetchDataWithTimeout(url, timeout) {
 const controller = new AbortController();
 const signal = controller.signal;

 const timeoutId = setTimeout(() => {
 controller.abort();
 }, timeout);

 try {
 const response = await fetch(url, { signal });
 clearTimeout(timeoutId);
 return await response.json();
 } catch (error) {
 clearTimeout(timeoutId);
 if (error.name === 'AbortError') {
 throw new Error('Request timed out');
 } else {
 throw error;
 }
 }
}

// 사용 예시:
fetchDataWithTimeout('/api/data', 5000) // 5초 타임아웃
 .then(data => {
 console.log('Data received:', data);
 })
 .catch(error => {
 console.error('Error:', error.message);
 });

3. 여러 비동기 작업 관리하기

AbortController API는 여러 비동기 작업을 동시에 관리하는 데 사용할 수 있습니다. 이는 관련된 요청 그룹을 취소해야 하는 시나리오에서 유용합니다. 예를 들어, 여러 소스에서 데이터를 가져오는 대시보드 애플리케이션을 상상해 보세요. 사용자가 대시보드에서 벗어나면 모든 보류 중인 요청을 취소하여 리소스를 확보해야 합니다.

const controller = new AbortController();
const signal = controller.signal;

const urls = [
 '/api/data1',
 '/api/data2',
 '/api/data3'
];

async function fetchData(url) {
 try {
 const response = await fetch(url, { signal });
 return await response.json();
 } catch (error) {
 if (error.name === 'AbortError') {
 console.log(`Fetch aborted for ${url}`);
 } else {
 console.error(`Fetch error for ${url}:`, error);
 }
 throw error;
 }
}

Promise.all(urls.map(fetchData))
 .then(results => {
 console.log('All data received:', results);
 })
 .catch(error => {
 console.error('Error fetching data:', error);
 });

// 모든 요청을 취소하려면:
controller.abort();

고급 기술

1. 이벤트 리스너와 함께 AbortController 사용하기

AbortController API는 이벤트 리스너를 관리하는 데에도 사용할 수 있습니다. 이는 컴포넌트가 마운트 해제되거나 특정 이벤트가 발생할 때 이벤트 리스너를 정리하는 데 유용합니다. 예를 들어, 사용자 지정 비디오 플레이어를 만들 때 'play', 'pause', 'ended' 이벤트에 대한 이벤트 리스너를 연결할 수 있습니다. AbortController를 사용하면 플레이어가 더 이상 필요하지 않을 때 이러한 리스너가 제대로 제거되어 메모리 누수를 방지할 수 있습니다.

function addEventListenerWithAbort(element, eventType, listener, signal) {
 element.addEventListener(eventType, listener);

 signal.addEventListener('abort', () => {
 element.removeEventListener(eventType, listener);
 });
}

// 사용 예시:
const controller = new AbortController();
const signal = controller.signal;
const button = document.getElementById('myButton');

function handleClick() {
 console.log('Button clicked!');
}

addEventListenerWithAbort(button, 'click', handleClick, signal);

// 이벤트 리스너를 제거하려면:
controller.abort();

2. AbortSignal 체이닝

경우에 따라 여러 AbortSignal을 함께 연결해야 할 수도 있습니다. 이를 통해 취소 신호의 계층 구조를 만들 수 있으며, 하나의 신호를 중단하면 모든 자식 신호가 자동으로 중단됩니다. 이는 여러 신호를 단일 신호로 결합하는 유틸리티 함수를 만들어 달성할 수 있습니다. 여러 컴포넌트가 서로 의존하는 복잡한 워크플로우를 상상해 보세요. 한 컴포넌트가 실패하거나 취소되면 모든 종속 컴포넌트를 자동으로 취소하고 싶을 수 있습니다.

function combineAbortSignals(...signals) {
 const controller = new AbortController();

 signals.forEach(signal => {
 if (signal) {
 signal.addEventListener('abort', () => {
 controller.abort();
 });
 }
 });

 return controller.signal;
}

// 사용 예시:
const controller1 = new AbortController();
const controller2 = new AbortController();
const combinedSignal = combineAbortSignals(controller1.signal, controller2.signal);

fetch('/api/data', { signal: combinedSignal })
 .then(response => response.json())
 .then(data => {
 console.log('Data received:', data);
 })
 .catch(error => {
 if (error.name === 'AbortError') {
 console.log('Fetch aborted');
 } else {
 console.error('Fetch error:', error);
 }
 });

// controller1을 중단하면 fetch 요청도 중단됩니다:
controller1.abort();

3. AbortError 전역적으로 처리하기

코드 유지 관리성을 향상시키기 위해 AbortError 예외를 포착하고 처리하는 전역 오류 처리기를 만들 수 있습니다. 이는 애플리케이션의 오류 처리를 단순화하고 일관된 동작을 보장할 수 있습니다. 이는 AbortError를 확인하고 적절한 조치를 취하는 사용자 지정 오류 처리 함수를 만들어 수행할 수 있습니다. 이러한 중앙 집중식 접근 방식은 오류 처리 로직을 더 쉽게 업데이트하고 애플리케이션 전체의 일관성을 보장합니다.

function handleAbortError(error) {
 if (error.name === 'AbortError') {
 console.log('Request aborted globally');
 // 필요한 정리 작업이나 UI 업데이트 수행
 }
}

// 사용 예시:
fetch('/api/data')
 .then(response => response.json())
 .then(data => {
 console.log('Data received:', data);
 })
 .catch(error => {
 handleAbortError(error);
 console.error('Fetch error:', error);
 });

오류 처리

AbortController API를 사용하여 요청이 중단되면 fetch 프로미스는 AbortError와 함께 거부됩니다. 애플리케이션에서 예기치 않은 동작을 방지하려면 이 오류를 적절하게 처리하는 것이 중요합니다.

fetch('/api/data', { signal })
 .then(response => response.json())
 .then(data => {
 console.log('Data received:', data);
 })
 .catch(error => {
 if (error.name === 'AbortError') {
 console.log('Fetch aborted');
 // 필요한 정리 작업이나 UI 업데이트 수행
 } else {
 console.error('Fetch error:', error);
 // 다른 오류 처리
 }
 });

오류 처리 블록에서 error.name 속성을 검사하여 AbortError를 확인할 수 있습니다. 오류가 AbortError인 경우, 사용자에게 메시지를 표시하거나 애플리케이션 상태를 재설정하는 등 필요한 정리 작업이나 UI 업데이트를 수행할 수 있습니다.

모범 사례

• 항상 AbortError 예외 처리하기: 예기치 않은 동작을 방지하기 위해 코드가 AbortError 예외를 정상적으로 처리하도록 하세요.
• 설명적인 오류 메시지 사용하기: 개발자가 문제를 디버깅하고 해결하는 데 도움이 되도록 명확하고 유익한 오류 메시지를 제공하세요.
• 리소스 정리하기: 요청이 중단되면 메모리 누수를 방지하기 위해 타이머나 이벤트 리스너와 같은 관련 리소스를 정리하세요.
• 타임아웃 값 고려하기: 요청이 무기한 대기 상태에 빠지는 것을 방지하기 위해 비동기 작업에 적절한 타임아웃 값을 설정하세요.
• 장기 실행 작업에 AbortController 사용하기: 완료하는 데 시간이 오래 걸릴 수 있는 작업의 경우, 사용자가 필요할 때 작업을 취소할 수 있도록 AbortController API를 사용하세요.

브라우저 호환성

AbortController API는 Chrome, Firefox, Safari, Edge를 포함한 최신 브라우저에서 널리 지원됩니다. 그러나 구형 브라우저는 이 API를 지원하지 않을 수 있습니다. 구형 브라우저와의 호환성을 보장하기 위해 폴리필을 사용할 수 있습니다. 구형 브라우저에 AbortController 기능을 제공하는 여러 폴리필이 있으며, npm이나 yarn과 같은 패키지 관리자를 사용하여 프로젝트에 쉽게 통합할 수 있습니다.

AbortController의 미래

AbortController API는 진화하는 기술이며, 사양의 향후 버전에서는 새로운 기능과 개선 사항이 도입될 수 있습니다. 현대적이고 효율적인 웹 애플리케이션을 구축하기 위해서는 AbortController API의 최신 개발 동향을 파악하는 것이 중요합니다. 새로운 기능이 제공될 때 이를 활용하기 위해 브라우저 업데이트와 JavaScript 표준에 주목하세요.

결론

AbortController API는 JavaScript에서 비동기 작업을 관리하는 데 유용한 도구입니다. 요청을 취소하고 리소스를 관리하는 메커니즘을 제공함으로써 개발자는 더 반응성이 뛰어나고 성능이 좋으며 사용자 친화적인 웹 애플리케이션을 구축할 수 있습니다. AbortController API의 핵심 개념, 실제 사용 사례 및 고급 기술을 이해하는 것은 현대 웹 개발에 필수적입니다. 이 API를 마스터함으로써 개발자는 더 나은 사용자 경험을 제공하는 강력하고 효율적인 애플리케이션을 만들 수 있습니다.