JavaScript AbortController 마스터하기: 원활한 요청 취소

현대 웹 개발의 역동적인 세계에서 비동기 작업은 반응성 있고 매력적인 사용자 경험의 중추입니다. API에서 데이터를 가져오는 것부터 사용자 상호 작용을 처리하는 것까지, JavaScript는 완료하는 데 시간이 걸릴 수 있는 작업을 자주 다룹니다. 하지만 사용자가 요청이 끝나기 전에 페이지를 떠나거나, 후속 요청이 이전 요청을 대체하면 어떻게 될까요? 적절한 관리 없이는 이러한 진행 중인 작업은 리소스 낭비, 오래된 데이터, 심지어 예기치 않은 오류로 이어질 수 있습니다. 바로 이 지점에서 JavaScript AbortController API가 빛을 발하며, 비동기 작업을 취소하기 위한 견고하고 표준화된 메커니즘을 제공합니다.

요청 취소의 필요성

일반적인 시나리오를 생각해 봅시다: 사용자가 검색창에 입력하면, 각 키 입력마다 애플리케이션이 API 요청을 보내 검색 제안을 가져옵니다. 사용자가 빠르게 입력하면 여러 요청이 동시에 진행될 수 있습니다. 만약 이러한 요청이 대기 중인 상태에서 사용자가 다른 페이지로 이동하면, 응답이 도착하더라도 관련이 없으며 이를 처리하는 것은 귀중한 클라이언트 측 리소스를 낭비하는 것입니다. 더 나아가, 서버는 이미 이러한 요청을 처리했을 수 있어 불필요한 계산 비용이 발생할 수 있습니다.

또 다른 흔한 상황은 사용자가 파일 업로드와 같은 작업을 시작했다가 중간에 취소하기로 결정하는 경우입니다. 또는 대용량 데이터셋을 가져오는 것과 같은 장기 실행 작업이 새롭고 더 관련성 높은 요청이 만들어져 더 이상 필요하지 않게 될 수도 있습니다. 이 모든 경우에, 진행 중인 작업을 정상적으로 종료하는 기능은 다음과 같은 이유로 매우 중요합니다:

• 사용자 경험 향상: 오래되거나 관련 없는 데이터 표시를 방지하고, 불필요한 UI 업데이트를 피하며, 애플리케이션의 빠른 반응성을 유지합니다.
• 리소스 사용 최적화: 불필요한 데이터를 다운로드하지 않아 대역폭을 절약하고, 완료되었지만 필요 없는 작업을 처리하지 않아 CPU 사용량을 줄이며, 메모리를 확보합니다.
• 경쟁 조건(Race Conditions) 방지: 가장 최신의 관련 데이터만 처리되도록 보장하여, 더 오래되고 대체된 요청의 응답이 최신 데이터를 덮어쓰는 시나리오를 방지합니다.

AbortController API 소개

AbortController 인터페이스는 하나 이상의 JavaScript 비동기 작업에 중단 요청 신호를 보내는 방법을 제공합니다. 이는 AbortSignal을 지원하는 API, 특히 최신 fetch API와 함께 작동하도록 설계되었습니다.

핵심적으로 AbortController는 두 가지 주요 구성 요소를 가집니다:

• AbortController 인스턴스: 새로운 취소 메커니즘을 생성하기 위해 인스턴스화하는 객체입니다.
• signal 속성: 각 AbortController 인스턴스에는 signal 속성이 있으며, 이는 AbortSignal 객체입니다. 이 AbortSignal 객체는 취소하고자 하는 비동기 작업에 전달하는 것입니다.

AbortController는 또한 단 하나의 메서드를 가집니다:

• abort(): AbortController 인스턴스에서 이 메서드를 호출하면 연관된 AbortSignal이 즉시 트리거되어 중단됨으로 표시됩니다. 이 신호를 수신하는 모든 작업은 알림을 받고 그에 따라 조치할 수 있습니다.

