비동기 호출(Asynchronous call)

🔍 비동기?

callback review

• 다른 함수(A)의 전달인자로 넘겨주는 함수(B)
• parameter를 넘겨받는 함수(A)는 callback함수(B)를 필요에 따라 즉시 실행(동기)할 수도 있고, 나중에 실행(비동기)할 수도 있다.

function B(){
  console.log('called at the back!');
}

function A(callback){
  callback(); // callback === B
}

A(B);

blocking vs non.blocking

<연락을 주고 받을 때>

전화	문자
하던 일을 멈추고 받아야 함(blocking)	확인 후, 나중에 답장 가능(non-blocking)
요청에 대한 결과가 동시에 일어남(synchronous)	요청에 대한 결과가 동시에 일어나지 않음(asynchronous)

<커피 주문 시>

커피 주문이 동기적이라면?

1. 손님1: 아메리카노 주문
2. 아메리카노 만듦
3. 아메리카노 전달
4. 손님2: 카페라떼 주문
5. 카페라떼 만듦
6. 카페라떼 전달

손님 2는 손님1이 커피를 받을 때까지 주문도 하지 못하고 대기열에 머물러 있어야한다.

but 비동기적?

1. 손님1: 아메리카노 주문 // 요청에 blocking이 없음
   1-1. 아메리카노 만듦 // 응답은 비동기적
   1-2. 아메리카노 완성, 손님1 부름
   1-3. 아메리카노 전달
2. 손님2: 카페라떼 주문
   2-1. 카페라떼 만듦 // 응답은 비동기적
   2-2. 카페라떼 완성, 손님2 부름
   2-2. 카페라떼 전달

주문: call
완성: event
손님을 부름: callback(eventhandler)

👀 실제 작동 예시

아래의 두 코드를 비교해보면서 차이점을 찾자.

✔ 동기 함수 (call syncronously)

function waitSync(ms){
    var start = Date.now();
    var now = start;
    while(now - start < ms){
        now = Date.now();
    }
} // 현재 시각과 시작 시간을 비교하며 ms범위 내에서 무한 루프를 도는 blocking 함수이다.

function drink(person, coffee){
    console.log(person + '는' + coffee + '를 마십니다.');
}

function orderCoffeeSync(coffee){
    console.log(coffee + '가 접수되었습니다.');
    waitSync(2000); //2초 기다림
    return coffee;
}

let customers = [{
    name: 'Steve',
    request: '카페라떼'
},{
    name: 'John',
    request: '아메리카노'
}]

// call syncronously
customers.forEach(function(customer){
    let coffee = orderCoffeeSync(customer.request);
    drink(customer.name, coffee);
});

아래는 출력결과이다.

동기 함수의 과정이 순차적으로 수행되는 것을 확인할 수 있다.

카페라떼가 접수되었습니다.
Steve는카페라떼를 마십니다.
아메리카노가 접수되었습니다.
John는아메리카노를 마십니다.
undefined

✔ 비동기 함수 (call asyncronously)

function waitAsync(callback, ms){
   // 특정 시간 이후에 callback 함수가 실행되게 끔 하는 브라우저 내장 기능이다.
    setTimeout(callback,ms);
} 

function drink(person, coffee){
    console.log(person + '는' + coffee + '를 마십니다.');
}


let customers = [{
    name: 'Steve',
    request: '카페라떼'
},{
    name: 'John',
    request: '아메리카노'
}]

function orderCoffeeAsync(menu, callback){
    console.log(menu + '가 접수되었습니다.');
    waitAsync(function(){
        callback(menu);
    },2000); // 2초 기다림
}

// call Asyncronously
customers.forEach(function(customer){
    orderCoffeeAsync(customer.request, function(coffee){ // callback pattern
        drink(customer.name, coffee); 
    });
});

아래는 출력결과이다.

주문이 동시에 수행되고, 주문에 대한 callback이 나중에 수행되는 것을 확인할 수 있다.

카페라떼가 접수되었습니다.
아메리카노가 접수되었습니다.
undefined
Steve는카페라떼를 마십니다.
John는아메리카노를 마십니다.

✔ 비동기 함수 전달 패턴

⚙ 비동기의 주요 사례

◾ DOM Element의 이벤트 핸들러

• 마우스, 키보드 입력(click, keydown 등)
• 페이지 로딩(DOMContentLoaded 등)

◾ 타이머

• 타이머 API(setTimeout 등)
• 애니메이션 API(requestAnimationFrame)

◾ 서버에 자원 요청 및 응답

• fetch API
• AJAX (XHR)

Reference: 코드스테이츠