데브허브 | DEVHUB | [10분 테코톡] 메리의 자바스크립트 비동기의 작동 원리[10분 테코톡] 메리의 자바스크립트 비동기의 작동 원리
- 자바스크립트는 싱글 스레드 언어임에도 불구하고, 복잡한 웹사이트에서 여러 작업을 동시에 처리하는 것처럼 보이는 것은 런타임 환경의 도움 덕분입니다. 🤔
- 동기 작업은 이전 작업이 완료될 때까지 대기하지만, 비동기 작업은 대기하지 않고 다음 작업을 진행합니다. ⏳
- 자바스크립트 비동기 처리의 핵심 구성 요소는 자바스크립트 엔진, Web API, 이벤트 루프, 그리고 태스크 큐(콜백 큐)입니다. 🧩
- 콜 스택은 함수 호출 정보를 관리하는 스택으로, 자바스크립트 엔진 내부에 존재하며 단일 스택이므로 한 번에 하나의 작업만 처리합니다. 📞
- Web API는 브라우저가 제공하는 멀티 스레드 환경의 별도 API로, DOM, AJAX, Fetch, Timer 등이 있으며 메인 스레드 블로킹을 방지합니다. 🕸️
- 태스크 큐는 Web API 작업 완료 후 콜백 함수를 저장하는 곳으로, 우선순위에 따라 마이크로태스크 큐와 매크로태스크 큐로 나뉩니다. 📥
- 마이크로태스크 큐는 Promise 콜백처럼 우선순위가 높은 작업을, 매크로태스크 큐는 setTimeout 콜백처럼 일반적인 작업을 저장합니다. ✨
- 이벤트 루프는 콜 스택과 태스크 큐를 지속적으로 모니터링하며, 콜 스택이 비면 태스크 큐의 콜백을 콜 스택으로 옮겨 실행시키는 감시자 역할을 합니다. 🔄
- 비동기 작업 처리 순서는 동기 코드 실행 후, 마이크로태스크 큐의 모든 작업을 먼저 처리하고, 그 다음 매크로태스크 큐의 작업을 하나씩 처리합니다. 🚀
- 매크로태스크 하나 실행 후에는 다시 마이크로태스크 큐를 확인하는 방식으로 동작하여 우선순위를 유지합니다. 🔁