JavaScript 입문 : 이벤트루프 (Event Loop) 이해하기 1 - 이론적 접근 (호출스택, 백그라운드, 태스크큐)

이벤루프에 대한 이론적 도움은 제로초TV 자바스크립트 강좌를 참고 하였습니다. 

 

자바스크립트에서 가장 중요한 이론 중 하나가 이벤트루프라고 합니다. 풀어쓰자면 이벤트가 행해지는 반복틀의 원리를 이해하고 틀린곳이 있다면 바르게 수정할 수 있는 능력을 키우자입니다. 

 

다음 그림을 기준으로 이벤트루프를 이해해 보도록 하겠습니다. 

 

1. 이벤트 루프 이론적 접근

 

이베트루프는 호출스택(Call Stack)과 백그라운드(Background) 태스크 큐(Task Que)로 이루어진 루프 관계를 뜻합니다. 

 

① 호출스택 (Call Stack)

 

이벤트가 실행된다는 것은 함수호출이 이루어진다는 것이며 이는 Call Stack에서 함수가 실행이 된다는 뜻입니다. 자바스크립트에서는 모든 함수가 실행되기전 먼저 실행되는 함수가 있는데 이를 anonymous(   ) 함수라고 합니다. Call Stack 전체를 감싸고 있다고 보면 됩니다. 

 

호출스택을 실행하는 함수가 없어지면 Task Que에 있는 콜백함수를 하나씩 가져다가 실행합니다. 즉, 모든 함수실행이 이루어지는 곳은 호출스택 영역입니다.

 

함수가 쌓이는 형식은 아래로 쌓이면서 맨위 함수부터 실행되는 특성이 있습니다. 마치 push( )메소드로 호출스택에 함수를 모으고 pop(  ) 메소드로 꺼내 쓴다고 보면 됩니다. 

 

② 택스크 큐 (Task Que)

 

이 영역은 말 그대로 태스크들이 줄서있는( Queing) 있는 곳으로 addEventListener나 Timer가 있는 콜백함수가 대기 하고 있는 곳입니다. 이 콜백함수들이 호출스택으로 넘어가서 실행이 되는 영역이라고 보면 됩니다. 

 

③ 백그라운드 (Background)

 

말 그대로 이벤트 루프의 배경이 되는 곳인데 addEventListener가 저장이 되고 Timer가 처리되는 곳으로  보면 됩니다. 

 

이러한 이론하에 이벤트 루프에 대한 도식을 다음 그림과 같이 작성해 보있습니다.

 

 

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

 

이벤트루프를 이해하여야만 하는 이유가 이벤트가 일어나는 과정은 이벤트루프 원칙에 의해 진행이 되는데 이를 무시한 이벤트가 발생이 되면 에러가 나기때문에 이를 수정하기 위해서는 반드시 이벤트루프 원칙에 따라야 하기 때문입니다. 

 

① anonymous(  ) 함수

 

자바스크립트에서는 어떤 함수를 실행한다는 이야기는 anonymous(  ) 함수가 먼저 실행이 된 후 지정된 함수가 실행이 됩니다. 즉, 모든 함수는 anonymous(  ) 함수로 감싸져 있다고 보면 됩니다. 

 

anonymous(  ) 함수를 한번 추적해 보겠습니다. 

 

다음 함수를 실행해 보면 알 수 있습니다. 

 

 

상기 함수 순서를 고민해 보겠습니다. 순서는 항상 호출이 먼저 됩니다. 호출에 따라 선언된 내용을 추적하면 됩니다. 상기 함수식에서 실행되는 순서는 다음과 같습니다. 

 

anmonymous(  ) 함수 >>   a(  ) 함수 >> b(  ) 함수 >> console.trace(  ) 함수 식으로 됩니다.   

 

 

콘솔에서 trace(  ) 함수 결과를 보도록 하겠습니다. 

 

 

console.trace(  ) 함수의 순서는 맨 밑에서부터 보면 됩니다. 괄호로 (anonymous)로 먼저 실행됨을 알 수 있습니다.

 

② setTimeout(  ) 함수 

 

우리가 흔히 공부해 왔던 setTimeout(  ) 함수를 보도록 하겠습니다. 

 

 

당연히 콘솔에는 b가 나타나겠지요. 

이를 이벤트루프 개념으로 보겠습니다. 사실 모든 함수는 이벤트루프의 기준하에 움직입니다. 

 

setTimeout(   ) 함수는 호출스택에서 담당하는 함수 역할과 타이머 기능이 있습니다. 이 기능은 백그라운드에 저장이 되겠구요. 

 

다음 그림과 같이 할당이 될 것으로 판단됩니다. 

 

 

상기 그림에서의 순서가 가장 중요합니다. 결국 5번의 console.log('b')가 실행이 되어 콘솔에 'b'가 쓰여지지만 이 과정이 0초라는 시간을 주었지만 정확히 0초는 아니고 빠져나오는 시간이 0.208초 걸리네요. 이것도 사양과 상황에 따라 달라집니다.