[JavaScript] 자바스크립트에서 비동기 처리 패턴에 대해서 알아봅시다. (Callback, Promise, Generator, async/await)

[JavaScript] 자바스크립트에서 비동기 처리 패턴에 대해서 알아봅시다. (Callback, Promise, Generator, async/await)

📖 들어가며

비동기 처리 패턴을 알아보기 앞서, 비동기 처리란 무엇일까요?

비동기 처리란?
특정 코드의 연산이 완료될 때까지 전체 코드의 실행을 중단하지 않고, 다음 코드를 우선적으로 실행하는 방식을 말합니다.
이렇게 동작하는 함수를 자바스크립트에서는 '비동기 함수'라고 합니다.

 

비동기 처리의 한계점은 작업 완료 시점을 예측하기 어렵다는 점입니다.

하지만 이것은 비동기 처리의 본질적인 특성이며, 이를 효과적으로 관리하는 것이 중요합니다.

 

자바스크립트는 기본적으로 싱글 스레드(single-threaded) 기반의 언어로, 한 번에 하나의 작업만 처리할 수 있습니다.

즉, 자바스크립트는 코드가 작성된 순서대로, 위에서 아래로, 동기적으로 처리된다는 것을 의미합니다.

그렇다면 어떻게 자바스크립트가 비동기적인 동작을 가능하게 할 수 있을까요?
이에 대한 자세한 내용은 해당 글(Event Loop)을 참고해 주세요.

 

이번 포스팅은 제목 그대로 비동기를 처리하는 패턴에 대해서 알아보는 시간을 갖습니다.

 

비동기를 처리하는 패턴에는 아래와 같이 있습니다.

• 콜백(Callback) 함수
• 프로미스(Promise)
• 제너레이터(Generator)
• async/await

위 패턴들에 대해서 어떻게 사용되고 왜 등장했는지 알아봅시다.

비동기 처리 패턴 ⭐

콜백(Callback) 함수 패턴 💡

먼저, 콜백함수란 어떤 함수의 인자로 전달되는 함수를 의미합니다.

이러한 콜백 함수는 특히 비동기 처리를 위해 사용되며, 이 경우 비동기 콜백이라고 불립니다.

콜백 함수 패턴
특정 연산이 완료된 이후에 실행될 코드를 함수 형태로 정의하는 방식입니다.
그래서 이러한 방식은 자바스크립트의 초기 시절부터 널리 사용되어 왔습니다.

콜백 함수 예시

우리는 3초가 걸리는 작업이 있다고 가정합니다.

setTimeout함수를 이용해서 해당 작업이 완료된 후 다음 코드를 동작하도록 하고 싶습니다.

function getData() {
  setTimeout(() => {
    console.log('데이터를 받았습니다.');
  }, 3000);
}

getData();
console.log('작업이 끝났습니다!');

// 출력 순서
// 1. '작업이 끝났습니다!'
// 2. '데이터를 받았습니다.'

위 코드를 보면 자바스크립트는 동기적으로 작동하는 언어인데 왜 출력 순서가 마지막에 있는 '작업이 끝났습니다!'가 먼저 출력되었을까요?

 

바로 setTimeout은 비동기적으로 실행되는 비동기 함수이기 때문입니다.

setTimeout이 비동기적으로 실행될 수 있는 이유는 바로 setTimeout은 WebApis에서 관리되고 멀티 스레드 환경에서 실행되기 때문입니다. (이에 관련해서는 Event Loop의 지식이 필요합니다.)

 

setTiemout이 비동기적으로 실행되기 때문에 setTimeout의 작업을 기다리지 않고 다음 코드인 '작업이 끝났습니다'라는 결과가 먼저 출력되는 것입니다.

 

그런데, 이 결과는 우리가 바라는 결과가 아닙니다.

'데이터를 받았습니다.'를 출력하고 그다음 순서로 '작업이 끝났습니다!'라는 결과를 보려면 어떻게 해야 할까요?

 

