[백엔드 기술면접] 이벤트 루프(Event Loop)와 콜백함수(Callback Function)
이벤트 루프(Event Loop)에 들어가기 앞서서
JavaScript 동작 방식에 대해서
- JavaScript는 싱글쓰레드 언어이다. 그런데 멀티쓰레드처럼 동시에 여러 작업을 수행 할 수가 있다.
- 그렇다면 JavaScript는 정말 싱글쓰레드가 맞을까? Re) 맞다. JavaScript의 메인쓰레드인 이벤트 루프가 싱글쓰레드이기 때문이다.하지만 이벤트 루프만 독립적으로 실행되는 것이 아닌 웹브라우저나 NodeJs같은 멀티쓰레드 환경에서 실행되고 이를 적절하게 사용함으로 멀티쓰레드처럼 사용이 가능한 것이다.
- 즉, 자바스크립트는 이벤트 루프를 이용해서 비동기 방식으로 동시성을 지원합니다.
- 힙(Heap): 힙은 동적으로 할당된 메모리 영역
- 콜 스택(Call Stack): 함수 호출(Call)과 반환(Return)을 관리하는 자료구조. 즉 콜 스택은 함수 호출 시 함수의 호출정보를 저장하고, 반환 시 저장된 호출 정보를 꺼내서 이전 호출 지점으로 돌아갈 수 있도록 함.
- 콜백 큐(Callback Queue): JavaScript에서 비동기 처리를 위해 사용되는 자료구조. 콜백 함수가 실행되어야 할 때, 콜백 큐에 해당 콜백 함수가 추가되며, 이벤트 루프가 콜백 큐에서 콜백 함수를 꺼내서 실행 시킴.
즉, JavaScript가 “단일 스레드”라는 말은 자바스크립트 엔진이 단일 호출 스택을 사용한다는 의미이다. 자바스크립트가 구동되는 환경(브라우저, Node.Js)에서는 여러 개의 쓰레드가 사용됨. 이러한 구동 환경이 단일 호출 스택을 사용하는 자바스크립트 엔진과 상호 연동하기 위한 장치가 바로 이벤트 루프이다.
잠깐 쓰레드(Thread)에 대해서
여기서 쓰레드는 프로세스 내에서 실행되는 독립적인 실행 단위이다. 즉, 프로세스는 운영체제로부터 자원을 할당받아 실행되는
작업 단위이고, 이 프로세스 내에서 독립적으로 실행되는 하나 이상의 스레드가 존재함.
이때 스레드는 자신만의 스택(Stack)공간을 가지고 있으며, 코드, 데이터, 힙 메모리 영역은 프로세스 내에서 공유한다.
이렇게 스레드는 다른 스레드와 공유하는 자원을 효율적으로 활용할 수 있어서, 멀티쓰레드 프로그래밍에 자주 사용됨.
이벤트 루프(Event Loop)
이벤트 루프는 Call Stack, Web APIs, Callback Queue, MicroTask Queue로 구성되어 있음. 동작 방식은 Call Stack에서 함수 실행이 관리가 되고, 함수가 호출되면 해당 함수의 컨텍스트가 콜스택에 쌓임. 그래서 함수 실행이 완료되면 해당 컨텍스트가 콜스택에서 제거가된다. 그리고 Web APIs 에서는 비동기 처리 함수(setTimeout, setInterval 등)이 실행이 되면 바로 결과를 반환하지 않고, 비동기적으로 실행이 된다. 만약 setTimeout 함수와 Promise가 실행이 되면 콜백 함수가 setTimeout -> Task Queue, Promise -> Microtask Queue 로 이동을 하게됨. 마지막으로 Microtask Queue에 콜백이 콜스택에 들어가 실행하게 되고, Task Queue에 있는 setTimeout의 콜백에 콜스택으로 이동해서 출력하게 됨.
즉, 이벤트 루프는 Call Stack과 Call Queue들을 감시하며 어떤게 비어져있고 어떤것을 채워야할지 정하며 수행합니다. Callback Queue에서는 콜백
- 컨텍스트(Context)는 코드가 실행되는 환경을 의미한다.
콜백 함수(Callback function)
콜백함수는 간단하게 다른 함수에 매개변수로 넘겨준 함수를 의미함. 매개변수로 넘겨받은 함수는 일단 넘겨받고, 때가 되면 나중에 호출(called back)한다는 것이 콜백함수의 개념이다.