이벤트루프 드디어 정.리.해.보.았.다.

자바스크립트 공부 초반에 이벤트루프 강의를 듣는데 몬소리인지 알아 듣지 못했다...ㅎㅎ
아 그래,,모 그렇게 돌아가는구나,,이정도만 알고 있다가 다시 개념정리를 위해 공부를 해봤다.
혹시나 나처럼 이벤트루프가 아직까지도 몬소리인지 모르겠다면 어느정도 비동기 실습을 해보고 공부해보길 추천한다.

 

 

자바스크립트는 싱글스레드 언어 이다.

싱글스레드란 한 번에 하나의 명령만 실행할 수 있는 스레드다. 한번에 하나의 동작만 처리하고 다른 동작이 완료될때까지 기다려야하는 것.
그.런.데 웹사이트 여기저기 돌아다녀도 자바스크립트가 싱글스레드라고?? 라고 믿기 힘들다
왜냐 한눈에 보기엔 한번에 여러 동작을 하고있으니까. 예를 들어 쇼핑몰 페이지만 들어가봐도 여러 상품의 데이터들을 불러오고 있다.
이것들을 가능하도록 해주게 하는것이 이벤트 루프 때문이다.

 

 

이벤트 루프 구성

이벤트루프는 위의 그림과 같이 구성되어있다.

✔️JS Engine

자바스크립트가 실행되면서 자바스크립트 엔진은 힙과 콜스택을 구성하게 된다.
Heap: 메모리 할당이 일어나는 곳(데이터 구조의 변수나 객체..)
Call Stack: 코드의 함수가 실행되면서 쌓이는 곳. LIFO(Last In First Out)로 구성

 

✔️Web API

브라우저에서 제공되는 api다. setTimeout,fetch,Ajax 등
함수가 호출되고 비동기 함수가 실행되면 Web API로 넘어간뒤 대기한다.

 

✔️CallBack Queue

비동기적으로 실행된 콜백함수로 구성
Web API에 대기하고 있던 비동기 함수가 실행이 되면 콜백큐로 넘어온다.
콜백큐는 FIFO(First In First Out)으로 구성되어 있으며 콜스택이 비어질때까지 기다리고 있다가 비어지면 해당 콜백함수가 콜스택으로 넘어간다.

 

💁🏻‍♀️ 즉, 위의 내용을 순서로 정리하자면

1. 코드가 실행되면 자바스크립트 엔진에 있는 콜스택에 함수가 쌓인다
2. LIFO로 구성된 콜스택에서 마지막 함수부터 호출
3. 비동기 함수가 호출 시 Wep API로 비동기 함수가 대기
4. 비동기 함수가 실행되면 콜백큐로 이동
5. 콜스택이 비어지면 콜백큐에 대기하고 있던 콜백함수들이 이동

이 순서를 함수 실행이 끝날때까지 반복하는게 이벤트 루프이다.

 

코드로 예시

firstFunc(),secondFunc(),setTimout() 함수 세개를 실행하도록 했다.
순서대로 실행이 되기 때문에 setTimout함수가 콜스택에 먼저 들어가고 비동기함수가 실행이 완료 될때까지 webAPI에서 대기하고 있는다.
실행되는 동안 firstFunc()이 실행되면서 콜스택에 쌓이고 콘솔(console.log('first!'))이 실행된후 LIFO 방식대로 콘솔 부터 콜스택에 빠져나온다.
secondFunc()가 후에 실행되고 콜스택에 쌓이면서 firstFunc()와 동일한 순서대로 콜스택에서 빠져나온다.
대기가 완료되고 실행된 timeout 콜백함수가 콜백큐에서 준비하고 있다가 콜스택이 비어진걸 확인한 뒤 콜스택으로 이동한다.
콜백함수가 실행후 콘솔(console.log('timeout!'))이 찍힌뒤 순차적으로 콜스택에 빠져나오면 이벤트 루프가 끝난다.

 

이벤트 루프 테스트 사이트

http://latentflip.com/loupe/?code=CmZ1bmN0aW9uIGZpcnN0RnVuYyAoKXsKICAgIGNvbnNvbGUubG9nKCJmaXJzdCEiKTsKfQoKc2V0VGltZW91dChmdW5jdGlvbiB0aW1lb3V0KCkgewogICAgY29uc29sZS5sb2coInRpbWVvdXQhIik7Cn0sIDUwMDApOwoKZnVuY3Rpb24gc2Vjb25kRnVuYyAoKXsKICAgIGNvbnNvbGUubG9nKCJsYXN0LiIpOwp9CgpmaXJzdEZ1bmMoKQpzZWNvbmRGdW5jKCkK%21%21%21PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D

 

정리

자바스크립트는 싱글스레드 언어이지만 ⭐️이벤트루프⭐️가 동시성을 가지고 한번에 여러작업을 처리하는 것처럼 보이도록 한다.