TypeScript에서 for...of 루프와 await 키워드를 함께 사용하여 배열의 각 요소에 대해 비동기 작업을 수행하고 결과를 시각화하는 방법을 알아봅시다. 이런 방식으로 코드를 작성하면 동일한 비동기 작업을 병렬로 처리하고, 결과를 각각의 작업에 따라 처리할 수 있습니다.

1. 비동기 작업 수행 함수 작성

먼저, async 함수를 작성하여 비동기 작업을 수행하는 예제를 살펴보겠습니다.

async function performAsyncTask(item: number): Promise<string> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(`Task ${item} is done`);
    }, 1000);
  });
}

위의 코드에서는 performAsyncTask 함수가 각 요소에 대해 1초의 지연 시간을 갖는 비동기 작업을 수행하고, 해당 결과를 Promise로 반환합니다.

2. await for…of 루프를 통한 비동기 작업 결과 시각화

이제 await for...of 문을 사용하여 배열의 각 요소에 대해 비동기 작업을 수행하고 결과를 시각화하는 방법을 살펴보겠습니다.

async function processArray(array: number[]) {
  for await (const item of array) {
    const result = await performAsyncTask(item);
    console.log(result);
  }
}

const items = [1, 2, 3];
processArray(items);

위의 코드에서는 processArray 함수가 for await...of 루프를 사용하여 배열의 각 요소에 대해 performAsyncTask 함수를 호출하고, 각 작업의 결과를 콘솔에 출력합니다.

이번에는 TypeScript에서 await for...of 루프를 사용하여 비동기 작업의 결과를 시각화하는 방법에 대해 알아보았습니다. 이를 통해 병렬로 여러 개의 비동기 작업을 처리하고, 각 작업의 결과를 다룰 수 있는 유용한 방법을 확인할 수 있었습니다.