자바스크립트(JavaScript) 동시성 .이벤트 루프

JS의 동시성과 EventLoop

자바스크립트는 단일 스레드기반 언어이다. 이 말은 한번에 하나씩 작업을 한다는 의미이고 쉽게 표현하지면 명령을 수행하는 일꾼(?)이 하나만 있다는 뜻이다.

하지만 우리가 웹서핑을 하다보면 서버에 요청을 할 때에 렌더링 동작을 멈추지 않는다.
이는 비동기 콜백이 있기 때문이다.
다르게 바라보면 이벤트 루프의 개념이 있다.
JS는 혼자 독립 실행되는 것이 아니라 브라우저를 통해 실행된다. 그리고 브라우저에서 JS를 실행할 때에는 이벤트 루프라는 걸 기반으로 실행한다.

요약해보면 JS는 기본적으로 한번에 하나의 일만 처리하지만, 비동기 콜백으로 동시에 작업하는 것처럼 보인다. 이를 동시성이라 하지만 사실 병렬로 완전 동시에 실행하는 것은 아니다.

자바스크립트 엔진

아마 가장 유명한 JS 엔진은 V8 일 것이다. ( Chorme, Node.js에서 사용하는 Google의)
그리고 그 엔진에는 2가지 주요 구성 요소가 있는데 이는 Call Stack, Heap이다.

용어 정리

• heap : 동적으로 생성된 객체 인스턴스가 할당되는 영역
• call stack : 일거리가 쌓이는 스택
• event queue : 테스크 큐(Task queue)나 콜백 큐(callback queue)라고도 한다. 비동기 처리 함수의 콜백 함수, 비동기식 이벤트 핸들러, 타이머의 콜백 함수를 넣어두는 큐
• event loop : 테스크(일거리)가 들어오길 기다렸다가 테스크가 들어오면 일을 하고, 일이 없으면 잠깐 쉬기를 반복하는 자바스크립트 내의 루프 → call stack 내에서 현재 실행중인 일거리가 있는 지, 이벤트 큐에 일거리가 있는 지 반복해서 확인하고, 콜 스택이 비어 있으면 이벤트 큐의 일거리를 콜스택으로 옮겨가게끔 도와준다.
• Web API : Ajax, DOM event, setTimeout 등 브라우저에 내장된 API

흐름

1. 함수 호출 시 call stack에 함수가 쌓인다.
2. Web API 함수가 호출될 경우에는 call Stack에서 실행하지 않고 Web API로 전달한다.
3. Web API에서 처리된 함수들은 순서대로 Event Queue에 줄을 선다.
4. call stack에 쌓여있던 작업을 다 하고 비어지면 Event Queue에서 call stack으로 이동한다.

참고 자료
스파르타 항해99 강의 자료
https://eine.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%8F%99%EC%8B%9C%EC%84%B1-%EB%AA%A8%EB%8D%B8%EA%B3%BC-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A3%A8%ED%94%84