<JavaScript> 비동기 프로그래밍: 콜백, 프로미스(Promise), async/await

JavaScript에서 비동기 프로그래밍이 필수적인 요소 중 하나입니다.

이번 글에서는 콜백, 프로미스(Promise), async/await를 사용한 비동기 프로그래밍 방법에 대해 알아보겠습니다.

 

기본적인 비동기 처리: 콜백 함수

 

콜백 함수는 비동기 작업이 완료되고 결과를 처리할 때 사용되는 함수입니다. 다음은 setTimeout() 함수를 사용한 콜백 함수 예제입니다.

function callback() {
  console.log("Callback executed");
}

setTimeout(callback, 1000);
console.log("After setTimeout");

콜백 함수의 주요 단점 중 하나는 '콜백 지옥(Callback Hell)'이라고 하는, 콜백 함수가 여러 번 중첩되어 가독성이 떨어지는 상황이 발생할 수 있습니다.

 

비동기 작업의 흐름 제어: 프로미스 (Promise)

 

프로미스는 JavaScript 비동기 작업의 결과를 표현하는 객체입니다. 콜백 대신 사용하여 코드 가독성이 높이고 비동기 작업의 흐름을 더욱 잘 제어할 수 있습니다.

프로미스의 상태는 대기(pending), 이행(fulfilled), 거부(rejected) 중 하나입니다.

프로미스 객체를 생성하려면 다음과 같은 코드를 사용합니다.

 

const promise = new Promise((resolve, reject) => {
  // 비동기 작업 코드 작성
});

 

프로미스가 이행되었을 때 실행되는 코드를 등록하려면 then() 메소드를 사용합니다.

 

promise
  .then(result => {
    console.log("Promise resolved:", result);
  })
  .catch(error => {
    console.error("Promise rejected:", error);
  });

 

비동기 코드를 더 간결하게: async/await

 

JavaScript ES2017부터 도입된 async/await는 비동기 프로그래밍을 간결하게 작성할 수 있는 새로운 문법입니다.

이를 사용하면 프로미스를 더 직관적인 방식으로 처리할 수 있습니다.

async 함수는 다음과 같이 작성할 수 있습니다.

 

async function doAsyncTask() {
  // await를 사용한 비동기 작업 코드 작성
}

 

await를 사용하여 프로미스 처리를 진행하면 기존 프로미스 코드보다 간결해집니다. 아래 예시를 살펴보겠습니다.

 

async function fetchAndLogData() {
  try {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("Error:", error);
  }
}

fetchAndLogData();

비동기 함수 내에서 프로미스 기반의 API를 호출할 때 await을 사용하면 프로미스가 이행될 때까지 실행을 중단한 후, 프로미스가 이행되면 결과를 반환합니다. 에러를 처리하기 위해 try/catch 블록을 사용할 수 있습니다.

 

이번 글에서는 비동기 프로그래밍을 사용하기 위한 여러 접근 방식인 콜백, 프로미스, async/await에 대해 살펴보았습니다.

 

감사합니다.