async/await를 활용한 비동기 JavaScript 프로그래밍

비동기 프로그래밍은 웹 개발에서 매우 중요한 부분입니다. JavaScript에서는 async와 await를 사용하여 비동기 코드를 쉽고 깔끔하게 작성할 수 있습니다. 이 글에서는 async와 await의 기본 사용법과 함께, 실제 예제를 통해 이해를 돕고자 합니다.

async/await 기본

async 함수는 항상 프라미스(Promise)를 반환합니다. await 키워드는 async 함수 내에서만 사용할 수 있으며, 프라미스의 결과를 기다립니다. 간단히 말해서, async와 await를 사용하면 비동기 코드를 동기 코드처럼 읽고 쓸 수 있습니다.

예제: 데이터 가져오기

웹 개발에서는 외부 API로부터 데이터를 가져오는 일이 흔합니다. fetch 함수를 사용하여 간단한 예제를 살펴보겠습니다.

async function fetchData(url) {
  try {
    // 데이터를 가져옵니다.
    const response = await fetch(url);
    // JSON 형태로 변환합니다.
    const data = await response.json();
    console.log(data);
  } catch (error) {
    // 오류가 발생하면 여기서 처리합니다.
    console.error("데이터를 가져오는데 실패했습니다:", error);
  }
}

fetchData('https://api.example.com/data');

이 코드는 fetchData 함수를 async 함수로 선언하여, fetch 호출의 결과를 기다립니다. await를 사용함으로써, 프라미스가 완료될 때까지 함수의 실행을 일시 정지하고, 완료되면 결과값을 반환합니다. 오류 처리를 위해 try...catch 구문을 사용했습니다.

async/await와 반복문

async/await는 반복문과 함께 사용할 때 더욱 강력해집니다. 예를 들어, 여러 URL에서 데이터를 순차적으로 가져와야 하는 경우가 있습니다.

async function fetchMultipleData(urls) {
  for (const url of urls) {
    await fetchData(url); // 앞서 정의한 fetchData 함수를 사용
  }
}

fetchMultipleData(['https://api.example.com/data1', 'https://api.example.com/data2']);

이 코드는 각 URL에서 데이터를 가져올 때까지 순차적으로 기다립니다. 이 방법은 각 요청이 이전 요청에 의존적이지 않은 경우에도 유용합니다.

결론

async와 await를 사용하면 비동기 JavaScript 코드를 작성하는 것이 훨씬 쉬워집니다. 코드가 더 읽기 쉽고, 오류 처리가 간단해지며, 비동기 로직을 동기적으로 표현할 수 있습니다. 이 기능들을 활용하여 더 깔끔하고 효율적인 코드를 작성해 보세요.