브라우저와 JS의 작동하는법 등 처음 읽어보는 개념에 머리가 해롱해롱😵💫 합니다. 하지만 한 걸음 한걸음 나간다고 생각하고 지금까지 찾은 정보를 정리해서 계속하여 복습하는 것을 목표로 두고, 구체적이진 않아도 전반적인 내용을 한번 훑고 넘어가고싶습니다.
싱글 스레드인 자바스크립트를 비동기 방식으로 동시성을 지원하여 멀티 스레드처럼 보이게 해주는게 있는데 그게 바로 이벤트 루프이다.
이 개념을 알려면 저 사진에 보이는 큰 단락이 무엇인지, 어떻게 동작하는지에 대해 알아볼 필요가 있다.
📕 JavaScript의 엔진
사진상 구조는 v8엔진이다.
Memory Heap
메모리 할당이 일어나는 곳
(Heap : 구조화 되지 않은 넓은 메모리 영역 👉 객체(변수, 함수 등)가 담긴다.)
Call Stack (호출 스택)
실행될 코드의 한 줄로 할당 되어 실행이 되는 자료구조
📗 Web APIs
웹에서는 Web APIs, 노드에선 백그라운드라고 설명된다.
비동기를 처리 해준다.
만약 동기적인 코드만 있다면 Web APIs는 필요없게 되고, Call Stack만으로도 동작이 되긴 하지만 비동기적인 처리를 위해 꼭 필요하다.
📘 Call Queue༌
비동기 처리가 끝난 후 실행되어야 할 콜백 함수가 차례대로 할당된다.
큐라는 자료 구조로 되어있다.
(Queue༌ : 자료 구조 중 하나, 선입선출(FIFO, Frist In Frist OUT)의 룰을 따른다.)
Call Queue의 종류
- Microtask Queue (Job Queue)
- Promise.then 등
- Task Queue(Event Queue)
- setTimeout 등
- Animation Queue
적은 순서대로 작동 우선 순위가 된다.
📙 Event Loop
Queue에 할당된 함수를 순서에 맞춰 Call Stack에 할당해준다.
이게 반복적이게 될 때가 있는데 이 행동을 틱(tick) 이라 부른다.
Call Stack에 Stack이 남아있다면 Queue에 할당된 비동기 함수를 기다렸다 할당한다.
동기적 코드 흐름
Call Stack에 쌓였다 출력하고 종료
1️⃣ 작성한 모든 코드를 가지고 있는 anonymous가 담김
2️⃣ 첫 번째로 호출된 함수가 담김 (선언된 것 아님)
3️⃣ 호출된 그 함수 안에서 또 다른 함수가 호출 되었다면 호출된 함수가 담기고, 아니면 출력하고 빠져 나가기(이것을 반복)
4️⃣ 출력할 요소가 없다면 남은 함수가 빠져나가고 마지막으로 anonymous가 빠져나가게 됨
비동기적 코드 흐름
Call Stack, CallBack Queue, Web API, Event Loop을 왔다갔다 출력 또는 쌓이면서 종료
1️⃣ 작성한 모든 코드를 가지고 있는 anonymous가 담김
2️⃣ 동기적인 부분이 있다면 Call Stack에 쌓였다가 출력
3️⃣ 비동기적인 부분이 있다면 함수는 일단 Call Stack에 담겼다가 Web API로 이동함
4️⃣ 그 다음 코드가 동기적인 코드라면 2️⃣, 비동기적인 코드라면 3️⃣을 반복하다
5️⃣ 더 이상 읽을 코드가 없다면 Call Stack에서 anonymous가 빠져나가게 됨
6️⃣ Web API에 있던 비동기 함수의 콜백함수를 CallBack Queue로 넘겨준다.
7️⃣ 계속 실행되던 Event Loop가 Call Stack을 검사하여 비어있다면 CallBack Queue에 있던 콜백함수를 Call Stack으로 넘겨준다.
8️⃣ 넘겨졌던 콜백함수에 출력될게 있으면 출력해준다. 출력이 아니라 동기적 함수라면 그 함수에 담겨져 있는 함수의 내용 출력, 비동기라면 3️⃣의 흐름을 다시 이어간다.
9️⃣ 출력할게 더 이상 없다면 Call Stack에 넘겨졌던 익명의 콜백함수가 빠져나오면서 종료된다.
주의할 점
브라우저 혹은 엔진마다 Call Stack의 한계점이 있기에 이걸 초과하게 되면 에러가 나게 된다.
10줄 적은 글보다 동영상이 참 좋습니다. 동영상을 보고 보다 쉽게 익혔지만 글을 보고 개념을 익히는 방법도 연습해야할 것 같습니다. 그래도 개념을 익힐려면 무슨 방법이라도 써야하니 참고한 동영상을 남겨놓겠습니다~😊
참고한 사이트
How JavaScript works
자바스크립트와 이벤트 루프
Event Loop (이벤트 루프)
JS로 개발하는데 내부 동작을 모르면 곤란합니다 - 유튜브 동영상
