이벤트 루프
서론
이벤트 루프(Event loop)
- 싱글 스레드의 문제점과 해결
- 자바스크립트는 싱글 스레드 언어로 설계되어 있어, 하나의 작업 시간이 길면 블로킹 현상이 발생하여 전체 프로그램이 멈출 수 있다.
- 이를 해결하기 위해 자바스크립트는 이벤트 루프와 비동기 프로그래밍을 도입하여, 싱글 스레드 환경에서도 효율적으로 다양한 작업을 처리할 수 있게 한다.
- 이벤트 루프의 역할
- 이벤트 루프는 자바스크립트 엔진이 비동기 작업을 관리하고, 프로그램의 흐름을 제어하는 메커니즘이다. 이를 통해 자바스크립트는 싱글 스레드 언어임에도 여러 작업을 동시 처리할 수 있는 것처럼 보이게 한다.
- 이벤트 루프를 이해하지 못하면 복잡한 비동기 코드나 네트워크 요청 처리 시 성능 저하 또는 블로킹 문제가 발생할 수 있다. 예를 들어, 무한 스크롤 기능에서 API 응답이 완료되기 전에 이벤트가 트리거되면 올바르게 동작하지 않을 수 있다.
이벤트 루프의 기본 개념
콜스택(Call Stack)
힙(Heap)
- 메모리 할당과 관리
- 자바스크립트에서 동적으로 할당되는 메모리의 저장 공간이다.
- 객체와 같은 복잡한 데이터 구조를 저장한다.
- 자바스크립트 엔진은 힙에서 필요한 메모리를 할당하고 관리한다.
- 메모리 누수 방지를 위해 자바스크립트 엔진은 가비지 컬렉션을 사용하여 더 이상 참조되지 않는 객체를 힙에서 제거한다.
큐(Queue)
- 콜스택이 비워질 경우 실행될 콜백함수들을 모아둔 대기열이다.
- 태스크 큐(Task Queue)
- 일반적인 비동기 작업들이 대기하는 곳이다.
setTimeout,setInterval등의 작업이 완료되면 해당 콜백 하수가 태스크 큐에 추가된다.
- 마이크로태스크 큐(Microtask Queue)
- 프로미스 같은 더 높은 우선순위의 작업들이 대기하는 곳이다.
- 태스크 큐보다 먼저 실행된다.
비동기 작업이 이루어지는 과정
const foo = () => console.log("First");
const bar = () => setTimeout(() => console.log("Second"), 500);
const baz = () => console.log("Third");
bar();
foo();
baz();
- bar() 호출
- 자바스크립트 엔진이 실행 컨텍스트를 생성한다.
setTimeout이 비동기 함수이므로 Web API로 비동기 함수를 넘긴다.- 실행 컨텍스트를 제거한다.
- foo()와 baz()
- 일반적인 함수이므로 자바스크립트 엔진이 실행 컨텍스트를 생성하고 내부 코드를 실행한 후 실행 컨텍스트를 제거한다.
- web API
setTimeout을 처리하고 콜백함수를 태스크 큐로 옮긴다.- 만약
setTimeout이 아닌 프로미스 같은 우선 순위가 높은 비동기 작업일 경우 마이크로 태스크 큐로 옮긴다.
- 이벤트 루프
- 콜 스택이 비어 있는 경우 큐에 있는 콜백함수를 콜 스택으로 푸시한다.
- 콜스택
- 콜백 함수를 실행한다
- 실행 결과
- First, Third, Second가 출력된다.
Reference
https://inpa.tistory.com/entry/🔄-자바스크립트-이벤트-루프-구조-동작-원리
https://github.com/baeharam/Must-Know-About-Frontend/blob/main/Notes/javascript/event-loop.md
https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif
웹 개발자 고기호입니다.