less than 1 minute read

자바스크립트는 싱글 쓰레드 기반이지만, 논 블로킹 방식의 비동기적인 동시성 언어이다. 이 말의 의미를 이해해보자.

스크린샷 2023-07-13 오후 10.25.10.png

전체적인 그림

콜 스택

모든 함수는 콜 스택에 쌓인다. 하나의 쓰레드는 하나의 작업만 가능하다.

블로킹

느리게 동작하는 코드. 운영체제로 치면 I/O 작업. 네트워크 요청 혹은 이미지 프로세싱 등이 있다. 블로킹이 발생하게 되면 웹 브라우저는 렌더링을 하지 못하고 다른 코드들 또한 실행하지 못한다. 이를 해결하기 위해 비동기 콜백이 필요하다.

비동기 콜백

JS가 싱글 스레드 기반임에도 동시성 언어라고 불리는 이유는 웹 브라우저가 제공하는 Web API를 통해 동시에 작업을 할 수 있기 때문이다.

스크린샷 2023-07-13 오후 10.34.03.png

메인 스레드가 콜스택의 작업을 처리하는 동안 Web API가 블로킹 작업들을 수행한다. Web API는 블로킹 작업이 끝나면 콜백을 콜백 큐에 넣는다.

이벤트 루프

스크린샷 2023-07-13 오후 10.34.10.png

이벤트 루프는 콜 스택과 콜백 큐를 감시한다. 콜 스택이 비었다면 콜백 큐에서 콜백을 꺼내 콜 스택에 넣어주는 역할을 수행한다.

참고 내용 및 사진 출처

[JS] 도대체 이벤트 루프가 뭔가요? - 배하람의 블로그

Leave a comment