🧮 비동기 처리 방식

🧮 동기 처리 방식과 비동기 처리 방식

기본적으로 자바스크립트 프로그램은 소스가 작성된 순서대로 소스를 처리하는데, 이것을 '동기 처리 방식'이라고 합니다.
커피숍을 예를 들겠습니다. 동기 처리 방식은 A라는 사람이 커피를 주문하면 그 주문을 받아서 커피를 만들고 A에게 넘겨주어야 하나의 동작이 끝납니다. 반면 비동기 처리 방식은 A라는 사람이 커피를 주문하면 그 주문을 주방으로 넘기고, A에게는 진동벨을 주면서 커피가 완성되면 알려 주겠다고 합니다. 그리고 대기하고 있던 B의 주문을 받고 진동벨을 건네줍니다. 다른 사람의 주문을 받는 동안에 A의 커피가 완성되면 A에게 알려 주죠.

🧮 동기 처리 방식

function displayA(){
  console.log("A");
}

function displayB(){
  console.log("B");
}

function displayC(){
  console.log("C");
}

displayA();
displayB();
displayC();

/*output 
A 
B 
C
*/

위 예시에는 3개의 함수가 있고 이들 함수를 순서대로 실행하면 콘솔 창에 A, B, C의 순으로 표시됩니다.

🧮 자바스크립트는 싱글 스레드 언어.

자바스크립트는 기본적으로 한 번에 하나의 작업만 처리하는 싱글 스레드(single thread) 언어입니다. 스레드(thread)는 프로세스에서 작업을 실행하는 단위를 가리키는데, 한 번에 하나의 스레드만 처리하면 '싱글 스레드', 한 번에 여러 개의 스레드를 사용한다면, '멀티스레드'라고 합니다. 자바스크립트에는 한 번에 하나씩만 처리하는 싱글 스레드 방식으로 동작합니다. 예를 들어 세 가지 함수 중에서 특정 함수를 실행하는데 시간이 더 걸린다고 가정해 보겠습니다. setTimeout()함수를 사용해서 실행 시간을 늦춰 보겠습니다.

function displayA(){
  console.log("A");
}

function displayB(){
  setTimeout(() => console.log("B"), 2000) ;
}

function displayC(){
  console.log("C");
}

displayA();
displayB();
displayC();

/*output 
A 
C
B 
*/

A와 C를 표시하는 함수는 즉시 실행되지만, B를 표시하는 함수는 2초 후에 실행되도록 작성했습니다. 일단 소스만 살펴보면 콘솔 창에 A를 표시하고, 2초 후에 B를 표시한 후 다시 C를 표시할 것 입니다. 하지만 2초가 아니라 30초라면 시간뿐만 아니라 시스템 자원도 많이 낭비됩니다. 그래서 중간에 시간이 많이 걸리는 소스가 있다면 별도로 처리하고, 그 다음에 있는 소스를 먼저 실행합니다.
자바스크립트에서는 함수의 실행 시간에 따라 오래 걸리는 것은 별도로 처리하고 실행이 끝났을 때 결과를 반환합니다.

🧮 비동기 처리 방식

프로그램에서는 여러 개의 함수를 작성하는데, 실행 시간이 다른 함수들을 원하는 처리 순서에 맞게 프로그래밍하는 것을 '비동기 처리'라고 합니다.
자바스크립트는 시간이 걸리는 작업이 있을 경우 시간이 걸리는 작업을 따로 처리하고, 빨리 끝나는 작업을 먼저 처리합니다. 하지만 프로그램에 따라 이런 실행 순서를 조절해야 할 때가 있습니다. 예를 들어 서버에서 자료를 가져와서 화면에 표시한다면 서버에서 자료를 가져올 때 아무리 많은 시간이 걸려도 자료를 가져오는 함수 다음에 화면에 표시하는 함수를 실행해야 합니다.

function displayB(callback){
  setTimeout(() => {
    console.log("B");
    callback(),
  }, 2000);
}

function displayC(){
  console.log("C");
}

displayA();
displayB(displayC)

/*output 
A 
B 
C
*/

예제 코드를 보면 displayC() 함수는 displayB() 함수에 이어서 실행해야 하므로 displayB(displayC)처럼 작성했습니다. displayC()에게 진동벨을 주면서 displayB()가 끝나면 실행하도록 하는 거죠. displayB()라는 함수에 displayC() 함수를 인수로 사용하는데, 이것을 '콜백(callback)함수'라고 합니다.
위의 예제를 콘솔창에서 확인하면 A를 표시하고 잠시 기다렸다가 B와 C를 표시합니다.
자바스크립트에서 비동기 방식으로 처리하려면 콜백함수, 프로미스, (async, await) 크게 세 가지 방법을 사용할 수 있습니다.

🧮 비동기 처리와 콜백 함수

콜백 함수란, 다른 함수의 매개변수로 사용하는 함수입니다.

-함수 이름을 콜백으로 사용하기
콜백으로 비동기 처리하는 방법을 알아보겠습니다. 예를 들어 사용자가 커피를 주문한 후 3초 후에 커피가 준비되었다고 알려 주는 프로그램을 작성해보겠습니다.

function order(coffee, callback) {
  console.log(`${coffee} 주문 접수`);
  setTimeout(() =>{
    callback(coffee);
  }, 3000)
}

function display(result) {
  console.log(`${result} 준비 완료`);
}

order("아메리카노", display)
/*output 
아메리카노 주문 접수
아메리카노 준비 완료
*/

콜백을 사용한다면 커피가 준비되었다고 표시하는 display() 함수를 order() 함수의 매개변수로 넘기면 됩니다.

-익명으로 콜백 함수 작성하기
콜백 함수를 사용할 때 함수 이름도 사용하지만, 함수 안에 직접 익명 함수로 작성하기도 합니다. 예를 들어 A를 표시한 후 1초마다 B, C, D, stop! 순서로 표시하면 다음과 같이 작성할 수 있습니다.

function displayLetter(){
  console.log("A");
  setTimeout(() => {
    console.log("B")
    setTimeout(() => {
      console.log("C")
      setTimeout(() => {
        console.log("D")
        setTimeout(() => {
          console.log("stop!")
        },1000)
      }, 1000)
    }, 1000)
  }, 1000)
}

콜백 함수에 다른 콜백 함수가 계속 들어가면 소스의 가독성이 떨어지고, 오류가 발생했을 때 디버깅하기 어렵습니다. 이렇게 콜백이 계속 반복되는 상태를 '콜백 지옥(callback hell)'이라고 합니다.

이미지 출처- https://makeameme.org/meme/asynchronous-synchronous#google_vignette
원문 출처- Do it! 모던 자바스크립트 프로그래밍의 정석(이미스퍼블리싱)