일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
- 호텔 대실
- Hermes Engine
- 최솟갑 구하기
- mutationobserver
- 구름톤
- 구름톤 챌린지
- Google 애널리틱스
- 중첩 점
- 통신망분석
- 테스트 Date
- JavaScript
- 프로그래머스
- 헤르메스 엔진
- ResizeObserver
- 리액트네이티브 엔진
- nextjs
- jest
- mock date
- 귤 고르기
- Leetcode #javascript #알고리즘 #Algorithms #js
- 과제 진행하기
- create-next-app
- nextjs-performance
- 구름톤챌린지
- 날짜 테스트
- 연결 요소 제거하기
- 리액트네이티브
- 자바스크립트
- 테이블 해시 함수
- Jest uuid syntax
- Today
- Total
나만보는개발공부블로그
Event loop - 1 본문
event loop는 Node.js의 내부적으로 동작하는 원리에 대해서 알아보자고 할때 나오는 단어인데 event loop는 node.js가 non-blocking I/O 작업들을 수행 할 수 있도록 만들어주는 것이라고 생각하면 된다.
non-blocking 작업들이 실행되는 원리는 대부분의 최신 커널 시스템들은 다중 스레드이므로 백그라운드에서 실행되는 여러 작업들을 처리할 수 있는데 이러한 작업들중 하나가 완료되면 커널은 node.js에 적절한 콜백을 poll queue에 추가하여 실행되도록한다.
내부적으로 동작하는 방식을 알아보기전에 Javascript의 인터프리터, 즉 자바스크립트 언어의 소스 코드를 바로 실행하는 프로그램이 Javascript Engine인데 node.js가 등장하면서 server side에서 V8과 같은 Engine이 사용된다. 이 V8 Engine은 3가지 영역으로 나뉘는데 Call Stack, Task Queue(Event Queue), Heap으로 나뉘고 Task Queue에 들어가는 task들을 관리하게되는것이 Event Loop다.
event loop의 동작 방식에 대해서 알기 위해서는 Call Stack, Task Queue(Event Queue), Heap에 대해서 알아야한다.
Call stack
함수 프레임들을 자료구조의 스택 구조에 쌓는것.
자바스크립트에서는 단 하나의 호출 스택인 Call Stack을 사용하는데 하나의 함수가 실행되면 이 함수가 끝날 때까지 다른 어떤 task도 수행될 수 없다. 요청이 들어올때 마다 해당 요청을 순차적으로 호출 스택에 담아서 처리한다.
스택에 함수 프레임이 push되고 해당 메소드의 실행이 끝나면 그 함수프레임은 pop되는 원리이다.
Heap
동적으로 생성된 객체들은 힙에 할당되고 구조화되지않은 메모리 영역을 heap이라고 한다.
Task Queue(Event Queue)
Task들을 임시 저장하는 대기 큐가 존재하는데 그 대기 큐를 Task Queue(Event Queue)라고 한다. 그리고 Call Stack이 비어지면 들어온 대기열 순서대로 수행된다.
비동기로 호출되는 함수들은 Call Stack에 쌓이지 않고 Task Queue(Event Queue)에 enqueue된다. 이러한 이벤트에 의해 실행되는 함수들이 비동기로 실행되고 자바스크립트 엔진이 아닌 Web API 영역에 따로 정의되어 있는 함수들은 비동기로 실행된다.
*Web APIs에는 DOM, AJAX(XMLHttpRequest), Timeout(setTimeout)등이 있다.
Task Queue와 Call Stack이 진행중이고 이벤트가 들어오는 그러한 과정들의 확인 방법은 다음의 코드에서 확인할 수 있다.
이벤트 루프 가상 코드는 다음과 같다.
while(queue.waitForMessage()){
queue.processNextMessage();
}
queue.waitForMessage()함수는 현재 아무 메세지가 없으면 도착할때 까지 기다리고 새로운 메세지가 들어오면 해당 메세지가 실행하고 기존에 메세지가 존재하면 먼저 있던 메세지들의 동작이 다 끝나고 동작한다.
만약 콜스택에 이미 다른 함수가 쌓여있고 Event Queue에 먼저 온 메세지가 쌓여있으면 자바스크립트는 콜스택을 최우선으로 처리하고 이후 먼저온 메세지를 처리한다.
-참고
https://developer.mozilla.org/ko/docs/Web/JavaScript/EventLoop
동시성 모델과 이벤트 루프 - JavaScript | MDN
동시성 모델과 이벤트 루프 Table of contentsTable of contents 자바스크립트는 코드 실행, 이벤트 수집과 처리, 큐에 놓인 하위 작업들을 담당하는 이벤트 루프에 기반한 동시성(concurrency) 모델을 가
developer.mozilla.org
'Javascript&Typescript' 카테고리의 다른 글
Declarative and Imperative programming (0) | 2021.02.21 |
---|---|
Closure (0) | 2021.02.19 |
Event loop - 2 (0) | 2021.02.17 |
Functional Programming (0) | 2021.02.11 |
[JS] for & forEach & map (0) | 2021.02.06 |