AbortController가 Fetch와 함께 작동하는 방식

fetch API는 AbortController의 가장 주되고 일반적인 사용 사례입니다. fetch 요청을 할 때, options 객체에 AbortSignal 객체를 전달할 수 있습니다. 만약 신호가 중단되면, fetch 작업은 조기에 종료됩니다.

기본 예제: 단일 Fetch 요청 취소하기

간단한 예제로 설명해 보겠습니다. API에서 데이터를 가져오고 싶지만, 사용자가 요청이 완료되기 전에 다른 곳으로 이동하기로 결정하면 이 요청을 취소할 수 있기를 원한다고 상상해 보세요.

```javascript // 새로운 AbortController 인스턴스 생성 const controller = new AbortController(); const signal = controller.signal; // API 엔드포인트의 URL const apiUrl = 'https://api.example.com/data'; console.log('fetch 요청 시작 중...'); fetch(apiUrl, { signal: signal // signal을 fetch 옵션에 전달 }) .then(response => { if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return response.json(); }) .then(data => { console.log('데이터 수신:', data); // 수신된 데이터 처리 }) .catch(error => { if (error.name === 'AbortError') { console.log('Fetch 요청이 중단되었습니다.'); } else { console.error('Fetch 오류:', error); } }); // 5초 후에 요청을 취소하는 시뮬레이션 setTimeout(() => { console.log('fetch 요청 중단 중...'); controller.abort(); // 이것은 AbortError와 함께 .catch 블록을 트리거합니다 }, 5000); ```

이 예제에서:

• AbortController를 생성하고 그 signal을 추출합니다.
• 이 signal을 fetch 옵션에 전달합니다.
• 만약 controller.abort()가 fetch가 완료되기 전에 호출되면, fetch가 반환하는 프로미스는 AbortError와 함께 거부(reject)됩니다.
• .catch() 블록은 이 AbortError를 구체적으로 확인하여 실제 네트워크 오류와 취소를 구별합니다.

실용적인 조언: fetch와 함께 AbortController를 사용할 때는 취소를 정상적으로 처리하기 위해 항상 catch 블록에서 error.name === 'AbortError'를 확인하세요.

단일 컨트롤러로 여러 요청 처리하기

하나의 AbortController를 사용하여 그 signal을 수신하는 여러 작업을 모두 중단시킬 수 있습니다. 이는 사용자 행동이 여러 진행 중인 요청을 무효화할 수 있는 시나리오에서 매우 유용합니다. 예를 들어, 사용자가 대시보드 페이지를 떠나면 해당 대시보드와 관련된 모든 미결 데이터 가져오기 요청을 중단하고 싶을 수 있습니다.

```javascript const controller = new AbortController(); const signal = controller.signal; const apiUrl1 = 'https://api.example.com/users'; const apiUrl2 = 'https://api.example.com/products'; function fetchData(url, name) { console.log(`${name} fetch 요청 시작 중...`); return fetch(url, { signal: signal }) .then(response => { if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return response.json(); }) .then(data => { console.log(`${name} 데이터 수신:`, data); }) .catch(error => { if (error.name === 'AbortError') { console.log(`${name} fetch 요청이 중단되었습니다.`); } else { console.error(`${name} fetch 오류:`, error); } }); } // 여러 fetch 시작 fetchData(apiUrl1, 'Users'); fetchData(apiUrl2, 'Products'); // 7초 후에 모든 요청을 취소하는 시뮬레이션 setTimeout(() => { console.log('모든 fetch 요청 중단 중...'); controller.abort(); }, 7000); ```

여기서 'Users'와 'Products' fetch 작업 모두 동일한 signal을 사용하고 있습니다. controller.abort()가 호출되면 두 요청 모두 종료됩니다.

