[typescript] 비동기 작업 중의 메모리 누수 방지 방법
모던 웹 애플리케이션에서 비동기 작업은 매우 중요합니다. 하지만 비동기 작업을 관리하지 않으면 메모리 누수가 발생할 수 있습니다. 이번에는 TypeScript를 사용하여 비동기 작업 중의 메모리 누수를 방지하는 몇 가지 방법에 대해 알아보겠습니다.
1. async/await 패턴 사용
TypeScript에서 async/await를 사용하면 비동기 작업을 더욱 명확하고 관리하기 쉽습니다. async 키워드와 await 키워드를 활용하여 비동기 작업을 동기적으로 표현함으로써 예기치 못한 메모리 누수를 방지할 수 있습니다.
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
} catch (error) {
console.error('Error fetching data:', error);
}
}
2. Promise 인스턴스 정리
Promise 인스턴스를 정리하지 않으면 메모리 누수가 발생할 수 있습니다. finally 블록을 사용하여 비동기 작업이 완료될 때 자원을 정리하고 메모리 누수를 방지할 수 있습니다.
async function fetchData() {
const fetchDataPromise = fetch('https://api.example.com/data');
try {
const response = await fetchDataPromise;
const data = await response.json();
return data;
} catch (error) {
console.error('Error fetching data:', error);
} finally {
fetchDataPromise.finally(() => {
// Clean up resources
});
}
}
3. 취소 가능한 Promise 구현
취소 가능한 Promise를 구현하여, 비동기 작업을 취소할 수 있도록 만들어 메모리 누수를 방지할 수 있습니다. AbortController와 signal을 활용하여 취소 가능한 Promise를 만들 수 있습니다.
async function fetchDataWithCancellation(signal: AbortSignal) {
try {
const response = await fetch('https://api.example.com/data', { signal });
const data = await response.json();
return data;
} catch (error) {
if (signal.aborted) {
console.log('Data fetching was cancelled');
} else {
console.error('Error fetching data:', error);
}
}
}
const controller = new AbortController();
const { signal } = controller;
// Some time later, cancel the fetch operation
controller.abort();
이러한 방법을 사용하여 TypeScript를 통해 비동기 작업 중의 메모리 누수를 방지할 수 있습니다. async/await 패턴 사용, Promise 인스턴스 정리, 취소 가능한 Promise 구현을 활용하여 안정적이고 메모리 효율적인 비동기 작업을 구현할 수 있습니다.