자바스크립트는 비동기적인 프로그래밍을 쉽게 다룰 수 있는 async와 await 키워드를 제공합니다. 이 키워드는 비동기 함수를 동기적으로 실행할 수 있게 해주므로, 데이터 변환 작업에 유용하게 사용됩니다. 이번 블로그 포스트에서는 자바스크립트의 async/await를 활용해 데이터를 변환하는 방법에 대해 알아보겠습니다.

async/await 간단한 소개

먼저 async/await가 무엇인지 간단하게 소개하겠습니다. async 키워드를 함수 앞에 붙이면 해당 함수는 항상 프로미스를 반환하게 됩니다. 이 프로미스는 내부 비동기 작업이 완료되면 해결(resolve)되는데, 그 값을 await 키워드를 사용하여 변수에 할당할 수 있습니다. 그리고 await 키워드는 오직 async 함수 내에서만 사용될 수 있습니다.

async function fetchData() {
  const response = await fetch('http://api.example.com/data');
  const data = await response.json();
  return data;
}

fetchData().then(data => {
  console.log(data);
});

위 코드에서 fetchData 함수는 비동기적으로 데이터를 가져오는데, await 키워드를 사용하여 response와 data 변수에 각각 할당합니다. 마지막으로, fetchData 함수를 호출하고 데이터가 반환되면 결과를 출력합니다.

데이터 변환 예제

이제 async/await를 활용하여 데이터 변환을 해보겠습니다. 아래 예제는 fetchData 함수를 사용하여 서버에서 가져온 원시 데이터를 파싱하고 필요한 정보만 추출하는 작업입니다.

async function fetchData() {
  const response = await fetch('http://api.example.com/data');
  const data = await response.json();
  return data;
}

async function transformData() {
  const rawData = await fetchData();
  
  const transformedData = rawData.map(item => {
    return {
      id: item.id,
      name: item.name,
      price: item.price
    };
  });
  
  return transformedData;
}

transformData().then(data => {
  console.log(data);
});

위 코드에서 transformData 함수는 fetchData 함수를 호출하여 원시 데이터를 가져온 뒤, map 함수를 사용하여 필요한 정보만을 추출하여 transformedData 배열로 변환합니다. 이렇게 변환된 데이터를 출력합니다.

데이터 변환 과정에 await 사용하기

만약 데이터 변환 과정 중에 추가적인 비동기 작업이 필요하다면, await를 사용하여 이를 처리할 수 있습니다. 아래 예제는 서버에서 가져온 원시 데이터를 변환하기 전에 추가적인 비동기 작업을 하는 상황을 보여줍니다.

async function fetchData() {
  const response = await fetch('http://api.example.com/data');
  const data = await response.json();
  return data;
}

async function transformData() {
  const rawData = await fetchData();
  
  const additionalData = await fetch('http://api.example.com/additionalData');
  
  const transformedData = rawData.map(item => {
    // 추가적인 비동기 작업을 수행하여 transformedData 생성
  });
  
  return transformedData;
}

transformData().then(data => {
  console.log(data);
});

위 코드에서 transformData 함수에서는 additionalData를 가져오는 추가적인 비동기 작업을 수행합니다. 이 작업이 완료되기 전까지는 transformedData 생성을 진행하지 않습니다. 이렇게 await를 사용함으로써 비동기 작업이 완료될 때까지 대기하고 결과를 처리할 수 있습니다.

마무리

자바스크립트의 async/await는 데이터 변환 작업을 보다 간결하고 가독성 있게 작성할 수 있게 도와줍니다. await 키워드를 활용하여 비동기 작업의 완료를 기다리는 동안 다른 작업을 처리할 수 있고, async/await는 프로미스 체이닝보다 더 직관적인 방식으로 비동기 코드를 다룰 수 있게 해줍니다.

더 많은 자세한 내용과 예제를 확인하려면 공식 자바스크립트 문서를 참고하세요.