패스트캠퍼스 데브캠프 28일차 [JavaScript, 이벤트루프]

Su Min·2024년 6월 27일

패스트캠퍼스 데브캠프

목록 보기

25/68

🔗 자바스크립트와 브라우저 동작 원리

컴퓨터에 내장되어있는 CPU하드웨어는 여러개의 작업을 동시에 실행한다. CPU는 한번에 한개씩 명령을 실행하도록 되어있지만 속도가 1초에 30억번을 실행할 수 있는 빠른 코어가 달려있어 코어 하나가 1초에 30억개씩 명령을 실행하면 코어 여러개가 어마무시한 속도로 번갈아가면서 실행되는데 우리가 보기엔 동시에 실행되는 것처럼 보인다.
컴퓨터의 엔진처럼 브라우저는 여러개의 스레드를 실행(멀티태스킹)시키지만 각 탭 하나는 싱글스레드이다. 브라우저에서 자바스크립트가 동적으로 실행될때 동시에 여러 코드가 작동하는 것처럼 보이지만 실제로는 싱글스레드이기 때문에 순서에 따라 하나씩 작동되는 것이다.
브라우저를 동적으로 표현해주는 자바스크립트도 싱글스레드이다.🫢 자바스크립트의 비동기 요청과 처리 작업은 자바스크립트 엔진을 구동하는 환경 Node.js가 하고, 이벤트 루프를 이용해서 비동기 방식으로 동시성을 지원한다. 브라우저 또한 자바스크립트의 비동기 작업을 멀티스레드로 처리 할 수 있도록 도와주는 웹API가 있다. 자바스크립트의 엔진은 브라우저의 웹API를 통해 비동기 작업을 처리하는데 이 과정에 이벤트루프가 도와주는 역할을 한다.

🔗 이벤트루프

이벤트루프는 비동기 함수 작업을 웹API로 옮기는 역할을 하고 웹API에서 작업이 완료되면 다시 큐(QUEUE)로 옮기는 역할을 하고 대기중이었던 작업을 콜스택(Call Stack)으로 옮기는 역할을 한다. 이를 통해 이벤트루프는 작업을 처리하는 자바스크립트 엔진과 브라우저의 웹API사이에서 옮기는 역할을 한다는 것을 알 수 있다.
이벤트루프는 크게 4단계로 돌아간다.

Evaluate Script : 자바스크립트 실행 ( 코드를 읽고 해석하고 수행 )

Task Queue : 웹API종류를 처리 ( setTimeout, url, fetch, addEventListener 등 )

Microtask Queue ( Promise callback, Async callback )

Animation Frames ( requestAnimationFrame, requestIdleCallback )

이 과정에서 이벤트 루프는 콜스택을 지속적으로 확인하여 남아있는 작업이 있는지 확인하고 콜스택이 비어있으면 타스크 큐를 확인하여 대기중인 콜백이 있는지 확인한다. 모든 배열이 비어질때까지 이벤트 루프는 무한루프하며 확인하고 모든 콜스택이 끝나고 비어지면 실행코드가 끝났음을 판단한다.

이벤트루프 실행해보기

아래 로직이 실행되었을 때 콘솔이 찍히는 순서는??

console.log("start")

setTimeout(() => {
  console.log("Task Queue")
}, 0)

Promise.resolve()
  .then(() => {
    console.log("Microtask Queue 1")
  })
  .then(() => {
    console.log("Microtask Queue 2")
  })

requestAnimationFrame(() => {
  console.log("AnimationFrame callback")
})

console.log("end")

실행 결과

실행 이후 console.log는 콜스택에서 실행되고 TastQueue와 MicroTaskQueue, AnimationFrame은 콜스택에서 webAPI로 옮겨진다. 이후 setTimeout과 requestAnimationFrame의 콜백은 TastQueue로, Promise의 콜백은 MicroTaskQueue에 대기된다. console.log가 콜스택에서 빠지면 대기하고 있던 MicroTaskQueue가 우선적으로 콜스택으로 옮겨지고 이후 순서에 맞게 TaskQueue와 AnimationFrame이 옮겨진다.

만약 setTimeout의 매개변수로 0이 아닌 1이상이 온다면 "Task Queue"가 가장 나중에 출력 될 것이다.

이벤트 루프를 공부하기에 좋은 참고 자료

Su Min

성장하는 과정에서 성취감을 통해 희열을 느낍니다⚡️

이전 포스트

패스트캠퍼스 데브캠프 27일차 [JavaScript, Pagination]

다음 포스트

패스트캠퍼스 데브캠프 28일차 [JavaScript, 이벤트루프]