이벤트 루프/ 콜백 함수

·2023년 4월 13일
0

study

목록 보기
54/78
post-thumbnail

자바 스크립트는 단일 스레드 기반의 언어로 한 번에 하나의 작업만을 처리할 수 있다.
비동기로 동작하기 때문에 단일 스레드임에도 불구하고 동시에 많은 작업을 수행한다.
하지만 비동기로 동작하는 핵심 요소는 자바스크립트가 아닌 브라우저가 가지고 있다.(Node의 경우 libuv 라이브러리)

브라우저는 Web APIs, Event Table, Callback Queue, Event Loop 등으로 구성됩니다.

  • Event Table: 특정 event(timeout, click, mouse move 등등)가 발생했을 때 어떤 callback 함수가 호출되야 하는지를 알고 있는 자료구조입니다.

  • Call Stack : 실행된 코드의 환경을 저장하는 자료구조로, 함수 호출 시 이곳에 저장된다. 어떤 함수를 저장하면 스택에 쌓고 또 다른 함수를 호출하면 그 다음 스택에 쌓이면서 가장 위에 쌓인 함수를 가장 먼저 처리한다. LIFO(Last In First Out)

  • Web APIs : Web API는 브라우저에서 제공하는 API로 DOM, Ajax, TimeOut 등이 있다.
    CallStack에서 실행된 비동기 함수는 Web API를 호출하고, Web API는 콜백 함수를 Task Queue에 넣는다.

  • Callback Queue : 함수를 저장하는 자료구조로, Call Stack과 다르게 가장 먼저 들어온 함수를 가장 먼저 처리한다.

    • microtask Queue/ macrotask Queue
  • Event Loop : 이벤트 루프는 call stack이 다 비워지면 callback queue에 존재하는 함수를 하나씩 call stack으로 옮기는 역할을 한다.

이벤트 루프 과정

function main(){
  console.log('First');
  setTimeout(
    function display(){ console.log('Second'); }
  ,0);
	console.log('Third');
}
main();


//	Output
//	First
//	Third
//  Second
  1. main 함수에 대한 호출이 먼저 call stack에 추가(push)됩니다. 그런 다음 브라우저는 main 함수의 첫 번째 명령문인 console.log('First')를 스택으로 추가됩니다. console.log('First')가 실행되어 화면에 출력한 뒤, call stack에서 제거됩니다.

  2. 다음 명령문인 setTimeout이 call stack에 추가되고 실행이 되면서 브라우저가 제공하는 timer Web API를 호출한 후에 call stack 에서 제거됩니다.

  3. console.log('Third')는 브라우저에서 timer가 실행되는 동안 스택에 추가가 되며 이 경우 0ms 의 시간만큼 지연이 되기 때문에 브라우저에서 콜백을 수신하는 즉시 메시지 대기열에 콜백이 추가됩니다.

  4. main함수에서 마지막 명령문이 실행된 후 main 함수가 call stack 튀어나와 call stack 이 비어있게 됩니다. 브라우저가 대기열인 message queue 에서 call stack 으로 메시지를 추가하려면 먼저 call stack이 비워있어야 합니다. 바로 이것 때문에 setTimeout에서 제공된 지연시간이 0ms임에도 다른 모든 것들이 실행이 완려될 때까지 기다려야 하는 이유입니다.

  5. 이제 콜백이 call stack으로 추가되어 실행이 됩니다. console.log('Second')가 실행이 되며 이것이 자바스크립트의 이벤트 루프 입니다.

정리하면,

  1. V8 엔진(JS 엔진 - 구글)에서 코드가 실행되면, Call Stack에 쌓인다.
  2. Stack의 선입후출의 룰에 따라 제일 마지막에 들어온 함수가 먼저 실행되며,
    Stack에 쌓여진 함수가 모두 실행된다.
  3. 비동기함수가 실행된다면, Web API가 호출된다.
  4. Web API는 비동기함수의 콜백함수를 Callback Queue에 밀어넣는다.
  5. Event Loop는 Call Stack이 빈 상태가 되면
    Callback Queue에 있는 첫번째 콜백을 Call Stack으로 이동시킨다.
    (이러한 반복적인 행동을 틱(tick)이라 한다.)

자바스크립트를 단일 스레드 프로그래밍 언어라 한번에 하나씩 밖에 실행할 수 없다.
그러나 Web API, Callback Queue, Event Loop 덕분에 멀티 스레드 처럼 보여진다.

이벤트 루프란?

단일 스레드(call stack이 하나) 프로그래밍 언어 자바스크립트가 비동기처럼 코드를 처리하게 도와주는 것.

이벤트 루프는 call stack이 다 비워지면 callback queue에 존재하는 함수를 하나씩 call stack으로 옮기는 역할을 한다.
이러한 반복적인 행동을 틱(tick) 이라 부른다.

call stack : 함수 호출 시 저장되는 곳. 어떤 함수를 저장하면 스택에 쌓고 또 다른 함수를 호출하면 그 다음 스택에 쌓이면서 가장 위에 쌓인 함수를 가장 먼저 처리한다. LIFO(Last In First Out) 후입선출.

Callback Queue : 비동기적으로 실행된 콜백함수가 보관되는 자료구조로, Call Stack과 다르게 가장 먼저 들어온 함수를 가장 먼저 처리한다. FIFO 선입선출.

비동기 : 여러 개의 요청을 동시에 수행 가능한 것

콜백함수

콜백 또는 콜백 함수(callback function)는 다른 코드의 인수로서 넘겨주는 실행 가능한 코드를 말한다.

좀 더 이해가 가도록 풀어서 설명하자면 함수를 등록하기만 하고 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수!

예를 들자면 우리가 프론트 script에서 버튼을 클릭했을때 로그인 함수가 실행되게 만들면 그 로그인 함수가 콜백함수임 + setTimeout함수

이벤트 루프1
이벤트 루프2

profile
개발자 꿈나무

0개의 댓글