면접스터디 Day1
Q. 이벤트루프에 대해 설명하시오.
이벤트루프(Event Loop)는 간단하게 한줄 설명이나 짧게 설명 할 수 없는 내용이다. 왜냐면 굉장히 여러가지 개념들이 종합해서 들어기 때문이다.
그러기 위해서는 가장 먼저 Javascript의 작동원리에 대해서 알아야한다.
Javascript는 기본적으로 싱글스레드(Single threaded programming language)이다.
여기서 싱글스레드는 간단히 말하면 한번에 하나의 작업만을 할 수 있다는 이야기이다.
그러면 다른 작업이 중간에 끼어들 수도 없고, 기존에 수행하던 작업이 끝나야만 그 다음 작업을 수행할 수 있다.
그러면 싱글스레인드인 것은 이해를 했다. 작동은 어떻게 하는 것일까?
자바스크립트 위의 그림과 같은 런타임을 구성하고 있다.
런타임: 프로그램이 실행되고 있는 때 존재하는 곳.
메모리 힙: 메모리 할당을 담당하는 곳.
콜스택: 코드가 호출되면서, 스택으로 쌓이는 곳.예시를 통해서 이해를 해보자.
let box = () => {
done()
console.log('box')
}
let done = () => {
console.log('done')
}
box();
console.log('box and done')그러면 어떤식으로 출력이 될까?
done -> box -> box and done콜스택 순서를 이해해보자.
1. box 함수 실행
2. box 함수 내부에서 done 함수 실행
3. console.log(‘done’) 실행 후 콜스택에서 제거
4. done 함수 모두 실행되었으니 제거
5. box 함수로 돌아와서 console.log(‘box’) 실행 후 콜스택에서 제거
6. box 함수 모두 실행되었으니 제거
7. console.log(‘box and done’)가 콜스택에 추가, 실행 후 제거
그러면 비동기 지원을 어떤식으로 할까?
Javascript의 런타임 '자체'에서 비동기는 지원하지 않는다.
동시성을 보장하는 비동기, 논블로킹 작업들은 Javascript 엔진을 구동하는 런타임'환경'에서 담당한다. 런타임 환경이란, 브라우저 혹은 Node.js를 말한다.
그래서 위의 그림적으로 최종적인 이벤트루프가 그려진다.
런타임 환경에서 비동기 코드가 어떻게 실행되는가?
자바스크립트코드들이 실행될 때, Web api가 지원하는 비동기 작업을 수행하는 코드가 실행된다고 생각해보자. 비동기 작업을 수행하는 코드는 아래의 순서로 실행된다.
- 코드는 호출스택에 쌓인 후 실행되면, Javascript의 엔진은 비동기 작업을 Web api에게 넘겨준다.
- Web api는 해당 비동기 작업을 수행하고 콜백 함수를 이벤트 루프를 통해 태스크 큐에 넘겨주게 된다.
- 이벤트 루프는 콜스택에 쌓여있는 함수가 없으면, 태스크 큐에서 있던 콜백함수를 콜스택으로 넘겨준다.
- 콜스택에 쌓인 콜백함수가 실행되고, 콜스택에서 제거된다.
예시를 통해서 이해를 해보자.
console.log('첫번째');
setTimeout(() => console.log('최소 2초 후에 실행됩니다.'), 2000);
console.log('언제함?');출력 순서는?
첫번째
언제함?
최소 2초 후에 실행됩니다.제일 먼저 console.log(‘첫번째’)가 콜스택에 쌓이고, 이는 바로 실행되고 제거된다.
다음으로 setTimeout이 콜스택에 쌓인다. setTimeout이 실행되고, Web api에서 timer가 생성된다.
console.log(‘언제함?’)가 콜스택에 쌓인 후, 바로 실행되고 제거된다.
Web api에서 생성된 timer는 생성된 시점을 기준으로 최소 2초 후에 태스크 큐로 콜백함수를 전달한다.
태스크 큐에 전달되어있던 setTimeout의 콜백함수가 콜스택에 스택이 없는것을 확인한 후, 콜스택에 호출되어 실행된다.
기본적으로 오늘 한 내용들의 정리이다.
사실 위에 내용에도 적었지만 이벤트루프를 정말 간단하게 설명하기에는 어려웠다. 왜냐하면 자바스크립트가 싱글스레드인 것을 설명하면 이어서 자바스크립트의 런타임을 설명하고 콜스택, 콜백 큐를 설명하고 꼬리식으로 설명이 이어진다.
그래서 간단하게 답변을 했는데 동기들의 피드백을 받았다.
동기JW FeedBack : "이벤트루프가 존재하는 이유, 이점 어떻게 동작하는지 디테일하게
설명해주면 좋을 것 같다."
동기SH FeedBack: "흘러가는 플로우 어느정도 설명을 잘했다.
정확한 용어 틀림. 돌아갈때 셋타임아웃 비동기처리가 됬을때 순차적
으로 설명하는게 핵심 포인트이다."
일단 자바스크립트 런타임에서 콜스택 콜백큐가 헷갈려서 스택큐, 콜백스택 이렇게 섞어서 말했다. 조금 더 집중해서 암기할 필요가 있을 것 같다.
