[javascript] 비동기 처리 최적화 방법

08 Dec 2023

javascript

본 포스트에서는 JavaScript에서 비동기 처리를 최적화하는 방법에 대해 알아보겠습니다. 비동기 처리는 데이터 가져오기, 네트워크 요청, 파일 읽기 등 시간이 오래 걸리는 작업을 수행할 때 유용합니다. 그러나 비동기 처리를 효율적으로 관리하지 않으면 성능 저하와 메모리 누수로 이어질 수 있습니다.

1. Promise 활용

Promise는 비동기 작업 처리를 위한 내장 객체로, 콜백 지옥을 피하고 코드를 보다 구조화할 수 있게 합니다. 코드의 가독성과 유지보수성을 높일 수 있으며, 여러 비동기 작업을 연결하고 관리하기에 용이합니다.

function fetchData() {
  return new Promise((resolve, reject) => {
    // 비동기 작업 수행
    if (/* 작업 성공 조건 */) {
      resolve(data);
    } else {
      reject(error);
    }
  });
}

fetchData()
  .then(data => {
    // 성공 시 처리
  })
  .catch(error => {
    // 실패 시 처리
  });

2. Async/Await 활용

ES7부터 도입된 Async/Await는 Promise를 더욱 간결하고 가독성 있게 사용할 수 있도록 합니다. 비동기 처리 코드를 동기식 코드처럼 작성할 수 있어서, 비동기 처리 로직을 작성하고 관리하기에 편리합니다.

async function fetchData() {
  try {
    let data = await fetchData();
    // 성공 시 처리
  } catch (error) {
    // 실패 시 처리
  }
}

3. 병렬 처리 최적화

여러 개의 비동기 작업을 병렬로 처리할 때, Promise.all이나 Promise.race를 활용하여 불필요한 대기 시간을 최소화할 수 있습니다. Promise.all은 모든 작업이 완료될 때까지 기다리고, Promise.race는 가장 먼저 완료된 작업의 결과를 반환합니다.

let promise1 = fetchData1();
let promise2 = fetchData2();

Promise.all([promise1, promise2])
  .then(results => {
    // 모든 작업 완료 후 처리
  });

Promise.race([promise1, promise2])
  .then(result => {
    // 가장 먼저 완료된 작업 결과 처리
  });

비동기 처리를 최적화하는 방법에 대해 알아보았습니다. Promise, Async/Await, 병렬 처리 등을 적절히 활용하여 성능적인 측면과 코드 구조적인 측면에서 효율적인 비동기 처리를 구현할 수 있습니다.

참고 문헌: