JavaScript 입문 : 이벤트루프 (Event Loop) 이해하기 2 - 3개요소(호출스택, 백그라운드, 태스크큐)를 이용한 테이블 이용하기

자바스크립트에서는 이벤트루프(Event Loop)에 대한 이해가 상당히 중요합니다. 이전시간 이벤트루프 구성도를 공부하면서 간단한 동작원리를 이해 하였습니다. 

 

이제부터는 이벤트루프 테이블을 개발하여 좀 더 쉽게 다가설 수 있는 방법이 없는지 고민해 보도록 하겠습니다. 이번에 들 예제는 제로초TV 자바스크립트 강좌를 참고 하였습니다. 

 

1. 이벤트 루프 테이블 (Event Loop Table) 구성

 

Event Loop Table을 만들고자 하는 목적은 아직 머리속으로 계산이 어렵기 때문에 좀 더 쉽게 다가설 수 있는 방법이 있는지의 고민에서 출발 하였습니다.

 

지나시간 console.trace(  )에 대한 내역을 table을 구성해 보겠습니다. 

 

 

상기 함수식에 대한 Event Loop Table은 다음과 같습니다. 

 

 

각각이 순서대로 이루어지고 있습니다. 마지막 콘솔에는 console.trace가 찍히는 구조를 볼 수 있습니다.

 

그렇다면 다음 복잡하게 만들어진 구조를 가지고 상기 테이블을 이용하여 콘솔 결과를 보도록 하겠습니다. 

 

2. 이벤트루프 이해를 위한 예제

 

좀 더 복잡한 예제를 통하여 이벤트루프를 이해하도록 하겠습니다. 다음 함수식을 보고 이벤트루프 원리에 적용시켜 콘솔에 나타나는 순서를 추적할 예정입니다.

 

 

좀 더 시각적으로 이해하기 쉽게 이벤트루프에 대한 테이블을 이용해 보도록 하겠습니다. (함수가 실행이 되고 사라지고 백그라운드에 배정되고 다시 태스크큐에 배정되는 순서를 만들 필요성이 있습니다. )

 

일단 결과값을 보면 다음과 같이 콘솔에 찍혀야 합니다.

 

 

이벤트 루프 테이블을 이용하여 상기 결과값을 도출하도록 하겠습니다. 처음이라 시간이 많이 걸렸지만 이해를 하면서 풀어가는데 중점을 두었습니다. 

 

 

상기 테이블처럼 결과값을 도출하였습니다. 

 

이벤트루프를 풀어가는데 있어 다음 기준점을 기억하면 좀 더 쉽게 결과값을 얻을 수 있습니다. 

 

① 함수 호출과 선언에 대한 이해가 필요

② 호출스택에서는 함수가 실행이 되고 사라짐

③ addEventListener(  ) 함수는 호출스택에서 실행되나 백그라운드에도 호출 몇번인지 저장됨

④ setTimeout(  )함수가 호출스택에서 실행되고 사라지면서 함수내 타이머는 백그라운드, 태스크큐 다시 호출스택 순으로 이동