들어가기 전
이 전에 사수님이 알려주신 좋은 영상이 있다.
그 당시에는 JavaScript에 대해 잘 몰랐을 때여서 머릿속에 잘 들어오지 않았던 내용이었지만 가장 기본적으로 알아야 할 중요한 내용이므로 이렇게 다시 몇 번 더 영상을 보고 기억에 잘 남도록 정리하려고 한다.
JavaScript는 싱글스레드인가?
JavaScript는 싱글스레드 언어이다.
스레드가 하나라면 여러가지 작업을 동시에 할 수 없다는 뜻인데, 어떻게 비동기 처리가 가능할까?
JavaScript 런타임은 멀티스레드이다.
JavaScript는 싱글스레드이지만 JavaScript가 실행되는 환경(자바스크립트 런타임) 은 싱글스레드가 아니다.
대표적인 자바스크립트 엔진인 V8엔진은 js코드를 실행시켜주는데, 이러한 엔진은 웹 브라우저 내부 혹은 Node.js 안에 구성되어 있다.
그래서 F12(개발자 도구) 콘솔창에서도 JS함수를 실행 할 수 있는 이유다
V8엔진은 메모리할당이 일어나는 콜스택과, 함수가 호출될때 쌓이는 힙을 가지고 있다.
웹 브라우저는 DOM, AJAX, setTimeout와 이벤트루프, 콜백 큐 (그리고 엔진) 를 가지고 있다.
이처럼 기본적인 함수 외에 브라우저가 WebAPI를 제공할 때, 동시성이 발생하는 것이다.
이벤트 루프 동작과정
JavaScript 런타임에서 동시적으로 발생하는 메소드가 있으면, 이벤트루프는 이 모든 동작들이 잘 어우러지도록 관리하는 역할을 한다.
아래 코드를 보자.
console.log("Hi");
setTimeout(function cb(){
console.log("there");
}, 5000);
console.log("JSConfEU");
더 멋있게 만들고 싶은데 무료 PPT의 한계로...
결과는 아래와 같은 순서로 출력된다.
Hi
JSConfEU
therestack- "hi" log 호출(실행) 후 삭제stack- setTimeout() 호출WebAPIs- setTimeout은 V8엔진에서 제공하지 않음. 브라우저에서 제공하는 API이므로 브라우저(WebAPIs)에서 해당 메소드 실행 (5초 카운트다운)stack- 2번에서 setTimeout() 호출 자체는 완료되었으니 삭제stack- "JSConfEU" log 호출(실행) 후 삭제WebAPIs → Task queue- 5초 후 완료된 cb함수는 Task queue로 넘어감
이벤트루프는 stack이 비워져 있을때 queue의 콜백을 넘겨주는 일을 한다.
event loop- stack이 비워져 있으므로 queue에 남아있는 cb함수를 stack으로 보낸다.stack- cb함수 "there" log 실행 후 삭제
참고로, Promise 후속처리 메소드는 task queue보다 우선순위가 높은 micro task queue에서 쌓인다
이벤트 루프의 역할을 위 과정을 통해 알아보았다.
그러니까 setTimeout을 1초 후 실행하도록 설정하여도, 1초 후에 stack영역이 비워져 있지 않으면 이벤트루프가 막고있기 때문에 queue에 있는 함수는 호출되지 못한다.
(즉, 설정한 1초는 최소 대기시간이 되는 것이다.)
스택에 필요없는 느린코드를 쌓아서 브라우저가 할일을 못하게 하지말아라
마치며
내가 알고있다고 생각하는 것과 글을 작성하는 것은 정말 큰 차이인것 같다.
이벤트루프에 대해 잘 이해하고 있다고 생각을 했고, 바탕으로 글을 써보려니 막히는 부분이 꽤나 많았다.
이 하나의 글을 작성하는데 더 알아보고 테스트해보느라 몇시간이 걸렸는지...
역시 어렵지만 확실한 방법이다😊
글 중 잘못된 내용이 있다면 댓글로 남겨주시면 감사하겠습니다😄
