Code States 31일차 - 비동기

코드스테이츠는 비동기의 예를 커피숍을 들었다.

커피숍에 직원이 한명이 있다고 하면 손님이 주문을 하고 커피를 주고 다음 손님의 주문을 받는다.

이것을 blocking라고 한다.

커피 주문 완료시점과 커피 주문 시점이 같으면 동기적(synchronous)이라고 한다.

---

blocking vs. non-blocking

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

커피 주문으로 알아보는 동기 vs. 비동기

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

만일 커피 주문이 동기적으로 작동한다면?

1. 손님 1이 아메리카노를 주문한다.
2. 접수를 받은 직원이 아메리카노를 내린다.
3. 직원이 손님 1에게 아메리카노를 전달한다.
4. 손님 2가 카페라떼를 주문한다.
5. 접수를 받은 직원이 카페라떼를 만든다.
6. 직원이 손님 2에게 카페라떼를 전달한다.

손님 2는 손님 1이 아메리카노를 전달받을 때까지 주문도 하지 못다고 대기열에 기다려야 한다.

 

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

1. 손님 1이 아메리카노를 주문한다.
   1. 접수를 받은 직원이 아메리카노를 내린다.
   2. 아메리카노가 완성되면 직원이 손님 1을 부른다.
   3. 아메리카노를 손님 1에게 전달한다.
2. 손님 2가 카페라떼를 주문한다.
   1. 접수를 받은 직원이 카페라떼를 만든다.
   2. 카페라떼가 완성되면 직원이 손님 2를 부른다.
   3. 카페라떼를 손님 2에게 전달한다.

요청에 blocking이 없고 응답이 비동기적으로 이뤄진다.

 

// 비동기 함수 전달 패턴 1: callback 패턴
let request = 'caffelatte';
orederCoffeeAsync(request, function(response){
  //response -> 주문한 커피 결과
  drink(response);
});

// 비동기 함수 전달 패턴 2: 이벤트 등록 패턴
let request = 'caffelatte';
orederCoffeeAsync(request).onready = function(response){
  //response -> 주문한 커피 결과
  drink(response);
});

---

비동기의 주요 사례

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

---

이번 파트에서 추가로 영상을 소개한다.

바로 드림코딩 by 엘리 님의 유튜브이다.

아래 영상 3개를 보면 이해하기 쉬울 것이다.