이럴 때 비동기 콜백을 이용해서 원하는 결과를 얻을 수 있습니다.

function getData(callback) {
  setTimeout(() => {
    console.log('데이터를 받았습니다.');
    callback();
  }, 3000);
}

getData(() => console.log('작업이 끝났습니다!'));

// 출력 순서
// 1. '데이터를 받았습니다.'
// 2. '작업이 끝났습니다!'

위 코드와 같이 getData 함수의 인자로 콜백함수를 전달했습니다.

 

그래서 코드의 실행순서를 살펴보면

1. getData 함수에 '작업이 끝났습니다!'를 출력하는 콜백 함수 전달 및 실행
2. getData 함수의 setTimeout 함수 실행
3. 3초가 지난 뒤 setTimeout의 콜백 함수의 코드를 순차적으로 실행
4. '데이터를 받았습니다.' 출력
5. getData 함수에 전달된 콜백 함수가 실행되어 '작업이 끝났습니다!' 출력

이렇게 원하는 작업이 완료된 이후에 실행되도록, 즉 비동기적으로 동작하는 코드를 동기적으로 처리할 수 있게 되었습니다.

콜백 함수의 문제점

하지만, 여러 개의 작업을 처리하는 경우에 문제가 발생합니다.

function firstTask(callback) {
  setTimeout(() => {
    console.log('첫번째 작업 완료!');
    callback();
  }, 1500);
}

function secondTask(callback) {
  setTimeout(() => {
    console.log('두번째 작업 완료!');
    callback();
  }, 1000);
}

function thirdTask() {
  setTimeout(() => {
    console.log('세번째 작업 완료!');
  }, 500);
}

firstTask(() => {
  secondTask(() => {
    thirdTask();
  });
});

위 코드와 같이 점점 처리할 부분이 많아진다면 아래와 같은 코드로 변하게 됩니다.

콜백 지옥

위와 같은 현상을 바로 '콜백 지옥(Callback Hell)'이라고 표현합니다.

콜백 지옥은 비동기 작업이 서로 연결되어 있거나 순차적으로 실행되어야 할 때, 콜백 함수가 중첩되어 코드의 깊이가 깊어지고, 이로 인해서 가독성이 떨어지며, 유지보수가 어려워지는 현상입니다.

Promise

위에서 살펴본 콜백 지옥을 해결하기 위해 ES6에서 Promise라는 개념이 등장했습니다.

Promise란?
비동기 처리에 사용되는 자바스크립트 객체로, 비동기 작업의 최종 완료(또는 실패)와 그 결과 값을 나타냅니다.

 

Promise 객체는 '상태(state)'와 '값(result)'라는 두 가지 속성을 가지고 있습니다.

상태에는 대기(pending), 이행(fulfilled), 거부(rejected)의 세 가지 상태가 있습니다.

• 대기(pending): 아직 작업이 완료되지도 않았고, 실패하지도 않은 초기 상태
• 이행(fulfilled): 작업이 성공적으로 완료된 상태
• 거부(rejected): 작업이 실패한 상태

Promise 성공 상태 예시

위와 같이 예시로, 성공 상태인 Promise 객체를 출력하면, 상태는 'fulfilled'가 되고, 결과 값에는 성공 시 반환값이 담깁니다.

대기 상태에서는 결과 값에 'undefined'가 담기며, 실패 상태에는 에러의 내용이 담기게 됩니다.

Promise 객체는 한 번 성공하거나 실패하면 그 상태가 고정됩니다. 이로 인해서 안정적으로 비동기 처리를 할 수 있습니다.

 

또한, Promise는 then(), catch(), finally() 등의 메서드를 제공합니다.

• then(): Promise가 성공적으로 이행(완료)될 때 실행할 코드를 작성합니다.
• catch(): 작업이 거부(실패)했을 때 실행할 코드를 작성합니다.
• finally(): 작업의 성공, 실패 여부와 관계없이 마지막에 무조건 실행되어야 하는 코드를 작성합니다.

