프론트엔드 면접 단골 질문 5 | 비동기 함수와 Callback 함수, 그리고 Event Loop에 대해 설명하시오

원하시는 기업에 꼭 합격하시길 기원하겠습니다 :)
면접 연습에 스크립트가 필요하신 분들은 아래를 참고해주세요.
1. *비동기 처리는 왜 필요한가?*
아시다시피, Javascript는 싱글 스레드 언어입니다. 그 말인 즉슨, 두 개 이상의 연산이나 함수를 동시에 실행할 수 없다는 뜻이죠. 하나의 연산이 실행 중이면, 쓰레드가 block되는 것입니다. 현대 컴퓨터 성능에서, 간단한 함수 실행에 의한 쓰레드 block은 체감하기 힘들지만, 네트워크 요청, DB Query, 파일 시스템 제어 등 시간이 오래 걸리는 작업도 있습니다. 이런 작업들이 메인 쓰레드를 block하고 있으면, 심각한 자원 낭비와 사용성 저하로 이어질 수 있겠죠. 따라서, 메인 쓰레드를 block하지 않고 이런 작업들을 수행할 수 있는 방안이 필요합니다.
2. *비동기 작업이란 무엇인가?*
다행히 자바스크립트 엔진은, 긴 시간이 소요되는 작업들을 메인 쓰레드에서 처리하지 않습니다. Node.js의 경우, libuv라는 C++ 라이브러리를 통해, 브라우저의 경우 Fetch와 같은 웹 API를 통해 백그라운드에서 처리하죠. 이렇게 자바스크립트의 메인 쓰레드가 아닌, 백그라운드에서 처리하는 작업을 "비동기 작업"이라고 부르는 것입니다.
3. *왜 C++ 라이브러리를 사용하는가?*
그럼 여기서 한 가지 의문이 들 수 있죠. 백그라운드라는 것은 무엇이며, 왜 자바스크립트를 실행하는데 C++ 라이브러리를 사용하는가? 이를 이해하기 위해선, "자바스크립트"와 "자바스크립트 실행 환경"을 구분하는 것이 중요합니다. "자바스크립트 실행 환경"인 Nodejs와 브라우저는 자바스크립트만으로 이루어져 있지 않습니다. 자바스크립트만으로 프로그램의 기본적인 흐름은 잡을 수 있지만, 한계가 있기 때문이죠. 여기에는 single thread blocking 이슈를 비롯하여, 파일 시스템 접근과 OS 수준의 작업이 자바스크립트만으로는 불가능하다는 문제도 있습니다. 이 한계를 보완하기 위하여 자바스크립트 실행 환경 내에 자바스크립트로 접근 가능한 여러 기능들을 구현해 놓은 것입니다. 비동기 처리도 이 기능들 중 하나구요. 집에 TV나 냉장고가 없다고 해서 사람이 살 수 없는 것은 아니지만, 있으면 삶의 질이 확실히 올라가죠? 여기서 자바스크립트의 메인 쓰레드를 사람에, libuv와 웹 API를 가전 제품에 비유해볼 수 있습니다.
4. *Callback 함수란 무엇인가?*
다시 본론으로 돌아와, 메인 쓰레드에서 "비동기 함수"를 만나면 실제 처리를 백그라운드로 위임한다고 설명드렸습니다. 당연하게도, 백그라운드에서 작업이 완료되면, 실패가 됐든, 성공이 됐든 메인 쓰레드가 결과를 알 수 있어야합니다. 왜냐하면 메인 쓰레드에서 요청한 작업이니까요. 동시에, 메인 쓰레드 입장에서 비동기 작업이 성공했을 때는 이런 처리를, 실패했을 때는 저런 처리를 하고 싶다는 요구가 있을 수 있습니다. 그래서 우리는 비동기 함수를 호출할 때, 처리 완료 시 메인 쓰레드에서 실행할 함수를 함께 전달하는데, 이를 callback함수라고 합니다. 웬만한 비동기 함수들은 callback 함수를 인자로 받을 수 있게 설계되어 있고, 보통 마지막 인자로 전달하게끔 되어있으니, 각 함수별 스펙을 참고하시면 되겠습니다. 정리하자면, "비동기 작업이 완료되었을 때 메인 쓰레드에서 실행할 함수"를 callback 함수라고 부른다는 것입니다.
5. *이벤트 루프의 필요성*
callback 함수는 백그라운드로 잠시 전출간 메인 쓰레드 식구입니다. 즉, 언젠가는 다시 메인 쓰레드 안으로 들어와야 한다는 것이죠. 그런데, 메인 쓰레드와 백그라운드는 별도의 프로세스이기 때문에, callback함수가 들어와야 하는 시점이 애매해질 수 있습니다. 메인 쓰레드에서 다른 연산이 진행 중일 수 있기 때문인데요, 따라서, 이 callback함수가 들어올 시점을 정해주는 체계가 필요하며, 이 역할을 담당하는 것이 바로 Event loop입니다.
6. *Event loop의 동작 원리*
메인 쓰레드에서 실행되는 모든 함수들은 Call Stack이라는 공간에 LIFO 형태로 차곡차곡 쌓이게 됩니다. 함수가 호출되면 Call Stack에 push되고, return 문을 만나면 pop되는 단순한 구조이죠. 만약 Call Stack에 비동기 함수가 들어오면 즉시 pop하여 백그라운드로 전달합니다. 비동기 함수가 백그라운드에서 처리되는 한편, 동시에 Call Stack에서는 다음 함수가 계속해서 실행되고 있기 때문에 single thread blocking 문제를 해결할 수 있습니다. 이후, 백그라운드에서 비동기 처리가 완료되면, 호출 시점에 전달한 callback함수가 Event Queue라는 공간에 FIFO 구조로 쌓이게 됩니다. 여기서 이벤트 루프가 등장하는데, 간단히 말하자면 Event Queue에서 Call Stack으로 callback 함수를 이동시켜주는 역할을 합니다. 이벤트 루프는 call stack이 완전히 비어있는지 수시로 확인하며, 비어있는 경우 event queue에서 callback함수를 shift한 다음, call stack에 push해주는 역할을 수행합니다. Event Queue와 Call Stack 사이에 존재하는 일종의 신호등이죠. 다시 정리하자면, 모든 함수 호출들은 call stack에 LIFO구조로 쌓이고, 비동기 함수는 Call stack에 들어오는 즉시 백그라운드로 보내진다. 백그라운드에서 처리가 완료되면 callback 함수들은 event queue에 FIFO구조로 쌓이며, Event loop가 신호를 줄 때까지 기다린다. Event loop는 call stack이 비어있는지 수시로 확인하며, 비어있을 경우, Event queue에 쌓인 callback 함수를 shift하여 call stack에 push한다. 이상입니다.
7. *Promise와 async-await의 등장*
자, 여기까지 비동기 함수와 Callback 함수, 그리고 이벤트 루프의 개념에 대해 살펴보았습니다. 여기에 더해, 모던 자바스크립트에서 한 가지 더 알아두면 좋을 개념이 바로 Promise와 async-await인데요, 앞서 살펴보았던 Callback 함수의 진화 버전이라고 보시면 되겠습니다. Promise와 async-await에 대해 잘 정리한 영상이 있으니, 궁금하신 분들은 첨부된 영상 참고해주시면 감사하겠습니다.

[@sharonk1872]

수준 높은 영상 잘 보고 있습니다! 감사합니다

[@user-zw6bb8xl4h]

설명이 너무 좋아요~~

[@user-fw2se9ms4i]

감사합니다😊

[@choonchoo]

오옹 면접 준비하느라 듣고 있는데 넘 좋아요! 앞으로도 많이 만들어주세요😆

[@user-fw2se9ms4i]

도움이 되셨다니 다행입니다 :) 감사합니다!

[@HongSerge-mg5mj]

설명감사해여 ㅎㅎ 운동하면서 듣기좋네요.
혹시 동영상편집은 어떤걸로하시나요?

[@user-fw2se9ms4i]

영상 시청 감사합니다:) 편집은 애프터이펙트로 하고 있어요~ㅎㅎ