글로벌 관점: 이 패턴은 독립적으로 API 호출을 시작할 수 있는 많은 컴포넌트를 가진 복잡한 애플리케이션에 매우 유용합니다. 예를 들어, 국제적인 전자상거래 플랫폼은 제품 목록, 사용자 프로필, 장바구니 요약 등을 위한 컴포넌트가 모두 데이터를 가져올 수 있습니다. 사용자가 한 제품 카테고리에서 다른 카테고리로 빠르게 이동하면, 단일 abort() 호출로 이전 뷰와 관련된 모든 대기 중인 요청을 정리할 수 있습니다.

`AbortSignal` 이벤트 리스너

fetch는 중단 신호를 자동으로 처리하지만, 다른 비동기 작업은 중단 이벤트에 대한 명시적인 등록이 필요할 수 있습니다. AbortSignal 객체는 'abort' 이벤트를 수신할 수 있게 해주는 addEventListener 메서드를 제공합니다. 이는 AbortController를 사용자 정의 비동기 로직이나 설정에서 signal 옵션을 직접 지원하지 않는 라이브러리와 통합할 때 특히 유용합니다.

```javascript const controller = new AbortController(); const signal = controller.signal; function performLongTask(signal) { return new Promise((resolve, reject) => { const taskDuration = 10000; // 작업에 10초 소요 let elapsedTime = 0; const intervalId = setInterval(() => { elapsedTime += 1000; console.log(`작업 진행: ${elapsedTime / 1000}s`); if (elapsedTime >= taskDuration) { clearInterval(intervalId); resolve('작업이 성공적으로 완료되었습니다!'); } }, 1000); // abort 이벤트 수신 signal.addEventListener('abort', () => { clearInterval(intervalId); console.log('이벤트 리스너를 통해 장기 작업이 중단되었습니다.'); reject(new DOMException('Aborted', 'AbortError')); }); }); } console.log('장기 작업 시작 중...'); performLongTask(signal) .then(result => console.log(result)) .catch(error => { if (error.name === 'AbortError') { console.log('작업이 중단되었습니다.'); } else { console.error('예상치 못한 오류가 발생했습니다:', error); } }); // 3초 후에 작업 중단 setTimeout(() => { console.log('중단 시작 중...'); controller.abort(); }, 3000); ```

이 예제에서:

• performLongTask 함수는 AbortSignal을 인자로 받습니다.
• 진행 상황을 시뮬레이션하기 위해 interval을 설정합니다.
• 결정적으로, 'abort' 이벤트에 대한 이벤트 리스너를 signal에 추가합니다. 이벤트가 발생하면 interval을 정리하고 프로미스를 AbortError로 거부합니다.

실용적인 조언: addEventListener('abort', callback) 패턴은 사용자 정의 비동기 로직에 필수적이며, 코드가 외부로부터의 취소 신호에 반응할 수 있도록 보장합니다.

`signal.aborted` 속성

AbortSignal에는 또한 불리언 속성인 aborted가 있습니다. 이는 신호가 중단되었으면 true를, 그렇지 않으면 false를 반환합니다. 취소를 시작하는 데 직접 사용되지는 않지만, 비동기 로직 내에서 신호의 현재 상태를 확인하는 데 유용할 수 있습니다.

```javascript const controller = new AbortController(); const signal = controller.signal; function checkStatus(signal) { if (signal.aborted) { console.log('상태를 확인할 수 없습니다, 신호가 이미 중단되었습니다.'); return; } console.log('상태 확인 중...'); // 일부 작업 시뮬레이션... setTimeout(() => { if (!signal.aborted) { console.log('상태 확인 완료.'); } else { console.log('중단으로 인해 상태 확인이 중단되었습니다.'); } }, 2000); } checkStatus(signal); // 1초 후에 중단 setTimeout(() => { console.log('중단 중...'); controller.abort(); }, 1000); ```

