이 포스트에서는 TypeScript에서 async/await를 사용하여 데이터를 변환하고 가공하는 방법에 대해 알아보겠습니다.

1. 비동기 함수와 async/await

TypeScript에서 비동기 작업을 처리할 때 async와 await 키워드를 사용할 수 있습니다. async 키워드는 함수가 비동기 함수임을 나타내며, await 키워드는 Promise가 settled될 때까지 대기하고 결과를 반환하는데 사용됩니다.

아래는 간단한 예제입니다.

async function fetchData(): Promise<string> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('데이터');
    }, 1000);
  });
}

async function processData() {
  const data = await fetchData();
  console.log(data);
}

processData();

위의 코드에서 fetchData 함수는 1초 후에 ‘데이터’ 문자열을 resolve 하는 Promise를 반환합니다. processData 함수에서는 await 키워드를 사용하여 fetchData의 결과를 기다리고, 결과를 출력합니다.

2. 데이터 변환 및 가공

비동기 함수에서 데이터 변환 및 가공을 처리할 때 async/await를 사용하면 코드를 보다 쉽게 이해하고 관리할 수 있습니다. 아래는 데이터를 가져와 가공하는 예제입니다.

interface UserData {
  id: number;
  name: string;
}

async function fetchUserData(id: number): Promise<UserData> {
  // 비동기 작업 수행
}

async function processUserData(id: number) {
  try {
    const userData = await fetchUserData(id);
    // 데이터 변환 및 가공
    const formattedUserData = {
      userId: userData.id,
      username: userData.name.toUpperCase(),
    };
    console.log(formattedUserData);
  } catch (error) {
    console.error('데이터 처리 중 오류 발생:', error);
  }
}

processUserData(123);

위의 코드에서 fetchUserData 함수는 사용자 데이터를 가져오는 비동기 작업을 수행합니다. processUserData 함수에서는 해당 데이터를 받아와 원하는 형태로 가공하고, 결과를 출력합니다.

이와 같이 async/await를 사용하면 비동기 작업을 보다 직관적으로 처리할 수 있으며, 데이터 처리 과정을 보다 명확하게 표현할 수 있습니다.

3. 마무리

이번 포스트에서는 TypeScript에서 async/await를 사용하여 데이터를 변환하고 가공하는 방법에 대해 알아봤습니다. async/await를 효과적으로 사용하면 비동기 작업을 보다 간결하게 처리할 수 있고, 코드의 가독성과 유지보수성을 향상시킬 수 있습니다. 추가로, 에러 핸들링과 같은 작업에도 효과적으로 활용할 수 있습니다.

참고 문헌:

• MDN Web Docs: async function