17. 비동기 프로그래밍 (Event Loop)

📌 17-1 이벤트 루프란?

이벤트 루프란 자바스크립트 엔진이 코드를 해석하고 코드를 실행하는 일련의 과정이다.

🧩 자바스크립트 엔진의 특징

• 단 하나의 실행 컨텍스트를 갖는다. 한 개의 Stack만이 존재한다.
• 싱글 스레드 방식으로 작동한다.
• 자바스크립트의 코드는 동기적으로 작동한다.
• 동기적으로 작동하기 때문에 하나의 코드를 실행하는 도중에 다른 일을 처리하지 못한다. (블로킹 현상)
• 처리시간이 긴 처리를 Queue로 보내서 대기한 뒤 실행한다. (자바스크립트가 싱글 스레드를 극복하는 방법)

📌 17-2 이벤트 루프의 구성요소

• Heap : 값이 저장되는 메모리 공간이다.
• CallStack : 자바스크립트의 코드를 실행하는 공간으로 실행 컨텍스트가 실행되는 공간이다.
• TaskQueue : 비동기로 실행 되는 코드가 대기하는 공간이다.
• Event Loop : 이벤트 루프는 콜 스택에 현재 실행되고 있는 코드가 있는지 확인한 뒤에 없으면 테스크 큐에 대기중인 코드를 콜 스택으로 올려보낸다.

사진 출처

📌 17-3 비동기 처리

테스크 큐에서 대기하다가 콜 스택으로 올라가서 실행된다. 마이크로 테스크 큐도 있지만 굳이 형식을 나누지 않는다.

💡 마이크로 테스크 큐는 프로미스 등등 비동기에서도 우선순위에 따라서 나누지만 굳이 나눠서 비교할 필요는 없어 보인다. 어차피 비동기 통신은 주로 동기적으로 제어하려고 사용하는데 우선순위가 중요하지 않기 때문이다.

🧩 비동기로 처리되는 작업의 종류

• DOM Event : 이벤트 핸들러 혹은 DOM에 접근하는 코드
• NetWork : XMLhttpRequest, Fetch, Ajax, Axios 등등 서버와 통신하는 코드
• Timer : setTimeout와 같은 타이머 함수

🧩 비동기 처리 코드 예제

// 각각의 함수들을 정의
const func1 = () => console.log('1');
const func2 = () => console.log('2');
// setTimeOut를 return하는 비동기 코드
const func3 = () => setTimeout(() => console.log('3'), 2000);

/* 
결과 : 
1
2
3
*/
func3();
func1();
func2();

// 각각의 함수들을 정의
const func1 = () => console.log('1');
const func2 = () => console.log('2');
// setTimeOut를 return하는 비동기 코드
const func3 = () => setTimeout(() => console.log('3'), 0);

/* 
결과 : 
1
2
3
*/
func3();
func1();
func2();

🔥 마지막에 나와있는 코드에는 setTimeout의 타이머가 0으로 되어있어도 나중에 출력된다. 함수 자체가 비동기로 작동하기 때문이다.