TypeScript를 사용하면 비동기 작업을 보다 쉽게 다룰 수 있습니다. 그런데 때때로 await for...of 루프를 사용할 때 주의해야 할 사항이 있습니다.

문제 상황

아래의 예제를 살펴보겠습니다.

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

위의 코드에서 processArray 함수는 배열을 받아 각 요소에 대해 someAsyncFunction을 순서대로 호출하여 결과를 출력하는 함수입니다.

그러나 위와 같이 await for...of문을 사용할 경우, 반복문 내에서 순차적으로 실행되지 않을 수 있습니다.

해결방법

Promise.all을 사용하여 병렬로 비동기 작업을 처리하는 것이 좋은 대안입니다.

async function processArray(arr: number[]) {
  const promises = arr.map(item => someAsyncFunction(item));
  const results = await Promise.all(promises);
  results.forEach(result => console.log(result));
}

위의 코드에서는 Promise.all 메서드를 사용하여 배열의 각 항목에 대한 비동기 작업을 동시에 처리하고, 모든 작업이 완료되면 결과를 출력합니다. 이렇게 하면 작업이 병렬로 처리되므로 성능적으로 이점을 얻을 수 있습니다.

결론

await for...of 루프를 사용할 때는 반복문 내에서 순차적으로 실행되지 않을 수 있다는 점을 주의해야 합니다. 이런 경우에는 Promise.all을 사용하여 병렬로 비동기 작업을 처리하는 것이 좋은 대안입니다.

위와 같은 상황을 고려하여 코드를 작성하여 TypeScript의 강력한 비동기 처리 기능을 최대한 활용할 수 있습니다.