이 스니펫에서 signal.aborted를 사용하면 리소스를 많이 소모할 수 있는 작업을 진행하기 전에 상태를 확인할 수 있습니다. fetch API는 이를 내부적으로 처리하지만, 사용자 정의 로직은 이러한 확인으로 이점을 얻을 수 있습니다.

Fetch를 넘어서: 다른 사용 사례

fetch가 AbortController의 가장 두드러진 사용자이지만, 그 잠재력은 AbortSignal을 수신하도록 설계될 수 있는 모든 비동기 작업으로 확장됩니다. 여기에는 다음이 포함됩니다:

• 장기 실행 계산: 웹 워커, 복잡한 DOM 조작 또는 집약적인 데이터 처리.
• 타이머: setTimeout과 setInterval은 AbortSignal을 직접 받지 않지만, performLongTask 예제에서 보여준 것처럼 이를 지원하는 프로미스로 감쌀 수 있습니다.
• 다른 라이브러리: 비동기 작업을 다루는 많은 최신 JavaScript 라이브러리(예: 일부 데이터 페칭 라이브러리, 애니메이션 라이브러리)가 AbortSignal 지원을 통합하기 시작했습니다.

예제: 웹 워커와 AbortController 사용하기

웹 워커는 무거운 작업을 메인 스레드에서 분리하는 데 훌륭합니다. 웹 워커와 통신하고 AbortSignal을 제공하여 워커에서 수행되는 작업을 취소할 수 있습니다.

main.js

```javascript // 웹 워커 생성 const worker = new Worker('worker.js'); // 워커 작업을 위한 AbortController 생성 const controller = new AbortController(); const signal = controller.signal; console.log('워커에 작업 전송 중...'); // 작업 데이터와 signal을 워커에 전송 worker.postMessage({ task: 'processData', data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], signal: signal // 참고: Signal은 이렇게 직접 전송할 수 없습니다. // 워커가 자신만의 signal을 만들거나 메시지를 수신할 수 있도록 // 메시지를 보내야 합니다. // 더 실용적인 접근 방식은 중단 메시지를 보내는 것입니다. }); // 워커와 signal을 처리하는 더 견고한 방법은 메시지 전달을 통하는 것입니다: // 수정: 'start' 메시지와 'abort' 메시지를 보냅니다. worker.postMessage({ command: 'startProcessing', payload: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] }); worker.onmessage = function(event) { console.log('워커로부터의 메시지:', event.data); }; // 3초 후에 워커 작업을 중단하는 시뮬레이션 setTimeout(() => { console.log('워커 작업 중단 중...'); // 워커에 'abort' 명령 전송 worker.postMessage({ command: 'abortProcessing' }); }, 3000); // 작업이 끝나면 워커를 종료하는 것을 잊지 마세요 // worker.terminate(); ```

worker.js

```javascript let processingInterval = null; let isAborted = false; self.onmessage = function(event) { const { command, payload } = event.data; if (command === 'startProcessing') { isAborted = false; console.log('워커가 startProcessing 명령을 받았습니다. 페이로드:', payload); let progress = 0; const total = payload.length; processingInterval = setInterval(() => { if (isAborted) { clearInterval(processingInterval); console.log('워커: 처리가 중단되었습니다.'); self.postMessage({ status: 'aborted' }); return; } progress++; console.log(`워커: 항목 처리 중 ${progress}/${total}`); if (progress === total) { clearInterval(processingInterval); console.log('워커: 처리가 완료되었습니다.'); self.postMessage({ status: 'completed', result: '모든 항목 처리됨' }); } }, 500); } else if (command === 'abortProcessing') { console.log('워커가 abortProcessing 명령을 받았습니다.'); isAborted = true; // isAborted 확인으로 인해 다음 틱에서 interval이 스스로 정리됩니다. } }; ```

설명:

