이벤트루프에 대해서 설명을 드리겠습니다.
이벤트 루프가 조사를 해보니까 간단하게 한줄 설명이나 짧게 설명 할 수 없는 내용입니다.
왜냐면은 굉장히 여러가지 개념들이 종합해서 들어가기 때문입니다.
(다음)
이벤트 루프를 알아보기 위해서 가장먼저 설명드릴것은
자바스크립트의 큰 특징 중 하나가 '싱글 스레드' 기반의 언어라는 점입니다.
스레드가 하나라는 말은 동시에 하나의 작업만을 처리할 수 있다라는 말이 되죠.
하지만 실제로 자바스크립트가 사용되는 환경을 생각해보면 많은 작업이 동시에 처리되고 있는 걸 볼 수 있습니다.
예를 들면, 웹브라우저는 http요청이 진행되면서 다른 함수가 작동하는걸 많이 봐왔죠,
Node.js에서는 동시에 여러 개의 HTTP 요청을 처리하기도 합니다.
(다음)
그럼 이제 자바스크립트의 문맥을 한번 삭 훑어보면서 함께 이벤트루프에 대해서 알아보도록 합시다.
그림에서 나오는 JS는 자바스크립트 엔진입니다.
이 안에서 우선 살펴볼것은 Heap이 있습니다.
heap은 프로그래밍을 할 때 선언된 변수, 함수가 담겨지는 메모리 할당이 일어나는 곳입니다.
한마디로 메모리 저장소입니다.
다음은 call stack인데요,
call stack은 자바스크립트에서 코드가 실행될 때 쌓이는 곳 이고 stack의 형태로
Last In First Out 즉 마지막에 들어온게 먼저 나가는 구조입니다.
함수를 실행하게 되면 우선 stack에 쌓인뒤 코드를 읽고 리턴 되면서 함수가 종료가 되는것입니다.
예시에서는 전역 함수 test가 있고 그 내부에서 test2와 test1을 선언합니다.
test1에서는 test2함수를 실행시켜준 뒤, 콘솔을 반환합니다.
이 코드를 실행하게 되면
test가 메인으로 먼저 쌓이게 되고 그 다음 test1 그 내부에서 test2가 실행되어
쌓이게 되고 더이상 실행시킬 함수가 없으니 마지막에 쌓였던 순서로 test2 test1
그리고 test3콘솔로그가 실행이 되는겁니다.
나중에 이 call stack이 빈다는 말이 나올텐데 이 말은 더 이상 실행을 할 함수가 없다는 것을 의미합니다.
이 자바스크립트에서 call stack은 여러개가 없고 하나밖에 없습니다.
왜냐면 자바스크립트는 single thread 단일 스레드 프로그래밍 언어이기 때문입니다.
(다음)
아까 자바스크립트가 싱글 스레드 언어라고 말씀을 드렸는데
금방 말씀드렸다시피 호출 스택을 하나만 사용합니다다.
그리고 그말은 즉슨 동시에 한 가지 일만 처리할 수 있다라는 뜻이죠.
근데 함수가 실행되는 호출 스택이 한개면서 어떻게 비동기 요청을 지원하고 동시성에 대한 처리는
누가 하는걸까요?
(다음)
일단 자바스크립트 엔진이 코드를 진행하다가 중간에 비동기 코드를 만나면 이 코드를 자바스크립트 뒷편에서 실행을 하게 됩니다.
그 다음은 나머지 코드를 진행해서 이 비동기 코드는 자바스크립트 뒷편에서 실행이 되도록 놔두는거죠
(3번)
여기서 시야를 좀 더 넓혀서 금방 말씀드린 뒷편인 웹 브라우저에 대해서 봐야합니다.
웹 브라우저는 자바스크립트 엔진 말고도 web api콜백 큐 이벤트루프 이런 것들을 가지고 있습니다.
우리가 자주 사용하는 http요청 dom메서드 setTimeout등은
모두 web API에서 제공하는 메서드들 인데요
이 메서드들은 비동기 메서드이기 때문에 작동을 마치면 콜백함수를 콜백 큐에 집어넣습니다.
이 콜백 큐는 다른 말로 task queue라고 합니다.
콜백 큐에 들어간 콜백 함수들은 순차적으로 실행을 대기합니다.
이렇게 자바스크립트 엔진 자체는 싱글 쓰레드지만, 실제로 자바스크립트가 구동되는 환경인
웹 브라우저에는 여러 개의 스레드가 사용됩니다.
조금 더 자세히 말하자면 web api가 멀티 스레드로 동작하는거죠
자바스크립트가 web api와 상호 연동을 하기 위해서 필요한 장치가 콜백큐와 이벤트 루프입니다.
(다음)
또 예시코드를 통해 앞서 설명드린 부분에 대해 보여드리겠습니다.
해당 코드가 실행이 되면
우선은 콜 스택에 first 함수가 들어가게 되고 1+1 콘솔이 실행이 됩니다.
그 다음에 second 함수가 실행이 되고, setTimeout이 실행이 됩니다.
아까 전에 setTimeout은 Web API에서 실행이 된다고 했었죠.
그래서 첫 번째 인자로 들어간 콜백함수를 가지고 있는 타이머를 webAPI에서 생성하게 됩니다.
이 타이머를 생성하는걸로 setTimeout의 역할은 끝이나고 callstack에서 리턴 됩니다.
그리고 이제 second함수가 리턴 되겠죠 그 다음에 3+3 콘솔이 출력되고 first함수도 pop을 하게 됩니다.
이제 web api에 있는 타이머만 남은 상태인데
타이머가 정해진 시간을 모두 세고나면 콜백함수를 콜백 큐에 넣고 자기는 사라집니다.
그러면 이 콜백은 콜백 큐에서 실행되기를 기다리게 되겠죠
이 콜백 함수도 결국엔 함수이기 때문에 콜스택에 들어가야 합니다.
이때 이제 드디어 이벤트 루프가 여기서 동작을 하게 됩니다,
이벤트 루프는 이 전체 시스템에서 아주 단순한 일을 하는 작은 파트인데,
이 이벤트 루프는 call stack과 callback queue를 계속 주시하고 있습니다.
call stack이 비어 있으면, 먼저 들어온 순서대로 callvack queue에 있는 콜백 함수들을 callstack으로 집어 넣습니다.
callback queue를 지켜 보다가 '콜백 함수가 왔네?' 하고 '콜 스택이 비어있네?'이러면
이렇게 콜백 함수를 call stack으로 옮겨주는게 이벤트 루프다.
이때 call stack이 반드시 비어있어야만 callback queue에 callback함수가 call stack으로 옮겨진다는 사실 잊지 마시기 바랍니다.
first함수까지 모두 실행이 되어서 callstack이 비어있으니 이벤트 루프가 callback 함수를 call stack으로 옮겨주고 2+2 콘솔을 실행 시킨뒤 리턴 됩니다.
자바스크립트에서 비동기 요청을 할때에는 이 webapi에서 따로 처리를 해주기 때문에
ajax요청이라던지 하던중 다른 일을 할 수 있는것입니다.
(다음)
이제 이벤트루프가 어떻게 동작하는지 살펴보았으니 한가지 사실을 더 알려드리면서 다시 한번 보겠습니다.
아까와 똑같은 코드입니다.
근데 이번에는 setTimeout의 타이머가 0이죠,
이렇게 타이머를 0으로 설정하고 코드를 실행한다면 어떻게 될까요
뭔가 타이머가 0이니까 1+1 2+2 3+3 순으로 실행될거 같죠?
하지만 실제로 실행시켜보면 아까와 똑같습니다.
우선은 스택에 first 함수가 들어가게 되고 1+1 콘솔이 실행이 됩니다.
그 다음에 second 함수가 실행이 되고, setTimeout이 실행이 됩니다.
여기서 이 setTimeout부터 말씀을 드릴게요
setTimeout의 타이머는 0이긴 하지만 그래도 webAPI에 타이머가 생성이 됩니다.
여기서 타이머가 동작합니다. 0이니까 바로 callback queue에 들어가겠네요
그리고 아까 말씀 드렸듯이 callstack이 비어있어야 이벤트루프가 콜백 함수를 옮긴다고 하였죠.
다시 callstack으로 가보겠습니다.
이제 second함수가 리턴 되겠죠 그 다음에 3+3 콘솔이 출력되고 first함수도 pop을 하게 됩니다.
그러면 그제서야 이벤트루프는 이 callback함수를 callstack에 옮고 실행이 2+2 콘솔이 실행이 되는겁니다.
정리를 하자면
Event Loop는 Call Stack과 Callback Queue의 상태를 체크하여,
Call Stack이 빈 상태가 되면, Callback Queue의 첫번째 콜백을 Call Stack으로 밀어넣어줍니다.
이러한 반복적인 행동을 틱(tick) 이라 부릅니다.
자바스크립트는 싱글 스레드 프로그래밍 언어라 한번에 하나씩 밖에 실행할 수 없지만,
Web API, Callback Queue, Event Loop 덕분에 멀티 스레드 처럼 동시성을 지니고 있는겁니다.
