혹시 이벤트 루프(Event loop)에 대해 들어본 적이 있으신가..?
그렇다면 아마 자바스크립트를 자주 사용하는 개발 취준생일 가능성이 높다!
이전에 글에서 스레드라는 개념에 대해 설명을 한 적이 있다.
https://subplus.tistory.com/19
프로세스와 스레드(thread)의 차이, 그리고 멀티 스레드란?
기술면접, 그리고 업무상 필요로 CS지식을 공부하는 경우가 꽤 있을 것이다.그 중 아마 자주 들었던 단어는 프로세스,그리고 좀 더 깊게 파고들면 스레드,특히 스레드는 이것은 싱글 스레드이고,
subplus.tistory.com
아시다시피, Javascript는 싱글스레드이다.
그리고, 하나의 스레드(thread) 안에는 하나의 콜 스택(Call stack)이 존재한다.
콜 스택이란 무엇인가..?
매우 중요한 개념 중 하나이다. 여기서는 자세히 설명하기는 좀 모하지만,
출처 영상에서 나타난 모식도를 나타내면 다음 아래와 같다.
어떤 longThreeAndFour()라는 함수가 있고,
그 함수 안에 console.log("Four!")라는 메서드가 존재하다고 가정해보자.
아마 log 함수를 실행을 시킨다면, 콜 스택에는 먼저 그 함수가 1층에 쌓이게 된다.
그리고 그 함수에 마치 꼬리에 꼬리라 물리듯 물린 다른 함수나 메서드가 실행되는데,
여기서는 console.log("Four!")가 되겠다.
console.log가 2층에 쌓이게 된 다음,
만약 이제 더이상 쌓일 것이 없게 되는 시점,
그러니까.. 함수 호출이 완료되는 시점에 되어서는,
맨 윗 층부터 하나하나 실행시켜 나간다.
여기서, 핵심은 따로 있다. 바로 콜 스택의 작동방식, 그러니까
한 번에 하나의 임무(Task)만 수행할 수 있다는 것이다!
위에서 적었듯 Javascript는 하나의 콜 스택만 존재하니,
하나의 임무만 동시에 수행이 가능하다.
그런데 만약 굉장히 오래 시간이 걸리는 임무가 존재하다면?
그렇게 되면 그 임무를 수행하는 긴 시간 동안,
다른 임무는 수행하지 못해 지연된다는 문제가 발생한다.
다행이도..! 이런 문제가 발생하지 않도록 Javascript는 여러가지 시스템이 고안되어 있다.
아래는 Javascript의 런타임(run time)이라 하여 Javascript가 실행될 때 구성되는 체계이다.
쉽게 설명을 하기 위해, 아래 스크린 샷의 영상 제작자가 setTimeout이라는 함수를 이용하여
각각 2000ms, 100ms 씩 지연되는 메서드를 작성하였다.
여기서 먼저 발생하는 일은 다음과 같다. 스크립트가 읽어진 순서대로
1. setTimeout() 첫 번째 2000ms 가 콜 스택에 쌓이게 된다.
2. 그러나 이는 콜 스택에서 Web APIs로 옮겨지게 된다. -> 여기서 2000ms 동안 머물게 된다.
3. setTimeout() 두 번째 100ms 가 콜 스택에 쌓이게 된다.
4. 그러나 이 또한 콜 스택에서 Web APIs로 옮겨지게 된다. -> 여기서 100ms 동안 머물게 된다.
여기서 Wep APIs란: 웹 브라우저에서 자바스크립트가 상호작용 할 수 있도록 제공되는 기능들이다.
5. console.log("End of script") 가 콜 스택에 쌓인다.
6. 해당 메서드는 콜 스택에서 바로 실행되는 동기 함수(Synchronous Function)이기 때문에 바로 실행이 된 후 제거된다.
7. 100ms 이 지난 후 setTimeout() 두 번째 함수가 TaskQueue(큐)로 이동한다.
8. 콜 스택에 비워져 있으면, Even Loop를 통해 setTimeout() 두 번째 함수가 콜 스택으로 옮겨진다.
9. 두 번째 함수가 실행된다. 콘솔에 100ms가 뜬다.
10. 2000ms이 지난 후 setTimeout() 첫 번째 함수가 큐에 이동한다.
8. 콜 스택이 비워져 있으면, Event Loop를 통해 해당 함수가 콜 스택으로 이동한다.
9. 첫 번째 함수가 실행된다. 콘솔에 2000ms가 뜬다.
이를 통해, event loop은 setTimeout과 같은 동기 함수가 아닌 것,
그러니까 여러 작업들이 순서가 보장되지 않고 한꺼번에 처리되는 비동기 함수(Asynchronous Function)들을
처리하는 핵심 장치라는 것을 이해할 수 있다.
한 마디로, Event Loop는 Javascript의 비동기 함수 실행의 핵심 역할을 하는 요소이다!
동기 비동기에 대해 어렵다고 느끼신 분이 계신다면 아래 글을 추천드린다.
https://subplus.tistory.com/17
기술 면접 예상 질문 대비: 동기와 비동기 통신
전공자가 아닌 취준생에게는 검증을 위한 추가의 과정을 거치는 경우가 꽤 있다.그 사람이 CS(Computer Science)에 대한 기본적인 지식을 알고 있는지 질문을 하게 되는데,답변을 흐지부지하게 하게
subplus.tistory.com
도움이 된 영상입니다.
'TIL' 카테고리의 다른 글
| Base 64 인코딩(encoding)이란 무엇인가? - 사용하는 이유 (0) | 2025.01.14 |
|---|---|
| Base 64 인코딩(encoding)이란 무엇인가? - 매우 쉬운 원리 (6) | 2025.01.12 |
| 세션(Session)과 토큰(Token)의 차이를 알아보자 (0) | 2024.08.01 |
| 프로세스와 스레드(thread)의 차이, 그리고 멀티 스레드란? (5) | 2024.07.24 |
| 기술 면접 예상 질문 대비: DI와 의존성 주입 (10) | 2024.07.20 |
