[typescript] 비동기 이터레이션과 await for...of 문을 사용하여 작업 로그 기록하는 방법
자바스크립트 및 TypeScript에서 비동기 작업을 수행할 때, for...of 루프를 사용하여 이터러블을 순회하고 작업의 진행 상황을 로깅하는 방법이 있습니다. 이 기능을 통해 코드의 가독성을 높이고, 비동기 작업의 진행 상황을 실시간으로 확인할 수 있습니다. 이번 포스트에서는 이를 어떻게 수행하는지 살펴보겠습니다.
1. for...of문과 await을 이용한 비동기 이터레이션
이터러블을 순회하면서 각 요소에 대해 비동기 작업을 수행할 때, 일반적으로 for...of문과 await 키워드를 사용합니다. 이를 통해 배열, 맵, 셋 등과 같은 이터러블을 비동기적으로 처리할 수 있습니다.
async function processItems(items: string[]) {
for (const item of items) {
await processItem(item);
}
}
async function processItem(item: string) {
// 비동기 작업 수행
}
2. 작업 로그 기록하기
각 작업이 수행될 때마다 로그를 남겨 작업의 진행 상황을 파악할 수 있습니다. 이를 위해 console.log나 로깅 라이브러리를 활용할 수 있습니다.
async function processItems(items: string[]) {
for (const item of items) {
console.log(`Processing item: ${item}`);
await processItem(item);
console.log(`Item processed: ${item}`);
}
}
위의 코드에서 Processing item: ${item}과 Item processed: ${item}은 각각 작업을 시작하고 완료했을 때 로깅되는 메시지입니다.
3. 완성된 예제
아래는 전체 예제 코드입니다.
async function processItems(items: string[]) {
for (const item of items) {
console.log(`Processing item: ${item}`);
await processItem(item);
console.log(`Item processed: ${item}`);
}
}
async function processItem(item: string) {
// 비동기 작업 수행
}
const items = ['item1', 'item2', 'item3'];
processItems(items);
이제 processItems 함수를 호출하여 작업을 수행하면 각 단계마다 로그가 남겨지게 됩니다.
비동기 작업의 진행 상황을 실시간으로 파악하고자 할 때, for...of문과 await 키워드를 사용하여 작업의 진행 상황을 로깅하는 방법을 활용해보세요.