JavaScript 비동기 처리: 콜백, 프로미스, 그리고 async/await

콜백 지옥과 프로미스

JavaScript는 비동기 프로그래밍을 위한 여러 가지 방법을 제공한다. 처음에는 콜백을 사용했지만, 콜백은 코드의 가독성이 떨어지고 '콜백 지옥'을 유발할 수 있다.

이를 해결하기 위해 ES6에서 프로미스 (Promise)가 도입되었다. 프로미스는 가독성을 높이고, 예외 처리가 용이하다. ES8에서는 async/await가 추가되어 더욱 직관적인 비동기 처리가 가능해졌다. async/await는 프로미스를 기반으로 하여 동기식 코드처럼 작성할 수 있도록 도와준다. 이 글에서는 콜백, 프로미스, async/await의 기본 사용법과 차이점을 설명한다.

프로미스에 대한 자세한 설명

프로미스를 사용하면 then()과 catch() 메서드를 통해 비동기 작업의 결과를 처리할 수 있다. 하지만 여전히 체이닝(chain)된 then() 메서드들이 길어지면 코드가 복잡해질 수 있다. 이를 해결하기 위해 ES8에서는 async/await가 추가되어 더욱 직관적인 비동기 처리가 가능해졌다. async/await는 프로미스를 기반으로 하여 동기식 코드처럼 작성할 수 있도록 도와준다. async 키워드를 함수 앞에 붙이면 해당 함수는 항상 프로미스를 반환하며, await 키워드는 프로미스가 해결될 때까지 기다린다.

예를 들어, 해당 코드를 보자.

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data received');
    }, 2000);
  });
}

// 프로미스 사용
fetchData().then(data => {
  console.log(data);
}).catch(error => {
  console.error(error);
});

// async/await 사용
async function getData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

getData();

위 예제에서 볼 수 있듯이, async/await를 사용하면 동기식 코드처럼 작성할 수 있어 가독성이 크게 향상된다. 또한, try/catch 블록을 통해 에러 처리가 더욱 간편해진다.

결론적으로, JavaScript의 비동기 처리 방법인 콜백, 프로미스, 그리고 async/await는 각각의 장단점을 가지고 있다. 콜백은 간단한 비동기 작업에 유용하지만, 복잡한 작업에서는 코드 가독성이 떨어질 수 있다. 프로미스는 가독성과 에러 처리를 개선하지만, 체이닝된 코드가 길어질 수 있다. async/await는 가장 직관적인 방법으로, 복잡한 비동기 작업을 동기식 코드처럼 작성할 수 있게 해준다. 다양한 비동기 처리 방법을 이해하고 상황에 맞게 적절히 사용하는 것이 중요하다.