Javascript & Typescript

자바스크립트의 비동기 처리를 위한 async, await, Promise 완벽 가이드

0

현대 웹 개발에서 비동기 처리는 필수적인 기술입니다. 자바스크립트는 이러한 비동기 처리를 위한 다양한 도구를 제공합니다. 이 블로그 글에서는 자바스크립트의 비동기 처리 메커니즘인 `async`, `await`, `Promise`, 그리고 `Promise.all()`에 대해 자세히 설명하고, 실용적인 예시를 통해 이해를 해보겠습니다.

1. 비동기 처리란?

비동기 처리란 작업이 시작된 후 그 결과를 기다리지 않고 다음 작업을 수행하는 방식입니다. 자바스크립트는 단일 스레드 언어이기 때문에 비동기 처리를 통해 성능을 최적화할 수 있습니다. 비동기 처리는 주로 네트워크 요청, 파일 읽기, 타이머 등의 작업에서 사용됩니다.

2. Promise

Promise는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체입니다. Promise는 세 가지 상태를 가질 수 있습니다:

  • Pending(대기): 초기 상태, 이행도 거부도 되지 않은 상태.
  • Fulfilled(이행): 작업이 성공적으로 완료된 상태.
  • Rejected(거부): 작업이 실패한 상태.

Promise 객체는 다음과 같은 방식으로 생성할 수 있습니다:

const promise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  let success = true;
  if (success) {
    resolve("작업 성공");
  } else {
    reject("작업 실패");
  }
});

Promise는 `then()`과 `catch()` 메서드를 사용해 처리할 수 있습니다:

promise
  .then(result => {
    console.log(result); // 작업 성공
  })
  .catch(error => {
    console.error(error); // 작업 실패
  });

3. async와 await

`async`와 `await`는 ES8(ECMAScript 2017)에서 도입된 문법으로, 비동기 코드를 작성할 때 Promise를 보다 직관적으로 다룰 수 있게 해줍니다.

async 함수

`async` 키워드를 함수 앞에 붙이면 그 함수는 항상 Promise를 반환합니다. 이 함수 내에서 비동기 작업을 수행하고 그 결과를 반환할 수 있습니다.

async function myFunction() {
  return "Hello, World!";
}

myFunction().then(result => console.log(result)); // Hello, World!

await

`await` 키워드는 `async` 함수 내에서만 사용할 수 있으며, Promise가 처리될 때까지 함수의 실행을 일시 정지합니다. Promise가 이행되면 `await`은 그 값을 반환하고, 거부되면 오류를 throw합니다.

async function fetchData() {
  try {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("Error:", error);
  }
}

fetchData();

4. Promise.all()

`Promise.all()`은 여러 Promise를 병렬로 처리하고, 모든 Promise가 이행되었을 때 단일 Promise를 반환합니다. 모든 Promise가 이행되면 이행된 값들의 배열을 반환하고, 하나라도 거부되면 거부된 첫 번째 이유를 반환합니다.

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3])
  .then(values => {
    console.log(values); // [3, 42, "foo"]
  })
  .catch(error => {
    console.error("Error:", error);
  });

결론

자바스크립트에서 비동기 처리를 이해하고 활용하는 것은 매우 중요합니다. `Promise`, `async`, `await`, 그리고 `Promise.all()`을 잘 활용하면 더욱 효율적이고 깔끔한 비동기 코드를 작성할 수 있습니다. 이 글에서 소개한 예제들을 통해 자바스크립트의 비동기 처리 메커니즘을 충분히 이해하고, 실무에 적용해 보세요.

이 가이드가 자바스크립트의 비동기 처리를 이해하는 데 도움이 되길 바랍니다. 질문이 있거나 추가 설명이 필요하다면 댓글로 남겨주세요!

Leave a Reply