자바스크립트에서는 종종 여러 개의 비동기 작업을 순차적으로 실행해야 할 때가 있습니다. 이럴 때에는 다양한 방법을 사용하여 작업을 조직화하고 관리할 수 있습니다.

1. 콜백 함수 활용

가장 기본적인 방법은 콜백 함수를 활용하는 것입니다. 각 비동기 작업이 완료될 때마다 다음 작업을 호출하는 방식으로 순차적으로 작업을 처리할 수 있습니다. 하지만 이러한 방법은 콜백 지옥(callback hell)이라 불리는 읽기 어려운 코드를 작성할 수 있다는 단점이 있습니다.

function task1(callback) {
  // 비동기 작업 수행
  // 작업 완료 후 callback 호출
  callback();
}

function task2(callback) {
  // 비동기 작업 수행
  // 작업 완료 후 callback 호출
  callback();
}

task1(() => {
  task2(() => {
    // 마지막 작업 수행
  });
});

2. Promise 활용

ES6부터 도입된 Promise를 활용하면 보다 가독성이 높고 유지보수가 용이한 코드를 작성할 수 있습니다. 각 작업을 Promise로 래핑하여 then 메서드를 이용해 순차적으로 작업을 처리할 수 있습니다.

function task1() {
  return new Promise((resolve) => {
    // 비동기 작업 수행
    // 작업 완료 후 resolve 호출
    resolve();
  });
}

function task2() {
  return new Promise((resolve) => {
    // 비동기 작업 수행
    // 작업 완료 후 resolve 호출
    resolve();
  });
}

task1()
  .then(() => task2())
  .then(() => {
    // 마지막 작업 수행
  });

3. async/await 활용

Promise를 보다 직관적이고 간결하게 사용할 수 있도록 ES8부터 도입된 async/await 문법을 활용하는 방법도 있습니다. async 함수 내에서 각 작업을 await 키워드를 통해 순차적으로 실행할 수 있습니다.

async function sequentialTasks() {
  await task1();
  await task2();
  // 마지막 작업 수행
}

sequentialTasks();

마치며

비동기 작업을 순차적으로 처리하는 방법으로는 콜백 함수, Promise, async/await 등 다양한 방법이 있습니다. 각 상황에 맞게 적합한 방법을 선택하여 코드를 작성하는 것이 중요합니다. 코드 가독성과 유지보수성을 고려하여 최적의 방법을 선택하시길 바랍니다.

JavaScript Promise 문서 JavaScript async/await 문서