Part. 9 비동기 호출 Asynchronous

빈지노-always awake

• 실제로 협업에서 JavaScript 코드를 작성하다보면, 코드의 작동이 비동기로 이루어지는 경우가 있다.

• 외부 API 이용은 비동기로 이루어진다. (서버를 갔다오는동안에 client가 멈춰 있으면 안되기 때문, 자바스크립트는 싱글 쓰레드)
  ex) 클라이언트-서버, 이벤트 핸들링, 애니메이션 등

callback review

• 다른 함수(A)의 전달인자(argument)로 넘겨주는 함수(B)
• parameter를 넘겨주는 함수(A)는 callback 함수(B)를 필요에 따라 즉시 실행(synchronously)할수도 있고, 아니면 나중에 (asynchronously) 실행할 수도 있다.

ex)
function B() {
  console.log('called at the back!;);
  }
function A(callback) {
  callback(); // callback === B
  }
  
  A(B);

• callback in action : 반복 실행하는 함수(iterator)

ex)
[1,2,3] .map (function (element,index) {
  return element * element;
});

• callback in action : 이벤트에 따른 함수(event handler)

document.querySelector('#btn').addEventListener('click', function(e) {
  console.log ('button clicked') ;
});

ex)

function handleClick() {
  console.log('button clicked');
};

>document.querySelector('#btn').onclick = handleClick;
>document.querySelector('#btn').onclick = function () {
  handleClick();
}
>document.quertSelector('#btn').onclick = handleClick.bind();

blocking vs. non-blocking

• blocking : 하던일을 멈추고 해야한다, 요청에 대한 결과가 동시에 일어난다.
• non- blocking : 확인후, 나중에 할수 있다. 요청에 대한 결과가 동시에 일어나지 않는다.

ex ) 동기 (요청에 대한 결과가 동시에 일어난다 )

손님 1이 아메리카노를 주문한다.  
접수를 받은 직원이 아메리카노를 내린다
직원이 손님 1에게 아메리카노를 전달한다
~
손님 2가 카페라떼를 주문한다 (손님 2는 손님 1 주문이 끝날때까지 기다려야한다) (blocking)
접수를 받은 직원이 카페라떼를 만든다
직원이 손님 2에게 카페라떼를 전달한다 

ex ) 비동기 ( 요청에 대한 결과가 동시에 일어나지 않는다)

1. 손님 1이 아메리카노를 주문한다 (non blocking)
접수를 받은 직원이 아메리카노를 내린다
아메리카노가 완성 (event)되면 직원이 손님 1을 부른다    // event handler : callback 
아메리카노를 손님 1에게 전달한다  //  (1,2,3)응답을 나중에 가능, 비동기적 
~
2. 손님 2가 카페라떼를 주문한다 (non blocking ) 
접수를 받은 직원이 카페라떼를 만든다
카페라떼가 완성 (event)되면 직원이 손님 2를 부른다  // event handler : callback  
카페라떼를 손님2에게 전달한다 // (1,2,3)응답을 나중에 가능, 비동기적 

비동기 함수 전달 패턴1: callback 패턴

let request = 'caffelatte';
orderCoffeeAsync (request, function(response) { // response => 주문한 커피 결과
  drink(response);
});

비동기 함수 전달 패턴2: 이벤트 등록 패턴

let request = ‘caffelatte’ ; 
  orderCoffeeAsync ( request ) .onready = function ( response ) {
	// response - > 주문한 커피 결과 
	drink ( response ) ;
	};

비동기의 주요 사례

1. DOM Element의 이벤트 핸들러
   • 마우스, 키보드 입력 (click, keydown 등)
   • 페이지 로딩 (DOMContentLoaded 등)
2. 타이머
   • 타이머 API (setTimeout 등)
   • 애니메이션 API (requestAninationFrame)
3. 서버에 자원 요청 및 응답
   • fetch API
   • AJAX(XHR)