해당 메서드들도 Promise 객체를 반환합니다.

 

그리고 Promise 객체는 'executor'라는 함수를 인자로 받아 생성됩니다.

이 executor 함수는 new Promise 객체가 생성되자마자 실행되며, 두 개의 콜백 함수를 인자로 받습니다.

• resolve: 비동기 작업이 성공적으로 완료되었을 때 호출되는 함수. 이 함수를 통해 Promise는 성공(fulfilled) 상태가 됨.
• reject: 비동기 작업에 문제가 생겼을 때 호출되는 함수. 이 함수를 통해 Promise는 거부(rejected) 상태가 됨.

Promise 예제

아주 기본적인 Promise 예제를 보면 아래 코드와 같습니다.

const promise = new Promise((resolve, reject) => {
  const success = true; // 실제로는 어떤 비동기 작업의 결과에 따라 결정됨. 실패 및 성공에 대한 예시일 뿐입니다.

  if (success) {
    // 비동기 작업이 성공한 경우
    resolve('작업이 성공적으로 완료되었습니다.');
  } else {
    // 비동기 작업이 실패한 경우
    reject('작업에 실패하였습니다.');
  }
});

promise
  .then((message) => {
    // Promise가 성공된 경우 실행될 함수
    console.log('성공 메시지: ' + message);
  })
  .catch((message) => {
    // Promise가 거부된 경우 실행될 함수
    console.log('실패 메시지: ' + message);
  })
  .finally(() => {
    // 성공, 실패 여부와 상관 없이 마지막에 실행
    console.log('작업이 끝났습니다');
  });

 

그럼 이전에 비동기 콜백을 Pomise로 처리하게 되면 어떻게 바뀔 수 있을까요?

바로 아래와 같이 변할 수 있습니다.

function firstTask() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('첫번째 작업 완료!');
      resolve();
    }, 1500);
  });
}

function secondTask() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('두번째 작업 완료!');
      resolve();
    }, 1000);
  });
}

function thirdTask() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('세번째 작업 완료!');
      resolve();
    }, 500);
  });
}

firstTask()
  .then(() => secondTask())
  .then(() => thirdTask())
  .catch((error) => console.log(error));

위와 같이. then 메서드를 연속적으로 호출하여 여러 개의 Promise를 연결하는 방식을 Promise 체인이라고 합니다.

Promise 체인을 통해서 비동기 작업의 결과를 이어받아 사용하거나, 여러 비동기 작업을 순차적으로 실행하여, 구조화된 코드를 작성할 수 있습니다.

 

아래 코드와 같이 더 깔끔하게 표현할 수도 있습니다.

firstTask()
  .then(secondTask)
  .then(thirdTask)
  .catch(console.log);

 

하지만, 이런 방식은 체인이 길어질수록 결국 가독성이 떨어지게 됩니다.

function firstTask() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('첫번째 작업 완료!');
      resolve('첫번째 작업 결과');
    }, 1500);
  });
}

function secondTask(result) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('두번째 작업 완료!');
      resolve(result + ' -> 두번째 작업 결과');
    }, 1000);
  });
}

function thirdTask(result) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('세번째 작업 완료!');
      resolve(result + ' -> 세번째 작업 결과');
    }, 500);
  });
}

function fourthTask(result) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('네번째 작업 완료!');
      resolve(result + ' -> 네번째 작업 결과');
    }, 200);
  });
}

firstTask()
  .then((result) => {
    // 추가적인 작업을 수행하고 그 결과를 다음 Promise로 전달
    const processedResult = result + ' -> 중간 처리';
    console.log(`첫번째 작업 후 처리: ${processedResult}`);
    return secondTask(processedResult);
  })
  .then((result) => {
    // 추가적인 작업을 수행하고 그 결과를 다음 Promise로 전달
    const processedResult = result + ' -> 중간 처리';
    console.log(`두번째 작업 후 처리: ${processedResult}`);
    return thirdTask(processedResult);
  })
  .then((result) => {
    // 추가적인 작업을 수행하고 그 결과를 다음 Promise로 전달
    const processedResult = result + ' -> 중간 처리';
    console.log(`세번째 작업 후 처리: ${processedResult}`);
    return fourthTask(processedResult);
  })
  .then((finalResult) => console.log(`최종 결과: ${finalResult}`))
  .catch((error) => console.log(error));

