자바스크립트는 단일 스레드 기반 언어로, 한 번에 하나의 작업만 처리할 수 있습니다. 하지만 비동기적인 작업을 다루기 위해 동시성을 지원하는 다양한 패턴과 기법들이 있습니다. 이번 글에서는 자바스크립트에서 동시성 문제를 다루는 실전 예제를 살펴보겠습니다.

예제: 비동기 작업을 순차적으로 처리하기

자바스크립트에서 대표적인 비동기 작업은 AJAX 요청, 파일 I/O, 타이머 등이 있습니다. 이런 비동기 작업들은 한 번에 여러 개가 동시에 실행될 수 있으며, 결과가 먼저 도착한 작업부터 처리되는 특징을 가지고 있습니다. 하지만 때로는 작업의 순서에 의존성이 있어 순차적으로 실행되어야 하는 경우가 있습니다.

다음은 Promise를 사용하여 비동기 작업을 순차적으로 처리하는 예제입니다.

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

function processTask(task) {
  return new Promise((resolve, reject) => {
    // 비동기 작업 수행
    if (task === "success") {
      resolve("작업 성공");
    } else {
      reject("작업 실패");
    }
  });
}

async function sequentialTasks() {
  console.log("작업 1 시작");
  await processTask("success");
  console.log("작업 1 완료");

  console.log("작업 2 시작");
  await delay(1000);
  console.log("작업 2 완료");

  console.log("작업 3 시작");
  await processTask("failure");
  console.log("작업 3 완료");
}

sequentialTasks()
  .then(() => console.log("작업 완료"))
  .catch((error) => console.error(error));

위 예제에서는 sequentialTasks 함수를 호출하여 작업들을 순차적으로 실행합니다. 각 작업은 await 키워드를 사용하여 이전 작업의 완료를 기다립니다. 따라서 작업 1이 완료된 후에 작업 2가 실행되고, 작업 2가 완료된 후에 작업 3이 실행되는 순서로 동작하게 됩니다.

결론

자바스크립트에는 비동기 작업을 순차적으로 처리하기 위한 다양한 기법과 패턴들이 있습니다. 이번 예제를 통해 Promise와 await 키워드를 이용하여 순차적인 실행을 구현하는 방법을 살펴보았습니다. 동시성 문제를 간단하게 해결할 수 있는 이러한 패턴들을 익히고 활용하여 자바스크립트 애플리케이션을 개발하는 것이 중요합니다.

해시태그: #동시성 #자바스크립트