JavaScript의 이벤트 루프에 대해 알아보자

About this offer

JavaScript의 작업 관리 방식 자바 스크립트는 싱글 스레드 로 동작한다. 즉, 한 번에 한 가지 일만 할 수 있는 언어이다. 그래서 만약 오래 걸리는 작업을 동기적으로 실행하면 다른 작업이 블로킹되는 문제가 발생할 수 있다. 그러나 실제 웹 어플리케이션은 I/O 관리, 네트워크 요청, 타이머 등 여러 가지 동작을 동시에 처리해야 하는 경우가 많다. 한 번에 한 가지 일만 처리할 수 있다고 했지만, 실제 웹앱에서는 여러 가지 작업이 동시에 진행 된다. (ex) 타이머를 기다리면서 입출력 관리, api를 받아오면서 버튼 이벤트 진행 등) 자바 스크립트는 이러한 동시성(Concurrency) 이슈를 어떻게 해결하고 있을까? 그 답은 바로 ‘ 이벤트 루프(Event Loop) ’에 있다. 이벤트 루프의 구성 요소와 동작 과정에 대해 살펴보자. 이벤트 루프(Event Loop) 이벤트 루프는(Event Loop)는 브라우저 내부의 Call Stack, Web APIs, Callback Queue 등의 요소들을 모니터링하고 제어하는 런타임 루프이다.(like 관리자) 런타임 요소 1. Memory Heap 객체가 저장되는 메모리 공간 실행 컨텍스트는 이 메모리 힙에 저장된 객체를 참조하여 값을 가져오게 된다. 2. Call Stack 실행중인 작업의 실행 컨텍스트가 쌓이는 스택 LIFO(Last In Final Out) 구조이다. 3. Web API 네트워크 요청, 파일 입출력, 타이머 등 브라우저에서 제공하는 다양한 API를 말한다. 이벤트 루프에서의 Web API는 비동기 작업들을 전담하여 처리한다. Web API는 브라우저(Chrome)에서 멀티 쓰레드로 구현되어 있기 때문에, 비동기 작업을 처리할 수 있다. ❗모든 Web API가 비동기적으로 실행되는 것은 아니다! 동기적/비동기적으로 처리되는 것이 모두 있다. Event Loop에서 Web API의 역할이 그런 것이지, 모두 비동기로 동작하는 것이 아니라는 점을 잊지 말자~! 4. Callback Queue(콜백 큐) 완료된 비동기 작업의 콜백 함수가 대기하는 공간. 이 때 Callback Queue는 두 가지 종류가 있다. 여기서 알아둬야할 점은 마이크로태스크 큐의 우선순위가 더 높다는 것이다. +) ✅ 매크로테스크큐(태스크 큐) : setTimeout , fetch , addEventListener 등 비동기로 처리되는 함수들의 콜백 함수가 저장된다. +) ✅ 마이크로테스크 큐 : Promise.then , MutationObserver 등 우선적으로 처리되는 비동기로 처리되는 함수들의 콜백 함수가 저장된다. 이벤트 루프의 동작 과정 이제부터는 이벤트 루프가 어떤 과정으로 동작하는지 살펴보도록 하자. 가장 먼저 코드가 실행되어 함수가 호출되면 실행 컨텍스트가 Call stack 에 쌓인다. 이 때, Call stack 은 말 그대로 스택이기 때문에 하나씩 쌓이게 되고 위에서부터 하나씩 실행된다. 비동기 작업(setTimeout, promise 등)은** webAPI**를 통해 브라우저에게 넘겨진다. (넘겨진 작업은 Call stack에서 즉시 pop 된다.) 브라우저는 비동기 작업들에게 각각 별도의 쓰레드를 배정하고 실행한다. 작업이 완료된 후 callback 함수는 Callback Queue 에 넣어준다. 이 때 작업의 종류에 따라 MacroTask Queue / MicroTask Queue 로 각각 구분되어 들어간다. 이벤트 루프는 반복해서 콜 스택이 비어 있는지, Callback Queue 에 콜백 함수가 있는지 계속해서 확인한다. 이 때, 콜 스택이 비어있다면 콜백 큐에 쌓여있는 콜백 함수를 콜 스택으로 넘겨준다. 설명이 거의 간장공장공장장급이라 이해가 잘 안 될 거 같아 움직이는 이미지를 첨부한다. 아래 이미지를 참고하면 이해가 훨씬 수월할 것이다! 🤔: 콜 스택은 왜 queue가 아니라 stack인가요? 💁‍♀️: 함수 호출의 구조적인 특성과 실행 흐름 제어 방식을 고려했을 때, stack 구조가 적합하기 때문입니다. (LIFO 방식) function A() { B(); } function B() { C(); } A(); // A → B → C 순으로 호출됨​ 위 코드에서 A()가 먼저 호출되고, B()가 A 안에서 실행되었으며, C()는 B 안에서 실행됩니다. 이 흐름에서 중요한 것은 " C가 끝나야 B가 끝날 수 있고, B가 끝나야 A가 끝날 수 있다는 것 "이에요. 즉, 나중에 호출된 함수가 먼저 끝나야 앞선 함수로 돌아갈 수 있다는 것인데 이게 사실상 LIFO 구조 인 셈이지요. JavaScript 이벤트 루프 시각화 아무래도 흐름이 중요한 개념이다 보니 이미지만 봐서는 이해하기가 어려웠는데, 찾아보니 이벤트 루프 과정을 애니메이션으로 볼 수 있는 시각화 사이트가 있다. 해당 사이트에서 다양한 비동기 코드를 추가하여 비동기 동작이 실제로 어떤 과정으로 일어나는지 확인해볼 수 있다. JavaScript 이벤트 루프 시각화 사이트 코드로 이해하는 이벤트 루프 동작 과정 이번에는 실제 코드를 사용해 이벤트 루프 동작 과정을 이해해보자. (아래 예시 코드는 ‘매일메일’ 서비스를 구독해서 받은 메일의 일부이다. 매일메일 최고👍 ) setTimeout(() => { console.log('1') setTimeout(() => {console.log('2')} ) Promise.resolve().then(()=> console.log('3')) console.log('4') }) Promise.resolve().then(() => { console.log('5') setTimeout(() => {console.log('6')} ) Promise.resolve().then(()=> console.log('7')) console.log('8') }) console.log('9') 정답: 9 5 8 7 1 4 3 6 2 실행 과정 1️⃣ setTimeout() , Promise 객체는 비동기 코드이기 때문에 webAPI로 넘어가고, 가장 하단의 console.log(’9’) 부터 실행된다. →** 9 출력** 2️⃣ setTimeout() 은 매크로테스크 큐에, Promise.then() 은 마이크로테스크 큐에 저장된다. 콜 스택이 비어있고, 테스크 큐에 콜백 함수가 있기 때문에 event loop가 동작한다. 이 때 마이크로테스크 큐의 우선순위가 더 높기 때문에 Promise.then() 부터 실행된다. 3️⃣ 5 출력 후, Promise.then() 내부의 setTimeout() 함수와 Promise 객체 역시 비동기 코드로 webAPI 넘어간다. 그 후 console.log(’8’) 이 실행된다. → 순서대로 5, 8 출력 4️⃣ Promise.then() 내부의 Promise 가 먼저 실행된다. → 7 출력 5️⃣ 그 후 첫 번째 setTimeout() 의 콜백 함수가 실행된다. 이 때도 역시 동기 함수 먼저 실행된다. → 1, 4 출력 6️⃣ 다음으로 setTimeout() 내부의 Promise.then() 의 콜백 함수가 마이크로 테스크 큐로 들어간다. → 3 출력 7️⃣ 마지막으로 매크로테스크 큐에 있는 3과 4의 setTimeout() 의 콜백 함수가 들어온 순서대로 실행된다. → 순서대로 6, 2 출력 8️⃣ 콜 스택과 이벤트 콜백 큐가 모두 비었기 때문에 event loop의 동작도 끝이 난다. +) 추가 참고 영상 이벤트 루프 과정을 이해하는데 큰 도움을 받았던 영상을 참고하며 글을 마친다. 애니메이션 영상과 코드를 사용해서 과정 그대로를 시각적으로 보여줘서 개념을 이해하기가 정말 수월했다! https://www.youtube.com/watch?v=eiC58R16hb8 참고 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Execution_model https://inpa.tistory.com/entry/🔄-자바스크립트-이벤트-루프-구조-동작-원리 https://velog.io/@leehyunho2001/자바스크립트-이론-부시기#자바스크립트-런타임