Promise는 콜백 지옥 문제를 해결하기 위해 도입되었으나, 메서드 체이닝을 통한 연속적인 비동기 작업 처리는 가독성을 여전히 떨어뜨릴 수 있습니다.

 

하지만 이런 단점을 감수하더라도, Promise는 그 자체로 큰 가치를 가지고 있습니다.

나름의 표준을 정해놓고 결과를 예측하기 쉽게 만들어주며, 코드의 신뢰성을 높이는 데 크게 기여하기 때문입니다.

제너레이터(Generator)

제너레이터 또한 ES6에 도입된 개념입니다.

제너레이터란?
제너레이터는 코드 블록의 실행을 일시 중지 했다가 필요한 시점에 재개할 수 있는 특수한 함수입니다.
일반 함수와는 다르게, 제너레이터 함수를 호출하면 바로 함수의 내용이 실행되지 않고, 제너레이터 객체가 반환됩니다.

 

제너레이터 객체는 이터러블(iterable)이면서 동시에 이터레이터(iterator)입니다.

• 이터러블(iteralble): 반복 가능한 자료구조를 의미합니다. 여기서 반복 가능하다는 것은 각 요소를 한 번에 하나씩 처리할 수 있다는 뜻입니다. 이터러블 객체는 [Symbol.iterator] 메서드를 구현해야 합니다. 이 메서드를 호출하면 이터레이터를 반환하고, 배열, 문자열, Map, Set 등이 이터러블에 해당됩니다. 이터러블을 사용하면 for...of 반복문, 스프레드 연산자(...), 구조 분해 할당 등에서 사용할 수 있습니다.
• 이터레이터(iterator): '다음' 요소를 반환하는 next() 메서드를 가진 객체를 의미합니다. next() 메서드는 {value, done} 형태의 객체를 반환하며, value는 다음 값이고, done은 제너레이터 함수가 모두 실행되어 종료되었는지의 여부입니다.

제너레이터 사용 방법

• function* 키워드로 선언됩니다.
• yield 키워드를 사용하여 함수의 실행을 중단하고 재개할 수 있습니다.
• next 메서드를 호출하면 제너레이터가 처음부터 실행되거나, 이전에 yield 키워드에서 멈췄던 부분부터 실행됩니다.
• next 메서드에 인자를 전달하면, 그 값은 제너레이터 함수 내부에서 yield 키워드의 결과값으로 사용됩니다.
• yield 키워드는 제너레이터 함수의 실행을 멈추고, 실행 권한을 호출자에게 양도합니다.
• 이후에 next 메서드가 호출되면 실행 권한이 다시 제너레이터 함수에게 이동합니다.
• 함수는 yield 키워드 이후의 부분부터 실행을 이어갑니다.

function* generatorFunction() {
  console.log('함수 시작');
  const x = yield 1;
  console.log('첫 번째 yield 이후 ' + x);
  yield 2;
  console.log('두 번째 yield 이후');
  return 3; // 제너레이터 함수가 종료되면서 반환하는 값
}

const generator = generatorFunction();

const one = generator.next(); // '함수 시작'
console.log(one); // {value: 1, done: false}
const two = generator.next(99); // '첫 번째 yield 이후 99'
console.log(two); // {value: 2, done: false}
const three = generator.next(); // '두 번째 yield 이후'
console.log(three); // {value: 3, done: true}

이렇게 제너레이터를 사용하면 함수의 실행을 세밀하게 제어할 수 있습니다.

