이벤트 루프 [Event Loop]

안녕하세요. 이제 막 기획자로 시작한 아기 기획자 소소한G 입니다.

비전공자 출신으로 IT 웹 기획자로서 살아남기위해 일주일에 두번 프로트엔드 개발 수업을 듣고 있어요.

온전히 비전공자의 시선으로 꼼꼼하게, 원초적으로 설명드리려고 합니다.

저처럼 초보자 웰컴이에용.

 

오늘의 주제는 이벤트 루프(Event Loop)입니다.

 

루프(loop)란 반복되는 일련의 행동입니다.

 

이벤트 루프 (Event Loop)

 

- 어떤 일이 일어나는 반복적인 행동, 어떤 함수를 실행할 때 이 함수가 하나의 이벤트.

- Javascript engine, web API 등 브라우저에 작업되는 이벤트들을 하나의 task queue에 담아서 반복적으로 처리하는 것

- node.js 시스템 안의 LIBUV 비동기 처리 엔진의 개념

 

여기서 잠깐, 

수업중에 이야기를 하다보니 ECMA 스크립트에 대해서도 언급이 되었는데요. 

ECMA 스크립트 (ES6) 란? 

ecma(표준화 기구)에서 제정한 자바스크립트의 버전입니다.

 

이어서 이야기해볼게요.

 

Javascript의 가장 큰 특징은 '단일 스레드' 입니다.

웹 브라우저는 애니메이션 효과를 보여주면서 마우스 입력을 받아 처리하고,

Node.js 기반의 웹 서버에서는 동시에 여러개의 http 요청을 처리하기도 합니다. 

단일 스레드인데 어떻게 이 것이 가능할까요? 

이는 '이벤트 루프' 가 있기 때문에 가능합니다. 

 

단일 스레드란?

- 동시에 하나의 작업만을 처리할 수 있는 것

- 멀티태스킹이 되려면 멀티 스레드가 되어야 한다. 

 

---

 

[node.js 가 처리되는 과정]

출처 : http://stackoverflow.com/questions/10680601/nodejs-event-loop

 

1. Application 개발

- Javascript로 소스를 짜면 Javascript engine의 v8 엔진으로 보냅니다.

 

2. v8이 코드를 받아 컴파일링 합니다. 

  (Javascript 코드를 이진수로 컴파일링 = 기계어 생성)

 

3. v8 엔진이 컴파일링 한 이진수로 된 기계어를 OS와 통신합니다. 

 

4. LIBUV 안에서 어떤 액션을 취했는지 어떤 이벤트를 했는지에 대해 순서대로 처리됩니다. 

- Javascript는 싱글스레드이지만 node.js는 멀티스레드입니다 (이건 꼭 기억해주세요.)

- node.js에서 멀티스레드를 가능하게 해 주는 것이 LIBUV 입니다.

 

- LIBUV 안에 Event Queue (어플리케이션에서 onclicke등의 이벤트들을 실행한 순서대로 Event Queue에 쌓임)

- Event Loop를 통해서 WOKER THREAD에 쌓인다. = 이 과정을 blocking Operation 이라 합니다. 

**worker thread : 여러가지 사용할 수 있는 공간

- Worker Thread에는 순차적으로 처리하는 것이 아니라 용량 등에 따라 처리합니다.

(멀티태스킹이기 때문에 어떤 작업을 먼저 하는지 알 수 없음)

 

5. 모든 비동기 API들은 처리된 것이 반환되어 Event Queue에 다시 쌓입니다. 

6. v8로 넘겨주어 v8이 기계어로 컴파일링(통역) 해줍니다. 

7. Javascript의 언어로 바꾸어준 다음 Application에 보여줍니다. 

 

---

Run To Completion

 

- 하나의 함수가 실행이 되면 이 함수의 실행이 끝날 때 까지 다른 어떤 작업도 중간에 끼어들지 못합니다. 

- 단 하나의 스코프만 실행할 수 있기 때문이지요. 

- Javascript engine은 하나의 호출 스택을 사용하며 현재 스택에 쌓여있는 모든 함수들이 실행을 마치고 스택에서

  제거되기 전까지는 다른 어떠한 함수도 실행될 수 없어요. 

 

아래의 코드를 예로 들어 보아요.

setTimeout의 함수는 브라우저에게 타이머 이벤트를 요청한 후 바로 스택에서 제거됩니다.

그 후 foo 함수가 스택에 추가되고 foo함수의 내부 실행 함수들이 차례로 스택에 추가되었다가 제거됩니다.

마지막으로 foo 함수가 실행을 마치면서 호출 스택이 비워지고 그 후 baz 함수가 스택에 추가되어 콘솔에 'baz!' 가 찍힙니다.

 

그렇다면 setTimeout 함수를 통해 넘긴 baz 함수는 어떻게 foo 함수가 끝남자마자 실행될 수 있을까요?

어디서 대기하고 있으며 어떻게 foo 함수가 모두 끝날 때까지 기다릴 수 있을까요? 

 

이 역할을 하는 것이 바로 Task Queue와 Event Loop입니다. 

Task Queue는 FIFO, 즉 First In First Out 선입선출의 자료구조를 가집니다. 

 

코드를 실행하는 도중 10ms가 지나면 브라우저의 타이머가 baz를 바로 실행하지 않고 Task Queue에 추가합니다. 

Event Loop가 현재 실행 중인 태스크가 종료되자마자 Task Queue에서 대기중인 첫번째 태스크를 실행할 것입니다. 

그래서 foo가 실행을 마치고 호출 스택이 비워지면 현재 실행중인 태스크는 종료되고 그 때 Evnet Loop가 Task Queue에 대기중인 첫번 째 태스크인 baz를 실행해서 호출 스택에 추가합니다. 

 

자세한 설명 참조

https://meetup.toast.com/posts/89

자바스크립트와 이벤트 루프 : TOAST Meetup