42장 비동기 프로그래밍 ⭐⭐⭐⭐⭐⭐⭐⭐
Last updated
Was this helpful?
Last updated
Was this helpful?
자바스크립트 엔진은 하나의 실행 컨텍스트 스택을 갖는 싱글 스레드 방식으로 동작한다. 싱글 스레드 방식은 한 번에 하나의 태스크만 실행 가능하기에 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹이 발생한다.
이처럼 현재 실행중인 태스크가 종료될 때까지 다음 태스크가 대기하는 방식을 동기 처리라고 한다. 동기 처리 방식은 태스크를 순서대로 하나씩 처리하므로 실행 순서가 보장된다는 장점이 있지만, 앞선 태스크가 종료할 때까지 이후 태스크들이 블로킹된다는 단점이 있다.
반면, 현재 실행 중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식을 비동기 처리라고 한다. 비동기 처리 방식은 블로킹이 발생하지 않는 장점이 있지만 태스크의 실행 순서가 보장되지 않는다는 단점이 있다. setTimeout, setInterval, HTTP 요청, 이벤트 핸들러는 비동기 처리 방식으로 동작한다. 비동기 처리 방식은 이벤트 루프와 태스크 큐와 깊은 관계가 있다.
자바스크립트의 특징 중 하나는 싱글 스레드로 동작한다는 것이다. 하지만 브라우저가 동작하는 것을 살펴보면 많은 태스크가 동시에 처리되는 것처럼 느껴진다. 이를 가능케 하는 것이 이벤트 루프다. 이벤트 루프는 브라우저에 내장된 기능 중 하나로 자바스크립트 엔진의 콜 스택이 비어있고 태스크 큐에 대기중인 함수가 있다면 순차적으로 태스크 큐의 함수를 콜 스택으로 이동시키는 역할을 한다.
자바스크립트 코드는 다음과 같은 순서로 작업된다.
전역 코드가 평가되어 전역 실행 컨텍스트가 생성되고 greet, respond 이 콜 스택에 푸시된다.
전역 코드가 실행되어 respond의 setTimeout이 호출된다. 이때 setTimeout 함수의 실행 컨텍스트가 생성되고 콜 스택에 푸시되어 현재 실행중인 실행 컨텍스트가 된다.
setTimeout 함수가 실행되면 콜백 함수를 호출 스케줄링하고, 종료되어 콜 스택에서 팝된다. 이때 호출 스케줄링이 완료되면 브라우저는 콜백 함수를 태스크 큐에 푸시한다.
브라우저(4-1)와 자바스크립트 엔진(4-2)이 각각의 임무를 수행한다.
4-1. 브라우저는 타이머를 설정하고 만료를 기다린다. 만료되면 콜백 함수가 태스크 큐에 푸시되고 대기한다. 지연 시간 후 콜 스택이 비어있으면 콜 스택에 추가되고 실행된다. 4-2. 순차적으로 respond 함수의 실행이 종료되고 greet 함수가 실행되고 종료된다.
전역 코드 실행이 종료되고 전역 실행 컨텍스트가 콜 스택에서 팝된다. 콜 스택에 아무런 실행 컨텍스트도 존재하지 않게 된다.
이벤트 루프에 의해 콜 스택의 비어있음이 감지되고 태스크 큐에서 대기중인 콜백 함수가 이벤트 루프에 의해 콜 스택에 푸시된다. 이후 콜백 함수가 실행되고 종료된다.
이처럼 자바스크립트는 싱글 스레드 이지만 브라우저의 도움을 받아 비동기 작업이 가능하다. 즉, 자바스크립트 엔진은 싱글 스레드로 동작하지만 브라우저는 멀티 스레드로 동작한다.
+) 책과 위 사진의 링크 보면서 흐름 암기하기