JavaScript에는 비동기 작업을 처리하기 위한 다양한 방법이 있습니다. Promise 객체는 비동기적인 동작을 다루는데에 효과적이지만, async/await 구문을 사용하여 가독성을 높일 수 있습니다. 이 게시물에서는 TypeScript에서 async/await와 함께 사용하는 네스트드 프로미스에 대해 살펴보겠습니다.

Promise

먼저, Promise를 간단히 살펴보겠습니다. Promise는 비동기 동작이 완료되었을 때 결과값 또는 실패 정보를 리턴하는 객체입니다.

function fetchData(): Promise<Data> {
  return new Promise((resolve, reject) => {
    // 비동기 작업 수행
    if (/* 비동기 작업 성공 */) {
      resolve(data);
    } else {
      reject(error);
    }
  });
}

async/await

async/await는 비동기 코드를 동기식 코드처럼 작성할 수 있도록 하는 JavaScript의 기능입니다.

async function processData() {
  try {
    const data = await fetchData();
    // 데이터를 사용한 작업 수행
  } catch (error) {
    // 에러 발생 시 처리
  }
}

await 키워드는 Promise가 완료될 때까지 현재 함수의 실행을 일시 중지하고, Promise가 완료되면 값을 반환합니다.

네스트드 프로미스

async/await와 함께 사용되는 Promise는 다수의 비동기 작업을 연달아 처리할 때 유용합니다. 다음은 네스트드 프로미스를 사용한 예제입니다.

async function processNestedData() {
  try {
    const data1 = await fetchData();
    const data2 = await fetchData2(data1);
    // 데이터를 사용한 작업 수행
  } catch (error) {
    // 에러 발생 시 처리
  }
}

위에 나온 코드에선 fetchData와 fetchData2 함수가 차례로 실행되고, 각 함수의 결과를 사용하여 작업을 수행합니다.

결론

async/await는 Promise의 가독성을 높이고 콜백 지옥을 피할 수 있는 강력한 도구입니다. 네스트드 프로미스를 사용하여 쉽게 비동기 작업을 다룰 수 있으므로, TypeScript 프로젝트에서는 async/await와 Promise를 적절히 조합하여 사용하는 것이 좋습니다.

더 많은 정보를 원하시면 MDN web docs를 참고하세요.