동기(sync)와 비동기(async)

비동기에 앞서

Blocking  || Non-blocking과 callback에 대해서 짚고 넘어가자

 

Blocking  || Non-blocking

전화와 문자를 예로 설명할 수 있다.

전화	문자
하던 일을 멈추고 받아야한다(blocking)	확인 후, 나중에 답장할 수 있다(none-blocking)
요청에 대한 결과가 동시에 일어난다(Synchronous)	요청에 대한 결과가 동시에 일어나지 않는다(Asynchronous)

---

callback

앞서 공부한 callback에 대해서 알아야 한다.

> calback in action : 반복 실행하는 함수 (iterator)

[1,2,3,4].map(function(el, idx) {
	return el * el
    }
)

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

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

---

동기 vs 비동기

동기 : 요청에대한 결과가 동시에 일어난다.

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

 

커피주문으로 동기와 비동기를 알아보자

동기(Synchronous)

1. 손님1이 카페라떼를 주문한다.
2. 주문을 받은 직원이 카페라떼를 내린다.
3. 직원이 카페라떼를 손님1에게 전달한다.
4. 손님2가 바닐라라떼를 주문한다.(손님1의 음료준비가 끝나야 주문할 수 있다)
5. 주문을 받은 직원이 바닐라라떼를 내린다.
6. 직원이 바닐라라떼를 손님2에게 전달한다.

* 동기의 흐름은 손님1의 음료를 준비하는 동안 손님2의 주문을 받지 못한다(비효율적...)

 

비동기(Asynchronous)

1. 손님1이 카페라떼를 주문한다.
   1. 주문을 받은 직원이 카페라떼를 내린다.
   2. 카페라떼가 완성되면 직원이 손님1을 부른다.
   3. 직원이 손님1에게 카페라떼를 전달한다.
2. 손님2가 바닐라라떼를 주문한다.
   1. 주문을 받은 직원이 바닐라라떼를 내린다.
   2. 바닐라라떼가 완성되면 직원이 손님1을 부른다.
   3. 직원이 손님1에게 바닐라라떼를 전달한다.

* 각 1과 2에는 blocking이 없다.

* 1-2, 2-2의 "완성되면"이 event에 해당한다.

* 1-1, 2-1는 응답이 비동기적으로 이루어진다.

* 1-2, 2-2는 callback에 해당한다.

 

비동기는 어떻게 사용되는가??

• DOM element의 이벤트 핸들러
  • 마우스,키보드 입력(click, keydown 등..)
  • 페이지 로딩(DOMContentLoaded)
• 타이머
  • 타이머 API(setTimeout 등)
  • 애니메이션 API(requsetAnimationFrame)
• 서버에 자원 request 및 response
  • fetch API, axios API
  • AJAX(XHR)