즉, 비동기 작업을 동기적인 방식으로 작성할 수 있게 해 줍니다.

async/await

async/await은 ES8에 도입되었습니다.

프로미스(Promise)를 기반으로 하며, 이전보다 더욱 비동기 처리를 쉽게 할 수 있게 되었습니다.

 

async/await은 기존에 비동기 처리를 위해 사용되는 프로미스(Promise)와 제너레이터(Generator)의 문제점을 해결하기 위해 등장했습니다.

 

이전의 내용에 대해 문제점을 간단히 정리하자면 아래와 같습니다.

Promise의 문제점

• 체이닝: 프로미스가 연속적으로 이어지는 경우, 코드가 복잡하고 가독성이 떨어진다.
• 예외 처리: 예외를 적절히 처리하기 위해서는 각 프로미스마다 에러 핸들러르 붙어주어야 한다. 이로 인해 코드를 복잡하게 만든다.

제너레이터의 문제점

• 이해하기 어렵다: 이터러블과 이터레이터의 개념을 이해해야 하며, 이 자체로도 쉬운 내용은 아니다.
• 직접 제어: 함수의 실행을 제어하기 위해서는 제너레이터 객채의 next 메서드를 직접 호출해야 한다.

즉, async/await은 위와 같은 문제점들을 해결하고자 도입되었습니다.

프로미스를 기반으로 하며, 제너레이터와 유사한 동작 방식을 갖고 있습니다.

async 함수

async는 비동기 함수를 정의할 때사용됩니다.

항상 Promise를 반환하며, 만약 반환 값이 프로미스가 아니라면, Promise.resolve 메서드에 의해서 자동으로 Promise를 감싸서 반환합니다.

async/await 예제

await 키워드

await 키워드는 async 함수 내부에서만 사용이 가능합니다.

 

비동기 작업을 마치 동기적으로 수행하는 것처럼 할 수 있으며, await 키워드는 함수의 진행을 멈춥니다.

즉, 프로미스의 완료를 기다리게 됩니다.

async function asyncFunction() {
    const value1 = await doSomethingAsync();
    const value2 = await doSomethingElseAsync(value1);
    const value3 = await doAnotherAsyncThing(value2);
    return doSomethingWith(value3);
}

주의할 점 ❗
프로미스를 반환하지 않는 연산에 await를 사용하면, 그 연산은 즉시 해결된 Promise로 간주되어 await 키워드가 별도의 효과를 갖지 않게 됩니다.

사용 예시

async function runTasks() {
  try {
    const firstResult = await firstTask();
    console.log('첫번째 작업 결과:', firstResult);

    const secondResult = await secondTask(firstResult);
    console.log('두번째 작업 결과:', secondResult);

    const thirdResult = await thirdTask(secondResult);
    console.log('세번째 작업 결과:', thirdResult);

    const fourthResult = await fourthTask(thirdResult);
    console.log('네번째 작업 결과:', fourthResult);
  } catch (error) {
    console.error('작업 중 에러 발생:', error);
  }
}

runTasks();

각각의 작업은 await 키워드를 사용하여 프로미스가 이행될 때까지 기다립니다.

만약 프로미스가 거부되면, catch 블록에서 에러를 처리할 수 있습니다.

이렇게 async/await을 사용하면 비동기 작업의 흐름을 동기적인 방식으로 쉽게 표현할 수 있습니다.

마무리 📕

콜백함수부터 async/await까지 기존의 비동기 처리에 있어서 어떤 불편함이 있었고 어떻게 개선되었는지에 대해 알아보는 시간이었습니다.

 

참고문헌:

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Generator
• https://seo-tory.tistory.com/77
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise
• https://youtu.be/mYHVOTxEwlY?si=KBZGmUCif3RJE1eM
• https://www.youtube.com/watch?v=6-8mbuUC3fk
• https://www.youtube.com/watch?v=qi24UqyJLgs
• https://www.youtube.com/watch?v=ZrdHtL1gcEI