JS
JS - 이벤트 루프 ( Event Loop )
pows1011
2024. 4. 11. 15:16
싱글 스레드 기반 언어
- 자바스크립트는 싱글 스레드 ( Single Thread ) 프로그래밍 언어인데,
이 의미는 한번에 하나의 작업만 수행이 가능하다 즉 Call Stack이 하나라는 이야기이다.- 스레드 : 프로세스의 실행 단위 즉, 일을 처리하는 사람의 수라고 생각하면 쉬움 싱글 스레드라는 건 일을 처리하는 사람이 한명 이라는것
블로킹 ( Blocking )과 논블로킹( Non-Blocking )
블로킹 : 긴 작업이 완료될 때까지 다른 모든 작업들이 멈춰있다가 해당 작업이 끝난 후에 다시 진행되는것
논블로킹 : 작업이 진행되는 동안에도 다른 작업들을 계속해서 진행시킬 수 있는 것
이벤트 루프 ( Event Loop ) 구조
JS Engine
- 자바스크립트 엔진은 Memory Heap과 Call Stack으로 구성되어있다.
- 가장 유명한것이 구글의 V8 Engine
- Memory Heap : 메모리 힙은 컴퓨터가 정보를 저장하는 곳입니다, 즉 자바스크립트 관점에서 보면 우리가 만드는 객체,배열,함수 등의 데이터가 저장되는 공간입니다.
- Call Stack : 자바스크립트 관점에서 봤을 때 자바스크립트의 할 일 목록이라고 생각하면 됩니다.
함수를 호출하게 되면 해당 함수의 정보가 콜 스택에 쌓이게 되고,먼저 들어간 것이 마지막에 나오는
( FILO )구조입니다.
웹 API ( Web APIs ) , 콜백 큐 ( Callback Queue )
- 자바스크립트 엔진 외부에서 관리되며, 주로 브라우저나 Node.js와 같은 자바스크립트 런타임 환경에서 제공됩니다.
- 웹 API ( Web APIs ) : 웹 API는 브라우저가 제공하는 다양한 기능들을 의미합니다. 예를 들면 HTTP 요청,setTimeout등의 기능들이 포함됩니다. 이런 작업들은 주로 비동기적으로 처리가 되므로 완료 시점을 정확히 알 수 없습니다.
- 콜백 큐 ( Callback Queue ) : 콜백 큐는 비동기 작업 ( setTimeout,HTTP 요청 )의 결과나 나중에 실행되어야 하는 작업들이 대기하는 공간입니다. 먼저 들어간 작업이 먼저 나가는 ( FIFO )구조입니다 여기에 있는 콜백 함수들은 콜 스택이 비어졌을때 먼저 대기열에 들어온 순서대로 수행됩니다.
- 단순히 비동기 함수가 콜백 큐에 쌓이는것은 X
- 콜백 큐에는 3가지 종류가 있습니다.
- 태스크 큐 ( Task Queue )
- 일반적으로 매크로 태스크 ( Macrotask Queue ) 라고도 부릅니다. setTimeout,setInterval 등의 비동기 작업이 이곳에 들어가게 됩니다.
- 마이크로태스크 큐 ( Microtask Queue )
- 프로미스( Promise )의 콜백 함수나 async / await , MutationObserver와 같이 우선적으로 비동기 처리되는 함수들의 콜백 함수가 들어가는 큐 ( 처리 우선순위가 높다 )
- 애니메이션 프레임 큐 ( Animation Frame Queue)
- 브라우저 환경에서 화면을 업데이트하는 작업도 비동기적으로 처리됩니다.
- requestAnimationFrames과 같은 코드가 여기에 해당
- 브라우저 환경에서 화면을 업데이트하는 작업도 비동기적으로 처리됩니다.
- 태스크 큐 ( Task Queue )
이벤트 루프 동작 과정
- 콜 스택 ( Call Stack ) 확인 : 이벤트 루프는 먼저 현재 콜 스택이 비어있는지 확인 합니다.
만약 콜스택에 아직 처리되지 않은 함수가 있다면, 해당 함수가 완전히 실행될 때까지 기다립니다. - 콜백 큐 ( CallBack Queue ) 확인 : 만약 콜스택이 비어있다면, 이제 콜백 큐를 확인합니다.
콜백 큐에는 웹 API 등에서 생성된 콜백 함수들이 대기합니다. - 함수 이동 : 콜백 큐에서 가장 오래된 함수를 꺼내서 콜 스택으로 옮깁니다.
- 함수 실행 : 이제 해당 함수가 콜 스택에서 실행되고 실행이 끝나면 스택에서 빠져나가게 됩니다.
- 위 과정들이 프로그램이 종료될 때까지 반복합니다.