이벤트루프를 설명하기 앞서 자바스크립트를 조금 설명하자면!
자바스크립트는 싱글 스레드 기반의 언어이므로 원래는 한번에 여러가지 일을 처리하지 못하는 아이이다!
타 언어와 달리 왜 자바스크립트가 싱글 스레드 기반의 언어라고 묻는다면
자바스크립트는 브렌던 아이크라는 개발자가 10일만에 만든 언어이다.
멀티쓰레드 언어는 많은 개발 시간이 필요한 반면 상대적으로 싱글 스레드 언어는 적은 시간으로 만들 수 있기 때문에 창시자는 싱글 스레드를 선택하여 자바스크립트를 만들었다!
하지만 우리는 자바스크립트 안에서 setTimeout 등과 같이 비동기적으로 실행하는 것을 봤을 것이다. 이는 바로 자바스크립트의 런타임(언어가 실행되는 환경)인 브라우저에서는 자바스크립트 엔진과 함께 Web API, 콜백큐, 이벤트루프가 함께 동작하여 비동기적으로 실행할 수 있는 것이다!!
즉, 이벤트 루프는 싱글 스레드인 자바스크립트가 멀티 스레드처럼 작동할 수 있게 도와주는 녀석!!!
각각의 정의를 조금 알고 넘어가자면 Web API는 비동기 작업을 처리하기 위해 브라우저가 제공하는 API!
콜백큐란 함수를 저장하는 자료구조로, 비동기적으로 실행된 콜백함수가 임시적으로 보관되는 영역!
콜백큐는 참고로 여러개의 큐들로 구성되어 있고 각 큐는 이벤트 루프가 실행되는 우선순위가 다르다!
콜스택은 자바스크립트 엔진에 있는 영역 중 하나로, 함수 호출 시 함수가 저장되는 곳
이벤트 루프는 자바스크립트 엔진에 있는 콜스택이 함수가 비어지면 콜백큐에 임시로 저장되어 있는 함수를 하나씩 콜스택에 옮기는 역할을 하는 루프!
큰 그림을 보면 위와 같다.
그림을 보며 이벤트 루프의 처리 과정/ 비동기 처리 과정을 살펴보자!
1. 자바스크립트 엔진의 콜스택이 비동기 요청 함수를 만나면 비동기 작업의 정보와 콜백함수를 Web API로 전달
2. Web API에서 비동기 작업을 처리하고, 작업이 완료되면 전달받았던 콜백 함수를 바로 콜스택에 전달하는 것이 아닌 콜백큐에 전달!
3. 콜백큐는 이벤트 루프 과정을 통해 콜스택이 비었을 때 마다 콜백큐의 콜백함수를 넘겨준다!
4. 콜스택에 쌓인 콜백함수가 실행되는 콜스택에서 제거된다!
간략하게 설명하면 이렇게 되고 이제 예를 들어 다시 살펴보자!
비동기처리와 관련없는 함수는 콜스택에 바로 들어왔다 빠져나가게 된다.
1. 비동기 처리와 관련된 setTimeout 함수를 받으면 이와 관련된 정보를 Web API로 전달!
2. 앞서 콜백큐에는 여러개의 큐들로 구성되어있다 했는데 setTimeout 와 같이 Timer와 관련된 함수는 매크로태스크큐(태스크큐)에 들어가게된다.
그 다음 Promise관련 비동기 함수가 콜스택에 들어와 관련된 정보를 Web API에 전달-> Promise, async&await같은 함수는 마이크로태스크큐에 전달
3. 콜스택에 있는 함수가 실행되며 없어짐!
4. 이벤트 루프는 콜스택에 함수가 더이상 없다는 것을 확인 후 큐 중 우선순위가 높은 마이크로 태스크큐를 콜스택에 전달 후 콜스택이 비어지면 다음 매크로태스크큐를 전달!
자바스크립트의 비동기 처리 과정 끄읕!
이미지 출처 :https://talkwithcode.tistory.com/89
'Javascript' 카테고리의 다른 글
| onAnimationEnd란 (0) | 2023.07.17 |
|---|---|
| [Javascript] Javascript가 동적 언어인 이유는 무엇일까?? (0) | 2023.03.15 |
| [Javascript]ES6 (0) | 2022.10.10 |
| [Javascript]Axios란? (0) | 2022.10.09 |
| [Javascript] flatmap() (0) | 2022.04.20 |
