Colin's Blog
자바스크립트 비동기 작업의 순차적 처리

자바스크립트는 비동기 작업을 처리하는 데 매우 강력한 기능을 제공합니다. 그러나 때로는 작업을 순차적으로 처리해야 하는 상황이 발생할 수 있습니다. 이번 글에서는 자바스크립트에서 비동기 작업을 순차적으로 처리하는 몇 가지 방법을 알아보겠습니다.

1. 콜백 함수

콜백 함수는 자바스크립트에서 가장 많이 사용되는 비동기 작업 처리 방식 중 하나입니다. 이 방식은 작업이 완료되면 실행되는 함수를 지정하여 작업의 순차적인 처리를 구현합니다.

function task1(callback) {
  setTimeout(() => {
    console.log("Task 1 completed");
    callback();
  }, 2000);
}

function task2(callback) {
  setTimeout(() => {
    console.log("Task 2 completed");
    callback();
  }, 1000);
}

function task3(callback) {
  setTimeout(() => {
    console.log("Task 3 completed");
    callback();
  }, 1500);
}

task1(() => {
  task2(() => {
    task3(() => {
      console.log("All tasks completed");
    });
  });
});

위의 예시에서는 task1, task2, task3의 작업이 순차적으로 실행되고, 각 작업이 완료되면 다음 작업으로 넘어갑니다. 이를 통해 모든 작업이 순차적으로 완료되면 “All tasks completed”라는 메시지가 출력됩니다.

2. Promise

ES6부터는 Promise가 도입되어 비동기 작업을 보다 간편하게 처리할 수 있게 되었습니다. Promise는 비동기 작업의 성공 또는 실패와 관련된 결과를 나타내는 객체입니다. 이를 통해 비동기 작업을 연속적으로 체인화하여 순차적인 처리를 구현할 수 있습니다.

function task1() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("Task 1 completed");
      resolve();
    }, 2000);
  });
}

function task2() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("Task 2 completed");
      resolve();
    }, 1000);
  });
}

function task3() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("Task 3 completed");
      resolve();
    }, 1500);
  });
}

task1()
  .then(() => task2())
  .then(() => task3())
  .then(() => {
    console.log("All tasks completed");
  });

위의 예시에서는 task1, task2, task3 모두 Promise를 반환하도록 변경되었습니다. 이를 통해 각 작업이 완료되면 then() 메소드를 이용하여 다음 작업으로 넘어가도록 처리되고, 모든 작업이 완료된 후에는 “All tasks completed”라는 메시지가 출력됩니다.

3. Async/Await

ES8부터는 async/await 문법이 도입되어 비동기 작업을 더욱 간결하고 직관적으로 처리할 수 있게 되었습니다. async 함수 내에서 await 키워드를 사용하면 Promise를 동기적으로 처리할 수 있습니다.

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function performTasks() {
  await task1();
  await task2();
  await task3();
  console.log("All tasks completed");
}

performTasks();

위의 예시에서는 performTasks 함수 내에서 await 키워드를 사용하여 각 작업이 완료될 때까지 기다린 후 다음 작업으로 넘어갑니다. 이를 통해 작업이 순차적으로 실행되며, “All tasks completed”라는 메시지가 출력됩니다.

결론

자바스크립트에서 비동기 작업을 순차적으로 처리하는 여러 가지 방법을 알아보았습니다. 콜백 함수, Promise, async/await를 사용하여 비동기 작업을 보다 효율적으로 처리할 수 있습니다. 각 방법을 적절히 선택하여 프로젝트에서 필요한 작업을 순차적으로 처리하는 방법을 고려해보세요.

© 2018 Colin. All rights reserved.