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

웹 개발에서 자주 사용하는 JavaScript는 싱글 스레드 기반의 언어로, 코드가 순차적으로 실행됩니다. 이로 인해 시간이 오래 걸리는 작업이 있을 경우, 전체 코드의 흐름을 방해할 수 있습니다. 이러한 문제를 해결하기 위해 JavaScript는 비동기 처리를 지원하며, 이를 통해 오래 걸리는 작업도 효율적으로 처리할 수 있습니다. 오늘은 비동기 처리의 핵심인 콜백, 프로미스, 그리고 async/await에 대해 알아보겠습니다.

1. 콜백 함수

콜백 함수는 가장 기초적인 비동기 처리 방식입니다. 특정 함수가 실행된 후에 호출되도록 설계된 함수로, 많은 코드에서 콜백을 사용하여 비동기적인 작업을 처리합니다.

function fetchData(callback) {
  setTimeout(() => {
    console.log("데이터를 가져왔습니다!");
    callback();
  }, 1000);
}

fetchData(() => {
  console.log("콜백 함수가 호출되었습니다!");
});

위 코드에서 fetchData 함수는 1초 후 데이터를 가져온 다음 콜백 함수를 호출합니다. 콜백은 간단하고 사용하기 쉬운 방식이지만, 복잡한 비동기 처리를 할 때는 코드가 깊어지는 콜백 지옥에 빠질 수 있습니다.

2. 프로미스(Promise)

콜백 지옥을 해결하기 위해 ES6부터 프로미스가 도입되었습니다. 프로미스는 작업이 성공했는지, 실패했는지 상태를 반환하여 비동기 작업의 흐름을 관리하기 쉽게 해줍니다. 프로미스는 resolve와 reject라는 두 가지 결과를 가지고 있으며, 이를 통해 성공 또는 실패 상태를 반환합니다.

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true;
      if (success) {
        resolve("데이터를 가져왔습니다!");
      } else {
        reject("데이터 가져오기 실패!");
      }
    }, 1000);
  });
}

fetchData()
  .then(result => console.log(result))
  .catch(error => console.error(error));

위 코드에서 fetchData는 프로미스를 반환합니다. then 메서드를 통해 성공 시의 결과를, catch를 통해 실패 시의 결과를 처리할 수 있어 코드가 더욱 가독성이 좋고 관리하기 쉬워졌습니다.

3. async/await

async/await는 프로미스를 더욱 간편하게 사용할 수 있는 방법으로, ES8부터 도입되었습니다. 이를 통해 코드가 마치 동기식으로 작동하는 것처럼 보이지만, 실제로는 비동기적으로 처리됩니다. await 키워드를 통해 비동기 작업이 완료될 때까지 기다린 후, 다음 코드가 실행됩니다.

async function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true;
      if (success) {
        resolve("데이터를 가져왔습니다!");
      } else {
        reject("데이터 가져오기 실패!");
      }
    }, 1000);
  });
}

async function displayData() {
  try {
    const result = await fetchData();
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

displayData();

위 예제에서 displayData 함수는 await를 통해 fetchData 함수가 성공하거나 실패할 때까지 기다립니다. try...catch 문을 사용하여 오류를 처리할 수 있으므로, 에러 핸들링도 간편하게 할 수 있습니다.

콜백, 프로미스, 그리고 async/await의 비교

방식장점단점

콜백	간단한 구조, 빠른 구현 가능	콜백 지옥 발생 가능
프로미스	에러 처리와 흐름 제어가 쉬움	코드가 길어질 수 있음
async/await	동기식 코딩 스타일, 가독성 향상	모든 환경에서 지원되지 않음

콜백, 프로미스, async/await 각각의 비동기 처리 방식에는 저마다의 장점과 단점이 있습니다. 초보자에게는 콜백이 간단하고 이해하기 쉬울 수 있지만, 코드의 가독성과 유지보수를 고려할 때는 async/await가 권장됩니다. 프로미스와 async/await는 ES6와 ES8 이후의 버전에서 지원하므로, 최신 JavaScript 환경에서 사용하기 좋습니다.

마치며

JavaScript의 비동기 처리는 웹 애플리케이션 개발에서 매우 중요한 부분입니다. 특히 서버와 데이터를 주고받거나 대규모 파일을 처리할 때 필수적으로 사용됩니다. 이번 글을 통해 콜백, 프로미스, async/await에 대한 이해가 더욱 깊어지셨기를 바랍니다. 여러분의 코드가 더욱 효율적이고 깔끔해지기를 응원합니다!