기술면접 준비

이벤트 루프(Event Loop) 가 무엇인가

자바스크립트의 런타임 모델은 Event Loop에 기반하고 있다.

또한 자바스크립트는 싱글 쓰레드 언어로써 한번에 하나의 동작만을 할 수 있는데 실제 우리가 자바스크립트를 사용하다보면 멀티 쓰레드 처럼 동시에 여러 작업을 수행할 수 있다는 것을 알게되는데 이것이 가능한 이유는

Event Loop가 자바스크립트의 동시성을 지원해주기 때문이다.

위의 사진은 자바스크립트의 동작 과정인데 하나하나 짚어보겠다.

우선 Javascript Engine은 코드의 실행을 도와주는 역할을 하는데 그중에서 가장 대표적으로 사용하는 것이 Google의 V8 엔진이다. 이 자바스크립트 엔진은 크게 세 영역으로 나뉘어 지는데

1. Call Stack

2. Memory Heap

3. Task Queue(Event Queue)

이다.

 

두번째로 동작하는 원리는 코드를 실행하게 되면 요청을 하나씩 Call Stack 에 담아(push) 실행하고 실행이 끝나면 사라진다.(pop)

여기서 만약 비동기 함수가 Call Stack 에 들어오게 되면 이 함수는 Web APIs로 들어가서 실행하게되고 이것이 Task Queue에 순차적으로 들어가게 된다.(enqueue)

이때, Event Loop 가 Call Stack 과 Task Queue 를 지속적으로 감시하여 Call Stack 이 비었을 경우 Task Queue 에 있는 함수를 Call Stack 으로 하나씩 넘겨주게(dequeue) 되는 것이다.

 

 

콜백 함수(Callback Function)가 무엇인가

콜백함수란 다른 코드의 인수로서 넘겨주는 실행 가능한 코드를 의미하는데 좀 더 쉽게 코드로 설명하자면

ex1)
function func(callback) {
    callback();
}

function callback() {
    console.log('callback이다');
}

func(callback);

ex2
function findUserAndCallBack(id, cb) {
    const user = {
      id: id,
      name: "User" + id,
      email: id + "@test.com",
    };
    cb(user);
  }
  
  findUserAndCallBack(1, function (user) {
    console.log("user:", user);
  });

위의 코드처럼 다른 함수의 인자로써 사용되는 함수라고 볼 수 있다.

콜백함수는 비동기 함수에서 동기적으로 처리하기 위해 사용이 되는데 

ex)
setTimeout(function() { // callback1
	console.log('How are you/');
	setTimeout(function() { // callback2
		console.log('I am fine.');
			setTimeout(function() { // callback3
				console.log('Thank you');
				setTimeout(function() { // callback4
					console.log('And you?');
				}, 3000);
			}, 3000);
	}, 3000);
}, 3000);

이런식으로 콜백함수를 남발하다 보면 콜백지옥에 걸릴 수 있게 되는 것이다. 이런 콜백함수의 단점을 보완하기 위해 Promise 가 나왔고 Promise 또한 콜백지옥에 걸릴 수 있는 단점이 있어, 최근에 자주 사용하는 Async Function 이 있다.

 

참고자료

https://blog.toktokhan.dev/t-767eb0fa38f3