[CS] Event Loop

✅ 스레드

스레드(Thread)는 쉽게 말해 CPU의 일꾼! 하지만, 실제로는 CPU가 일을 하여 결과는 CPU혼자 일한다.

• Javascript는 Single Thread
  메인스레드인 이벤트 루프가 싱글 스레드(일꾼 한 명 - 순차실행)이다.

• Node는 Multi Thread
  멀티스레드(일꾼 여러명 - 병행실행) 환경에서 실행된다.

• 차이점

  • 멀티스레드
    동시에 처리하는 것으로 보이지만, 하나씩 조금씩 일을 하고 다른 스레드로 넘어가는 것이다.
    컨텍스트 스위칭(Context Switching)한다고 한다.
    
  • 싱글스레드
    각개격파로 하나 잘 못 걸리면 뒤에 것이 중단이 된다.
    적은양의 함수들을 많이 반복하는 것이 좋다.

---

✅ 이벤트 루프

Javsscript는 싱글 스레드이나, 브라우져는 멀티 스레드이다.

• Javascript Engine

  • Memory Heap & Call Stack
    • Memory Heap에 있는 사용자가 작성한 코드들은 Call Stack에서 Stack 방식으로 쌓이며 코드를 실행하게 된다. Call Stack에서 실행된 비동기 함수는 Web API에서 처리를 하게 되고 업이 완료된 비동기 함수들을 Callback Queue로 넘겨주게 된다. 그동안에 Call Stack은 나머지 동기 함수들을 처리하게 된다.
    • Stack : 후입선출(LIFO)로 마지막에 들어간 것이 먼저 나가는 방식

• Web API
  Javscript를 사용하면서 우리가 많이 사용하는 API 들은 사실 JavaScript에서 지원하는 것이 아닌 웹 브라우저에서 제공하는 API로 DOM ,AJAX, Timeout 등이 있다.

• Task Queue

  • Task Queue는 비동기 함수들을 보관하는 장소로 Event Loop에서 비동기 함수를 꺼내기 전까지는 계속 Queue방식으로 보관하게 된다.
  • Queue : 선입선출(FIFO)로 먼저 들어간 것이 먼저 나가는 방식이다.

• Event Loop

  • Event Loop는 Call Stack과 Task Queue의 상태를 계속 감시하며 Call Stack에 함수들이 존재하지 않는다면 Task Queue에 있는 비동기 함수들을 Call Stack에 밀어 넣게 된다.
  • 그 후 Task Queue에서 비동기 함수를 실행시키게 된다.

---

✅ 태스크 큐(Task Queue)

• 마이크로태스크(Microtask)

  • 일반 이벤트 실행문이 아닌 특정 코드를 사용해서만 만들 수 있고, 주로 Promise를 사용해 만든다고 한다.
  • 마이크로 태스크들은 실행하면서 새로운 마이크로 태스크를 큐에 추가할 수도 있다. 새롭게 추가된 마이크로 태스크도 큐가 빌 때까지 계속해서 실행된다.
  • 종류
    process.nextTick
Promise
Object.observe
MutationObserver

• 매크로태스크(Macrotask)

  • 매크로 태스크 큐에 있는 것을 실행시키기 시작할 때 있는 매크로 태스크만 실행시킨다.
  • 매크로 태스크가 추가한 매크로 태스크는 다음 이벤트 루프가 실행될 때까지 실행되지 않는다.
  • 종류
    setTimeout
setInterval
setImmediate
requestAnimationFrame
I/O
UI 렌더링

---

참고자료
MinkukPark
gil0127