이벤트 루프와 비동기 통신

이벤트 루프

비동기 코드 실행을 관리하고 제어함.
프로그램이 이벤트와 함께 동작하도록 하는 것.
이벤트는 클릭, 키보드 입력, 네트워크 요청, 타이머 등 다양한 종류가 있는데, 이 이벤트는 백그라운드에서 발생하고 이를 처리하기 위해서 콜백함수, 프로미스와 같은 비동기 통신을 사용함.
이벤트 루프는 두개로 나눌 수 있음

호출 스택(Call Stack)

현재 실행중인 함수가 쌓이는 곳.

• 함수가 호출 -> 스택에 쌓임
• 함수가 종료 -> 스택에서 제거

메시지 큐

비동기로 실행되는 작업이 대기하는 곳.
이벤트 발생 -> 이벤트에 대한 콜백 함수가 메시지 큐에 추가 됨

동작

1. 호출 스택 비어있음 (현재 실행 중 함수 없음)
   1-1. 메시지 큐에서 첫 번째 메시지(이벤트)에 대한 콜백 함수가 호출 스택으로 이동
2. 호출 스택이 비어있지 않음
   2-1. 다음 메시지는 대기, 호출 스택이 빌 때까지 기다림
3. 콜백 함수가 호출 스택에 추가되면 실행. 만약 그 함수 내에서 다시 비동기 작업이 발생하면 해당 작업은 다시 메시지 큐로 이동.

장점

비동기 코드를 효과적으로 다룰 수 있음.
브라우저에서는 사용자 인터랙션에 반응.
서버에서는 네트워크 요청에 대응.

예를 들어 보자면

레스토랑에서 주문한다고 가정해보면,

• 주문 접수 -> 주방에서 요리 시작 -> 스테이크, 파스타 등 하나씩만 요리할 수 있다고 가정.
  왜? 자바스크립트는 싱글 스레드 언어이며, 한 번에 하나의 작업만을 처리할 수 있기 때문에.

• 이벤트(주문접수)

• 메시지 큐: 이벤트(주문)가 발생하면, 그에 대한 처리를 담은 콜백 함수가 메시지 큐에 추가 됨. 메시지 큐는 주방에서 요리해야 하는 내용이 담긴 주문서.

• 호출 스택(주방): 현재 실행중인 작업을 추적하는 곳. 주방에서는 요리가 진행되는 작업에 비유