자바스크립트에서 비동기 코드를 다루는 방법으로 프로미스(Promise)와 async/await을 사용할 수 있습니다. 프로미스는 비동기 작업의 결과를 나타내는 객체이고, async/await은 프로미스를 보다 간편하게 다룰 수 있는 문법적인 기능입니다. 이번 글에서는 이 두 가지를 함께 사용하는 방법을 알아보겠습니다.

프로미스

프로미스는 다음과 같은 구조를 갖습니다.

const promise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
});

비동기 작업을 수행하는 함수를 프로미스 객체로 감싸서 반환합니다. 비동기 작업이 성공한 경우 resolve 함수를 호출하고, 실패한 경우 reject 함수를 호출합니다.

프로미스 객체는 다음과 같은 메서드를 갖습니다.

• then: resolve된 경우 실행할 콜백 함수를 등록합니다.
• catch: reject된 경우 실행할 콜백 함수를 등록합니다.
• finally: resolve 또는 reject 이후에 실행할 콜백 함수를 등록합니다.

async/await

async/await은 비동기 코드를 동기적으로 작성할 수 있도록 해주는 문법입니다. 함수 선언 앞에 async 키워드를 붙이면 해당 함수는 비동기 함수가 됩니다.

await 키워드는 프로미스가 resolve될 때까지 대기하는 역할을 합니다. await 키워드는 async 함수 내부에서만 사용할 수 있습니다.

이제 프로미스와 async/await을 함께 사용하는 예제를 보겠습니다.

function getUser(username) {
  return new Promise((resolve, reject) => {
    // 비동기 작업 수행
    setTimeout(() => {
      if (username === 'john') {
        resolve({ name: 'John', age: 30 });
      } else {
        reject(new Error('User not found'));
      }
    }, 1000);
  });
}

async function displayUser(username) {
  try {
    const user = await getUser(username);
    console.log(user);
  } catch (error) {
    console.error(error);
  }
}

displayUser('john');

해당 예제에서는 getUser 함수가 프로미스를 반환하고, displayUser 함수는 async 함수로 정의되었습니다. await getUser(username) 구문은 getUser 함수가 resolve되기를 기다린 후 결과를 반환합니다. resolve되면 반환된 값은 user 변수에 할당되고, 에러가 발생하면 catch 블록에서 처리됩니다.

결론

프로미스와 async/await은 자바스크립트에서 비동기 코드를 처리하는 강력한 기능입니다. 프로미스는 비동기 작업의 결과를 나타내는 객체이고, async/await는 프로미스를 보다 간편하게 다룰 수 있는 문법적인 기능입니다. 이를 함께 사용하면 비동기 코드를 보다 읽기 쉽고 관리하기 쉬운 형태로 작성할 수 있습니다.