비동기를 이해하는 방법 - 비동기 처리, 콜백

처음 자바스크립트를 공부하다보면 비동기에 대한 개념을 자주 접할 수 있다.
언뜻 이해는 가지만 설명할 수는 없는 비동기 처리.

(그냥..마음으로 느끼는 비동기..)

이처럼 자바스크립트에서 비동기가 특별한 일(?)이 되려면 먼저 자바스크립트의 특징에 대해 알아야 한다.

자바스크립트의 특징

JavaScript의 특징은 Synchronous, Single thread, Blocking 이다.

동기(synchronous)란?
현재 실행 중인 작업을 종료할 때까지 다음에 실행될 작업이 대기하는 방식.
하나씩 순서대로 작업을 처리하므로 실행 순서가 보장된다는 장점이 있지만, 앞선 작업이 종료될 때까지 이후 작업들을 처리하지 못하는 단점이 있다.

• 자바스크립트 엔진은 단 하나의 실행 컨텍스트를 갖는다. 함수를 실행하는 창구가 단 하나이며 동시에 2개 이상의 함수를 동작할 수 없다는 것을 뜻한다.
• 자바스크립트 엔진은 한 번에 하나의 작업만 실행할 수 있는 single thread방식으로 동작한다.
• 자바스크립트는 함수를 순차적으로 실행하기 때문에 처리 시간이 오래 걸리는 작업을 실행하는 경우, 이전 작업이 종료되기 전까지 blocking(작업 중단)이 발생한다.

SYNCHRONOUS
   |--------A--------|                  |--------C--------|
                     |--------B--------|

비동기 프로그래밍

---

비동기(asynchronous)란?
현재 실행중인 작업을 종료하지 않아도 다음 작업을 곧바로 실행하는 방식.

ASYNCHRONOUS
   |--------A--------|
         |--------B--------|
                        |--------C--------|

• 대표적인 예로 setTimeout함수가 있다.

setTimeout(function () {
  console.log("Hello World");
}, 3000);

실행 컨텍스트 이해하기

함수를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 생성된다. 이때 생성된 함수 실행 컨텍스트는 실행 컨텍스트 스택(콜 스택)에 푸시되고 함수 코드가 실행 된다.
함수 코드의 실행이 종료하면 함수 실행 컨텍스트는 실행 컨텍스트 스택에서 팝되어 제거된다.

그렇다면 동기적으로 작동하는 자바스크립트 환경에서 비동기적인 처리를 하기 위해서는 어떤 작업이 필요할까?

비동기 처리를 위한 패턴

• Callback
• Promise
  - async / await

Callback 함수

함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수

잠만.. 함수의 매개변수를 통해.... 다른 함수의 내부로... 전달되는 함수..
근데 그걸 왜 call back이라고 부르나요? 🤷

파워 문과의 이미지 학습법을 활용하여 상상해보면
callback.. 지금 당장이 아니라, 어떤 함수의 인자로 콜백 함수를 호출할 때 헐레벌떡 달려와서 자기 역할을 다하기 위해 실행되는 콜백 함수의 모습을 떠올려 본다. (헛소리를 당당하게 하는 편)

위에서 말한 콜백 함수를 전달받는 "어떤 함수"는 고차함수라고 한다.
고차 함수는 콜백 함수를 자신의 일부분으로 합성한다.

• 콜백은 고차함수 내부에서 바로 구현할 수 있다.

• 콜백은 자주 사용한다면 함수 외부에서 따로 정의할 수 있다.

• 콜백은 배열 메서드에서 사용되기도 한다.

// 배열 메소드
arr.map();
arr.filter(); 
arr.reduce();

• 물론 콜백은 무엇보다 비동기 처리에서 중요하게 활용된다.
  위에서 보았던 setTimeout함수가 콜백함수를 인자로 받는 것이다!
• 그러나 콜백 함수에는 단점이 존재하는데, 콜백 체이닝으로 1억 개의 함수를 호출해야 한다면?
  코드는 가독성이 떨어지고 복잡해지는 과정을 겪는다. 흔히 '콜백지옥' 이라 불린다.

이러한 점을 해결하기 위해 사용할 수 있는 패턴이 Promise다.

프로미스는 다음 시간에 🔜

참고한 자료

모던 자바스크립트 딥다이브