JavaScript의 비동기 프로그래밍: 콜백, 프로미스, async/await

​
요약: 이 글에서는 JavaScript에서 비동기 프로그래밍을 처리하는 방법 중 콜백, 프로미스, async/await에 대해 설명합니다. 개발자들이 일하다가 모르는 것이 있다면 이 글을 참고하여 비동기 프로그래밍을 더 잘 이해하고 활용할 수 있습니다.

콜백(Callback)

콜백은 함수를 다른 함수의 인자로 전달하는 방식으로, 비동기 작업을 처리하는 가장 기본적인 방법입니다. 콜백 함수는 비동기 작업이 완료되었을 때 호출됩니다.

콜백 예제

function fetchData(callback) {
  setTimeout(() => {
    const data = 'Hello, callback!';
    callback(data);
  }, 1000);
}

fetchData((result) => {
  console.log(result); // 'Hello, callback!'
});

콜백 지옥(Callback Hell)

콜백을 사용하여 비동기 작업을 처리할 경우, 중첩된 콜백이 많아지면 코드의 가독성이 떨어지고 관리하기 어려운 문제가 발생합니다. 이를 콜백 지옥(Callback Hell)이라고 합니다.

프로미스(Promise)

프로미스는 비동기 작업의 결과를 나타내는 객체로, 콜백 지옥의 문제를 해결하기 위해 도입되었습니다. 프로미스는 대기(pending), 이행(fulfilled), 거부(rejected) 상태를 가집니다.

프로미스 예제

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = 'Hello, Promise!';
      resolve(data);
    }, 1000);
  });
}

fetchData().then((result) => {
  console.log(result); // 'Hello, Promise!'
});

프로미스 체이닝(Promise Chaining)

프로미스를 사용하면, then 메서드를 통해 여러 개의 비동기 작업을 순차적으로 처리할 수 있습니다. 이를 프로미스 체이닝이라고 합니다.
​

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

async/await

async/await는 ES2017에서 도입된 비동기 작업 처리를 위한 문법으로, 프로미스를 사용한 코드를 더 간결하게 작성할 수 있습니다. async 함수는 항상 프로미스를 반환하며, await 키워드는 프로미스가 이행될 때까지 대기합니다.

async/await 예제

async function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const data = 'Hello, async/await!';
            resolve(data);
        }, 1000);
    });
}

async function main() {
    const result = await fetchData();
    console.log(result); // 'Hello, async/await!'
}

main();

async/await와 프로미스 체이닝

async/await를 사용하면 프로미스 체이닝을 더 간결하게 작성할 수 있습니다. 다음은 프로미스 체이닝과 async/await를 사용한 예제입니다.
​

// 프로미스 체이닝
fetchData()
  .then((result) => {
    console.log(result);
    return fetchData();
  })
  .then((result) => {
    console.log(result);
  });

// async/await
async function asyncMain() {
  const result1 = await fetchData();
  console.log(result1);
  const result2 = await fetchData();
  console.log(result2);
}

asyncMain();

​

이 글에서는 JavaScript에서 비동기 프로그래밍을 처리하는 방법 중 콜백, 프로미스, async/await에 대해 설명했습니다. 이러한 기술을 활용하면 비동기 작업을 더 효율적으로 처리할 수 있으며, 코드의 가독성과 유지보수성을 높일 수 있습니다. 개발자들이 일하다가 모르는 것이 있다면 이 글을 참고하여 비동기 프로그래밍을 더 잘 이해하고 활용할 수 있기를 바랍니다.
​
​
#JavaScript #비동기프로그래밍 #콜백 #Callback #프로미스 #Promise #async-await #코드개선 #예제