- 이벤트 루프 (Event Loop)에 대해 설명해보세요.
먼저 JavaScript는 싱글스레드 입니다. 하지만 멀티쓰레드 처럼 동시에 여러 작업을 수행할 수 있습니다. 어떻게? 그 이유는 JS의 메인 스레드인 이벤트루프가 싱글 스레드이기 때문에!! 하지만 이벤트 루프만 독립적으로 실행되는것이 아닌 웹 브라우저나 NodeJS 같은 멀티쓰레드 환경에서 실행되고 이를 적절하게 사용함으로써 멀티쓰레드처럼 사용이 가능한 것입니다.
출처 : How JavaScript works: an overview of the engine, the runtime, and the call stack
Memory Heap & Call Stack
먼저 Memory Heap에 있는 사용자가 작성한 코드들은 Call Stack에서 Stack 방식으로 쌓이며 코드를 실행하게 되는데 이때 동기 함수들은 그대로 실행하게 되고 비동기 함수들은 Web API로 처리하게 되며 일을 분배합니다.
Stack : 후입선출(LIFO)로 마지막에 들어간 것이 먼저 나가는 방식
Web API
Javscript를 사용하면서 우리가 많이 사용하는 API 들은 사실 JavaScript에서 지원하는 것이 아닌 웹 브라우저에서 제공하는 API로 DOM ,AJAX, Timeout 등이 있습니다.
Call Stack에서 실행된 비동기 함수는 Web API에서 처리를 하게 되고 그동안에 Call Stack은 나머지 동기 함수들을 처리하게 됩니다.
Web API는 비동기 함수들을 처리하며 작업이 완료된 비동기 함수들을 Callback Queue로 넘겨주게 됩니다.
Callback Queue(Task Queue)
Callback Queue는 비동기 함수들을 보관하는 장소로 Event Loop에서 비동기 함수를 꺼내기 전까지는 계속 Queue방식으로 보관하게 됩니다.
Queue : 선입선출(FIFO)로 먼저 들어간 것이 먼저 나가는
Event Loop
Event Loop는 Call Stack과 Callback Queue를 상태를 계속 감시하며 Call Stack에 함수들이 존재하지 않는다면 Callback Queue에 있는 비동기 함수들을 Call Stack에 밀어 넣게 됩니다. 그 후 Call Stack에서 비동기 함수를 실행시키게 됩니다.
참고자료
https://chanyeong.com/blog/post/44
https://blog.toktokhan.dev/t-767eb0fa38f3
- 콜백 함수 (Callback Function)가 무엇인지, 어떻게 사용되는지 설명해보세요.
콜백 함수 (Callback Function)는 다른 함수의 인자로 전달되어, 실행가능한 코드를 말합니다. 콜백은 태스크가 끝나기 전에 함수가 실행되지 않는 것을 보장합니다. 때문에 비동기에서 여러 문제와 에러들로부터 안전하게 지켜주죠.
콜백 함수는 다음과 같은 형태로 사용됩니다.
function foo(callback) {
// 작업 수행
callback(); // 콜백 함수 실행
}
function bar() {
// 추가적인 작업 수행
}
foo(bar); // foo 함수에 콜백 함수로 bar 함수를 전달위 예제에서는 foo 함수에 bar 함수를 인자로 전달하고 있습니다. foo 함수 내부에서는 작업을 수행한 후, 인자로 전달받은 callback 함수를 실행하고 있습니다. 이때 bar 함수가 실행되어 추가적인 작업이 수행됩니다.
이러한 콜백 함수는 비동기적인 작업을 처리할 때 많이 사용됩니다. 예를 들어, setTimeout 함수나 fetch 함수는 비동기적인 작업을 처리하고, 해당 작업이 완료되면 콜백 함수를 실행하여 결과를 전달합니다.
setTimeout(function() {
console.log('Hello, world!');
}, 1000); // 1초 후 'Hello, world!' 출력위 예제에서는 setTimeout 함수에 익명의 콜백 함수를 전달하고 있습니다. 이 함수는 1초 후 실행되며, 실행 시점에서는 'Hello, world!'가 출력됩니다.
콜백 함수는 자바스크립트에서 비동기적인 작업을 처리하기 위한 핵심적인 도구 중 하나입니다. 이를 통해 비동기 작업의 결과를 다루거나 추가적인 작업을 수행할 수 있습니다. 하지만, 콜백 함수를 중첩해서 사용하게 되면 코드가 복잡해지는 단점이 있으므로, 최근에는 Promise나 async/await와 같은 기술들이 많이 사용되고 있습니다.
