이벤트 루프와 비동기적으로 처리하기

 

# 프로세스와쓰레드

 

 

• 프로세스(Process)란? 컴퓨터에서 연속적으로 실행되고 있는 컴퓨터 프로그램
• 쓰레드(Thread)란? 어떠한 프로그램 내에서, 특히 프로세스 내에서 실행되는 흐름의 단위
  • 보통 하나의 쓰레드를 가짐
  • 여러개의 쓰레드를 동시에 실행할 수 도 있음 - multithread
  • 한 프로세스 안에서 code, data, heap을 공유함
• 메모리 구성 : code, data, heap, stack

 

---

# 동기 처리 

 

• 함수호출 → 실행컨텍스트 생성
• 실행컨텍스트는 콜스택에 추가(push) 되고 종료 후 제거(pop) 됨
• 콜스택(Call Stack) : LIFO(Last In First Out) 라고 부르는 자료구조, 제일 나중에 들어온것이 제일 처음으로 나간다는 뜻
• 자바스크립트는 단하나의 콜스택을 가짐 (싱글쓰레드 방식)
• 실행순서가 보장되지만 순서대로 처리하며 블로킹되는 단점이 있음 

 

---

# 비동기 처리

 

• 현재 실행 중인 태스크가 종료 되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식
• setTimeout, setInterval, HTTP요청, 이벤트 핸들러등

 

# 이벤트루프와태스크큐

 

 

• 브라우저는 동시에 많은것이 동작하는것 처럼 보이는데 이런 동시성을 지원하는 것이 이벤트루프이다.
• 브라우저에 내장되어 있는 기능
• 큐(queue) : FIFO(First In First Out) 라고 부르는 자료구조, 제일 처음 들어온 것이 제일 처음에 나가는 것
• 태스크큐(task queue) : 비동기 함수의 콜백함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역
• 마이크로태스크큐(microtask queue) : 프로미스의 후속처리 메서드의 콜백함수가 일시적으로 보관되는 영역

 

 

자바스크립트엔진에 있는 콜스택은 한번에 하나의 일만 수행하며 실행순서를 기억한다.

 

 

❔한번에 여러가지를 동시에 실행할 수 있게 즉 비동기적으로 처리하려 어떻게 해야할까?

1. 자바스크립트 런타임 환경에서는 다양한 web API를 제공해주는데 이것을 사용하면 우리가 만든 콜백함수를 태스크큐에 넣어두게 된다.
2. 이때 이벤트루프가 콜스택과 태스크큐를 돌면서 콜스택이 비어져있는걸 발견하면 태스크큐에 있는 콜백함수를 콜스택에 넣어 실행하게 된다.
3. 이벤트루프는 이런과정을 반복하며 함수를 실행한다. 

 

 

❔마이크로태스크큐와 태스크큐의 차이점?

• 이벤트루프가 마이크로태스크큐 영역에 가면 그곳에 있는 모든 함수들을 실행한 다음에야 다시 이벤트 루프가 다음 영역으로 간다. 즉 새로운 APIs를 계속 만들어내면 이벤트루프는 그곳에 계속 머무르고 이벤트는 실행되지 않는다. 
• 태스크큐 영역에 가면 한번에 하나의 함수만 실행한 후 이벤트루프가 다음 영역으로 간다. 즉 여러개의 함수가 있다고 하더라도 이벤트는 실행된다. 

 

 

✨ 콜스택에 있는 함수 실행 → 이벤트 루프 실행 → 렌더과정 처리 → 마이크로태스크큐 처리 → 태스크큐 처리 → 콜스택 확인 → 다시 과정 반복

 

 

 

 

📌 참고

드림코딩(https://academy.dream-coding.com/courses/browser101)

모던자바스크립트 Deep Dive