Javascript_비동기 프로그래밍

비동기(Asynchronous) 프로그래밍

비동기 프로그래밍(Asynchronous Programming)은 오래 걸리는 작업을 처리하는 동시에 해당 작업이 끝나기 전에 다른 작업들도 수행하는 기술이다.

주로 HTTP 요청(fetch()), getUserMedia()로 유저의 I/O 정보 접근, showOpenFilePicker()로 유젖가 파일을 올리는 작업 등 잠재적으로 시간이 소요될 것 같은 작업들에 비동기가 주로 적용된다.

동기(synchronous) 프로그래밍

const brand = 'Margiela';
const comment = `Thank you for visiting ${brand}'s fashion show`;
console.log(comment);

위 코드에서 프로그램은 라인 한줄씩 차근차근 실행한다. 이를 동기적인 프로그램이라 할 수 있다. 따로 함수를 빼더라도 결국 그에 맞는 순서대로 실행되는 것은 동일하다.

하지만 동기 함수의 수행 시간이 길어지면 이야기가 달라진다. 동기적으로 프로그램이 실행될 경우, 작업이 수행되는 동안 유저는 멍하니 기다리고 있어야 한다. 따라서 작업이 진행되는 동안 다른 일도 수행할 수 있도록 해주면 좋기 때문에 이런 경우 비동기 프로그래밍이 필요하다.

이벤트 핸들러(Event handlers)

이벤트 핸들러는 대표적인 비동기 프로그래밍의 예시다. 어떤 이벤트가 발생할 때 콜백이 실행된다.

초기 비동기 API들은 이런 방식으로 작동했다. 예를 들어 XMLHttpRequest API는 자바스크립트로 원격 서버에 HTTP 요청을 하면 이후 loadend 이벤트를 리스닝하는 방식으로 비동기적으로 처리했다.

Callbacks

이벤트 핸들러는 콜백의 특정 유형 중 하나다. 콜백은 다른 함수에 전달되는 또 다른 함수다. 콜백이 다른 콜백을 부르는 흐름이 반복되면 코드의 가독성이 떨어져 디버깅이 어려워진다는 문제가 발생하기도 한다. 이를 콜백 헬이라 많이 부른다.

function doOperation() {
  doStep1(0, (result1) => {
    doStep2(result1, (result2) => {
      doStep3(result2, (result3) => {
        console.log(`result: ${result3}`);
      });
    });
  });
}

Solution

오늘날 자바스크립트 진영에서는 콜백의 가독성 문제로 인해 콜백 대신 Promise를 사용했다. 하지만 ES8 이후로 async/await 가 도입되면서 Promise 결과를 then, catch로 다루지 않아도 바로 동기적으로 변수에 바로 담을 수 있다는 점에서 자주 async/await를 자주 사용하곤 한다.

Reference

• https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Promises
• https://velog.io/@coin46/%EB%B9%84%EB%8F%99%EA%B8%B0%EB%A5%BC-%EC%B2%98%EB%A6%AC%ED%95%98%EB%8A%94-%EC%BD%9C%EB%B0%B1-Promise-asyncawait