자바스크립트 async/await를 이용한 메모리 관리

10 Sep 2023

javascript

자바스크립트는 싱글 스레드 언어이므로 비동기 처리를 위해서 콜백 함수나 프로미스를 사용합니다. 하지만 이런 콜백 함수나 프로미스는 중첩되거나 연속적으로 호출되는 경우 메모리 누수(memory leak)를 발생시킬 수 있습니다. 이러한 문제를 해결하기 위해 자바스크립트에서는 async/await 구문을 도입하였습니다. 이번 블로그 포스트에서는 자바스크립트 async/await를 이용하여 메모리를 효율적으로 관리하는 방법에 대해 알아보겠습니다.

1. async/await란

async/await는 비동기 코드를 동기적으로 작성할 수 있게 해주는 자바스크립트 문법입니다. async 키워드를 함수 앞에 붙이면 해당 함수는 암묵적으로 프로미스를 반환하게 되고, await 키워드를 프로미스 앞에 붙여 해당 프로미스가 완료될 때까지 대기할 수 있습니다. 이를 통해 메모리를 효율적으로 관리할 수 있습니다.

2. 비동기 메모리 관리

자바스크립트에서 비동기 작업을 처리할 때 메모리 관리를 잘 해주어야 합니다. 비동기 함수 내에서 발생하는 메모리 누수를 방지하기 위해 메모리 해제 강제로 수행해야 합니다.

async function fetchData(url) {
  try {
    const response = await fetch(url); // 외부 API 호출 예시
    const data = await response.json();
    // 데이터 가공 및 처리
    return data;
  } catch (error) {
    console.error('Error fetching data:', error);
    throw error;
  }
}

위의 코드에서 await response.json()을 사용하여 데이터를 받아오고 가공하여 반환합니다. 이후 데이터를 사용한 작업이 완료되면 더 이상 사용하지 않는 메모리를 해제해야 합니다.

async function processUserData() {
  try {
    const userData = await fetchData('https://example.com/api/users');
    // userData를 이용한 작업 처리
    // ...
    // 작업 후 userData 해제
    userData = null;
  } catch (error) {
    console.error('Error processing user data:', error);
  }
}

processUserData 함수에서 userData 변수를 이용하여 작업을 처리한 후, 더 이상 사용하지 않을 때 해당 변수를 null로 설정하여 메모리를 해제합니다. 이렇게 하면 가비지 컬렉터(garbage collector)가 해당 메모리를 정리할 수 있게 됩니다.

3. 비동기 함수의 실행 취소

비동기 함수가 실행되는 도중에 취소가 필요한 경우도 있을 수 있습니다. 이런 경우를 위해 abortController 객체를 사용하여 비동기 동작을 취소할 수 있습니다.

import { abortController } from 'node-abort-controller';

async function fetchDataWithCancellation(url, signal) {
  try {
    const response = await fetch(url, { signal });
    const data = await response.json();
    return data;
  } catch (error) {
    if (error.name === 'AbortError') {
      console.log('Request cancelled by user');
    } else {
      console.error('Error fetching data:', error);
      throw error;
    }
  }
}

// 실행 예시
const controller = new AbortController();
const signal = controller.signal;

fetchDataWithCancellation('https://example.com/api/data', signal)
  .then(data => {
    console.log('Data:', data);
  })
  .catch(error => {
    console.error(error);
  });

// 실행 취소
controller.abort();

위의 코드에서는 abortController를 사용하여 비동기 함수 실행 도중에 취소할 수 있도록 합니다. AbortController 객체를 생성하여 그 객체의 signal 속성을 fetch 함수의 옵션 파라미터에 전달합니다. 이후 abort 메소드를 호출하여 실행을 취소할 수 있습니다.

4. 결론

자바스크립트에서 비동기 코드를 작성할 때 메모리 관리를 잘 해주어야 합니다. async/await를 사용하여 비동기 작업을 동기적으로 처리할 수 있으며, 작업이 끝나면 메모리를 해제해야 합니다. 또한, 실행 취소가 필요한 경우 abortController를 사용하여 비동기 함수를 취소할 수 있습니다. 이를 통해 자바스크립트에서 메모리 관리를 효율적으로 할 수 있습니다.

이상으로 자바스크립트 async/await를 이용한 메모리 관리에 대해 알아보았습니다. 비동기 코드를 작성할 때는 항상 메모리 관리에 유의하여 효율적인 개발을 진행하세요.