비동기적 실행이 필요한 이유

비동기란

비동기(asynchronous)를 이해하기 위해서는 우선 동기(synchronous)가 무엇인지 알아야 한다. 자바스크립트는 기본적으로 싱글쓰레드 방식으로 동작하기 때문에 한 번에 한 가지 일만 수행할 수 있다. 이러한 자바스크립트의 본성 탓에 비동기적인 프로그래밍이 필요하다고 할 수 있다. 물론, 싱글쓰레드에서 비동기적인 프로그래밍을 한다고 해서 멀티쓰레드처럼 동시 다발적인 실행이 가능해지는 것은 아니지만, 싱글쓰레드라고는 하나 사람이 인지할 수 없을 정도로 찰나의 시간으로 순차적인 실행이 이루어지기 때문에 동시에 실행되는 것과 다름없게 느껴진다. 이러한 배경으로 인해 동기적 프로그래밍이 문제가 되지 않던 시절도 있었지만, 현재의 웹은 너무나도 커지고 복잡해졌기 때문에 사용자의 동시 다발적인 요청에 빠르게 응답하기 위하여 비동기적 프로그래밍이 불가피해졌다. 위와 같은 내용으로 짐작 가능하겠지만, 결국 비동기라는 것은 동시다발적인 요청에 응하기 위해 싱글쓰레드에서 할 수 있는 최선의 방식 이라고 할 수 있다.

동기와 비동기의 차이

예를 들어 카페에서 커피를 주문하는 상황이라고 해보자. 동기카페 에서는 커피를 주문하면, 주문한 커피를 받을 때까지 카운터 앞에서 자리를 지켜야만 한다. 반면에 비동기카페 에서는 주문을 하면 진동호출기를 나누어 주고, 이것을 갖고 장소를 옮기거나 다른 용무를 볼 수 있다. 그리고, 주문한 커피가 준비되면 진동호출벨이 울려 주문자가 알 수 있다.

콜백(call back)

콜백은 자바스크립트에 존재하는 가장 고전적인 비동기적 프로그래밍 방식이다. 함수를 parameter로 받는 함수의 형태를 하고 있는, 고차함수(high order function)의 형태로 사용을 하며, 지정한 타이밍이 되면 콜백함수가 실행되며 제어권을 넘겨받는다. 가장 대표적인 예시로는 setTimeout이 있다.

console.log('1');
setTimeout(() => console.log('2'), 1000);
console.log('3');

위의 코드를 실행하면, 1, 2, 3이 아닌 1, 3, 2를 볼 수 있다. 그렇다고 해서 setTimeout이 마지막에 실행된 것은 아니다. 1이 출력된 이후 setTimeout은 실행되었고 1초 뒤에 2를 출력하도록 예약을 걸었을 것이다. 그리고, 정해진 시간 뒤에 우선적으로 2가 출력되는 것이다. 만약 동기적으로 실행되며, 1초 뒤에 다른 작업이 진행 중이라면 2의 출력은 블로킹(blocking) 되어 1초보다 더 나중에서야 출력됐을 테지만, 비동기이기에 그러한 일은 벌어지지 않았다.

이처럼 반드시 실행되어야 하는 코드에 대해서 비동기적인 프로그래밍이 필요하다. 비동기적인 프로그래밍이 요구되는 대표적인 경우는 다음과 같은 것들이 있다.

• Ajax 호출을 비롯한 네트워크 요청
• 파일을 읽고 쓰는 등의 파일시스템 작업
• 의도적으로 시간을 지연시켜 실행을 예약해야 하는 작업

다만, 콜백으로 비동기 작업을 수행하기에는 한계가 있다. 끔찍하다고 소문이 자자한 콜백 지옥(call back hell) 도 있고 말이다. 그래서 등장한 것이 프라미스다.

참고:

• poiemaweb | 동기와 비동기
• 코어자바스크립트 | 콜백
• 코어자바스크립트 | 프라미스