자바스크립트에서의 await 키워드 이해하기

비동기 코드란?

비동기 코드는 자바스크립트에서 매우 일반적입니다. 이 코드는 일정 시간이 걸리거나 외부 데이터에 의존하는 코드입니다. 예시로 jQuery에서 제공하는 AJAX 요청이 있습니다.

$.ajax({
  url: "/api/data",
  success: function(data) {
    console.log("Data:", data);
  }
});

그러나 이러한 외부 데이터 요청 코드는 JavaScript의 단일 스레드 구조 때문에 이전에 다른 코드 실행이 완료되지 않으면 block됩니다.

Promise란?

Promise object는 비동기 작업이 완료될 때까지 기다리는 JavaScript 오브젝트입니다. 이것은 비동기 작업이 완료될 때 resolve 또는 reject를 반환합니다.

function getData() {
  return new Promise((resolve, reject) => {
    $.ajax({
      url: "/api/data",
      success: function(data) {
        resolve(data);
      },
      error: function(error) {
        reject(error);
      }
    });
  });
}

Async/Await란?

async/await는 자바스크립트에서 비동기 코드 작성을 간소화하는 방법입니다. 이전에 작성한 Promise 코드에서는 then()을 사용하여 비동기 작업의 결과를 handle해야 합니다. 그러나 async/await를 사용하면 Promise 체인 대신 간단한 동기 코드 구문을 사용할 수 있습니다.

async function getData() {
  try {
    const data = await $.ajax("/api/data");
    console.log("Data:", data);
  } catch(error) {
    console.error(error);
  }
}

여기서 await 키워드는 Promise가 resolved될 때까지 기다립니다. 이렇게 하면 코드를 더 읽기 쉽게 만들 수 있습니다.

자바스크립트에서 await 키워드를 사용하면 Promise를 다루는 코드를 깔끔하게 작성할 수 있습니다.