• 메인 스레드에서 AbortController를 생성합니다.
• signal을 직접 전달하는 대신(쉽게 전송할 수 없는 복잡한 객체이므로 불가능함), 메시지 전달을 사용합니다. 메인 스레드는 'startProcessing' 명령을 보내고 나중에 'abortProcessing' 명령을 보냅니다.
• 워커는 이러한 명령을 수신합니다. 'startProcessing'을 받으면 작업을 시작하고 interval을 설정합니다. 또한 'abortProcessing' 명령으로 관리되는 isAborted 플래그를 사용합니다.
• isAborted가 true가 되면 워커의 interval은 스스로 정리되고 작업이 중단되었음을 보고합니다.

실용적인 조언: 웹 워커의 경우, 취소를 신호하기 위해 메시지 기반 통신 패턴을 구현하여 AbortSignal의 동작을 효과적으로 모방하세요.

모범 사례 및 고려 사항

AbortController를 효과적으로 활용하려면 다음 모범 사례를 명심하세요:

• 명확한 이름 지정: 컨트롤러에 설명적인 변수 이름(예: dashboardFetchController, userProfileController)을 사용하여 효과적으로 관리하세요.
• 스코프 관리: 컨트롤러의 스코프가 적절하게 지정되었는지 확인하세요. 컴포넌트가 마운트 해제될 때, 그와 관련된 모든 대기 중인 요청을 취소하세요.
• 오류 처리: 항상 AbortError와 다른 네트워크 또는 처리 오류를 구별하세요.
• 컨트롤러 생명 주기: 컨트롤러는 한 번만 중단할 수 있습니다. 시간이 지남에 따라 여러 독립적인 작업을 취소해야 하는 경우 여러 컨트롤러가 필요합니다. 하지만 하나의 컨트롤러는 여러 작업이 모두 그 신호를 공유하는 경우 동시에 중단시킬 수 있습니다.
• DOM AbortSignal: AbortSignal 인터페이스는 DOM 표준이라는 점을 인지하세요. 널리 지원되지만, 필요한 경우 오래된 환경과의 호환성을 확인하세요(단, 최신 브라우저와 Node.js에서는 지원이 일반적으로 훌륭합니다).
• 정리(Cleanup): 컴포넌트 기반 아키텍처(React, Vue, Angular 등)에서 AbortController를 사용하는 경우, 컴포넌트가 DOM에서 제거될 때 메모리 누수와 예기치 않은 동작을 방지하기 위해 정리 단계(예: `componentWillUnmount`, `useEffect` 반환 함수, `ngOnDestroy`)에서 controller.abort()를 호출해야 합니다.

글로벌 관점: 전 세계 사용자를 대상으로 개발할 때, 네트워크 속도와 지연 시간의 가변성을 고려하세요. 연결 상태가 좋지 않은 지역의 사용자는 요청 시간이 더 길어질 수 있으며, 이로 인해 효과적인 취소 기능이 사용자 경험이 크게 저하되는 것을 방지하는 데 더욱 중요해집니다. 이러한 차이점을 염두에 두고 애플리케이션을 설계하는 것이 핵심입니다.

결론

AbortController와 그와 연관된 AbortSignal은 JavaScript에서 비동기 작업을 관리하기 위한 강력한 도구입니다. 취소를 신호하는 표준화된 방법을 제공함으로써, 개발자들은 더 견고하고 효율적이며 사용자 친화적인 애플리케이션을 구축할 수 있습니다. 간단한 fetch 요청을 다루든 복잡한 워크플로우를 조율하든, AbortController를 이해하고 구현하는 것은 모든 현대 웹 개발자에게 기본적인 기술입니다.

AbortController로 요청 취소를 마스터하는 것은 성능과 리소스 관리를 향상시킬 뿐만 아니라 우수한 사용자 경험에 직접적으로 기여합니다. 상호작용적인 애플리케이션을 구축할 때, 이 중요한 API를 통합하여 대기 중인 작업을 정상적으로 처리하고, 전 세계 모든 사용자에 걸쳐 애플리케이션이 반응성과 신뢰성을 유지하도록 하세요.