동기(synchronous) vs 비동기(asynchronous)

[출처]얄팍한 코딩사전

동기(synchronous) vs 비동기(asynchronous)

---

카페에서 주문을 처리할때 동기와 비동기 방식으로 수행된다면 어떻게 되는지 알아보자.

 

동기

• 100개의 주문(request)이 들어오면 100명의 카운터(메모리 공간)가 생기고 손님이 음료를 받을때까지 다음 주문을 받지 않음.
  (쓰레드 하나로 여러가지 요청을 순서대로 처리함)
• 카운터 하나당 메모리를 3메가 정도 차지함.
• 커피,빵,과자를 주문받는 경우, 커피 주문-만들기-드리기 끝난 뒤, 빵 주문-만들기-드리기 끝난 뒤, 과자 만들기 주문-만들기-드리기 순으로 동작한다.

 

비동기

• 하나의 카운터(메모리 공간)에 100개의 주문이 왔을때 진동벨(callback 함수)을 받고 준비가 완료되면 받으러감(callback 함수 실행).
  (쓰레드를 여러개 만들어 여러 요청을 번갈아 가며 처리함)
• 메모리를 덜 차지함.
• 커피,빵,과자를 주문받는 경우, 주문 일괄적으로 받고 커피, 빵, 과자 만드는 작업을 조금씩 한다. 그리고 끝난 순서대로 손님께 드린다.

비동기로 주문 처리 예시

 

1. call stack

• 주문이 들어오는 데로 (코드가 실행될 때) 쌓인다.
• javascript engine의 구성 중 한가지 요소이다.
• stack 형태로 쌓임.
  stack - 자료구조 중 하나, 선입후출(LIFO, Last In First Out)의 룰을 따른다.

 

2. Web API 

• 주문에 대한 처리를 비동기로 처리한다. 주문에 대한 처리가 끝난 순서대로 차례로 손님께 드린다.
• 브라우저에서 제공하는 API. DOM, Ajax, Timeout 등이 있다.
  Call Stack에서 실행된 비동기 함수는 Web API를 호출하고, Web API는 콜백함수를 Callback Queue에 밀어 넣는다.
•  

3. Task Queue(테스크 큐) & callback function(콜백 함수)

• 빵, 커피, 과자가 순서대로 완성이되면 차례대로 손님께 전달해야한다.
  전달하는 동작은 callback 함수에 담겨 있고, callback 함수는 task queue에 완성된 순서대로 쌓인다.
• Task Queue : 비동기적으로 실행된 콜백함수가 보관 되는 영역
  Queue(큐) : 자료 구조 중 하나, 선입선출(FIFO, Frist In Frist OUT)의 룰을 따른다.

 

4. event loop

• 빵, 커피, 과자 이후에 주문이 없다면, 완성된 순서대로 손님께 전달하낟.
• Event Loop는 Call Stack과 Callback Queue의 상태를 체크하여,
  Call Stack이 빈 상태가 되면, Callback Queue의 첫번째 콜백을 Call Stack으로 밀어넣는다.
  이러한 반복적인 행동을 틱(tick) 이라 부른다.

 

 

 

[출처]

https://velog.io/@thms200/Event-Loop-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A3%A8%ED%94%84

https://youtu.be/m0icCqHY39U