먼저, 자바스크립트는 싱글 스레드 언어입니다.
이는 즉, 호출 스택을 하나만 사용한다 = 동시에 하나의 일만 처리한다로 말할 수 있습니다.
console.log('집에 잘 들어가셨나요?');
setTimeout(()=>{
console.log('저기요...?')
},1000)
console.log('노숙하시는 건가요?');만약에 이 코드가 동기적으로 실행하게 된다면?
집에 잘 들어가셨나요?
저기요...?
노숙하시는 건가요? 순으로 출력될 것 입니다.
이렇게 동작하는 코드는 문제가 생깁니다.
자바스크립트 코드가 웹 브라우저의 환경에서 실행된다는 점에서 얘기가 많이 달라집니다.
어떠한 버튼을 클릭할때 실행되는 로직이 굉장히 시간이 오래걸린다고 생각해보면 그 버튼을 실행하고 있을때는 오랫동안 아무것도 할 수 없이 작업이 끝나기만을 기다려야 합니다.
근데 사실 저 코드는 실행시켜보면
집에 잘 들어가셨나요?
노숙하시는 건가요?
저기요..? 로 출력됩니다.
자바스크립트는 아까 말했듯이 싱글스레드 언어인데
그럼 어떻게 비동기요청을 지원하고 동시성에 대한 처리는 누가하는것일까?
이것을 이해하기 위해서는 자바스크립트 엔진에서 시야를 조금 더 넓혀서 웹 브라우저 전체를 볼 필요가 있다. 웹 브라우저는 Web APIs, 이벤트루프, 콜백 큐를 가지고 있습니다. 참고로, 아까 봤던 setTimeout ,Dom 메소드, HTTP요청 모두 WEB API에서 제공하는 메소드들 입니다. WEB API 메소드들은 작동을 마치면 전부 비동기 메소드이기 때문에 콜백함수들이 작동을 마치면 콜백큐에 집어넣습니다. 여기서 콜백함수들이 실행을 대기합니다. 콜백큐는 테스트 큐라고도 합니다. 자바스크립트 엔진 자체는 싱글스레드 이지만 자바스크립트가 구동되는 웹 브라우저는 여러개의 스레드가 사용된다. 즉 웹 API가 멀티 스레드로 동작한다. 자바스크립트 엔진이 이것들과 상호연동하기 위해 필요한 장치가 콜백큐와 이벤트 루프라 생각하면됩니다.
자바스크립트 엔진
- Webkit, V8 (엔진의 종류들, 차례로 사파리,크롬 등등)
- 자바스크립트 코드를 해석하고 실행하는 인터프리터
- 힙(Heap) + 호출 스택(Call Stack)
- 힙은 간단히 메모리 할당이 일어나는 부분
호출 스택(Call Stack)
- 함수가 호출되는 순서대로 쌓이는 스택
- 함수 실행 시 호출 스택에 해당 함수를 집어넣음
- 함수 return 시(함수의 실행이 끝나면) 호출 스택의 맨 위에 있는 해당 함수를 끄집어냄
- 사실은 함수가 아니라 함수의 실행 문맥
이벤트루프(Event Loop)
- 호출 스택과 콜백 큐를 계속 주시하고 있다.
- 호출 스택이 비어있으면, 먼저 들어온 순서대로 콜백 큐에 있는 콜백 함수들을 호출 스택으로 집어넣는다.
이 글은 영상을 보고 내용을 정리해봤습니다.
출처 : [10분 테코톡] 🍗 피터의 이벤트루프
