01. 동기 처리와 비동기 처리
🔹 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다.
🔹 즉, 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식으로 동작한다.
➡️ 처리에 시간이 걸리는 태스크를 실행하는 경우, 블로킹(작업 중단)이 발생한다.
💡 동기 처리 : 현재 실행 중인 태스크가 종료할 때까지 다음에 실행될 태스크가 대기하는 방식
➡️ 장점 : 실행 순서가 보장된다.
➡️ 단점 : 앞선 태스크가 종료할 때까지 이후 태스크들이 블로킹된다.
💡 비동기 처리 : 실행 중인 태스크가 종료되지 않은 상태여도 다음 태스크를 곧바로 실행하는 방식
➡️ 장점 : 블로킹이 발생하지 않는다.
➡️ 단점 : 실행 순서가 보장되지 않는다.
🔹 타이머 함수인 setTimeout, setInterval, HTTP 요청, 이벤트 핸들러는 비동기 처리 방식으로 동작한다.
02. 이벤트 루프와 태스크 큐
💡 자바스크립트는 싱글 스레드로 동작하는데, 태스크가 동시에 처리되는 것처럼 느껴지는 것은..
➡️ 이벤트 루프가 자바스크립트의 동시성을 지원하고 있기 때문이다.
1. 자바스크립트 엔진의 구성
🔹 콜 스택 (call stack)
➡️ 실행 컨텍스트 스택 (함수를 호출하면 함수 실행 컨텍스트가 순차적으로 콜 스택에 푸시되어 순차적으로 실행된다)
➡️ 실행 중인 실행 컨텍스트가 종료되어 콜 스택에서 제거되기 전까지는 다른 어떤 태스크도 실행되지 않는다.
🔹 힙 (heap)
➡️ 객체가 저장되는 메모리 공간으로, 실행 컨텍스트는 힙에 저장된 객체를 참조한다.
➡️ 힙은 구조화되어 있지 않다.
2. 브라우저 환경의 구성
🔹 태스크 큐 (task queue / event queue / callback queue)
➡️ setTimeout이나 setInterval과 같은 비동기 함수의 콜백 함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역이다.
🔹 이벤트 루프 (event loop)
➡️ 콜 스택에 현재 실행 중인 실행 컨텍스트가 있는지, 태스크 큐에 대기 중인 함수가 있는지 반복해서 확인한다.
➡️ 콜 스택이 비어있고, 태스크 큐에 대기 중인 함수가 있다면 -> 이벤트 루프는 순차적(FIFO)으로 태스크 큐에 대기 중인 함수를 콜 스택으로 이동시킨다.
➡️ 태스크 큐에 일시 보관된 함수들은 비동기 처리 방식으로 동작한다.
📖 참고자료
