자바스크립트, 브라우저의 런타임 환경 한 번에 이해하기 (콜스택, 큐, 이벤트 루프, WebAPI 등)

요즘 다시 웹 기초 스터디를 하고 있는데 ,

3년동안 개발일하면서 머리에 둥둥 떠다니던 지식들을 라벨링하고 연결짓고 정리하는 기분이라 너무 좋다

은근 놓치고 있던 부분도 있고 다시 조금씩 정리에서 블로그 포스팅해 볼 예정 💪

 

개발자 90%가 모르는 자바스크립트 동작원리 (Stack, Queue, event loop)

시작에 앞서 애플코딩님의 요런 유튭 간단히 지하철에서 보기 편하다 추천

주니어 개발자가 자바스크립트 동작 원리 기초적인 개념 재밌게 잡을 때 보기 좋을 듯

 

1.  자바스크립트의 런타임 환경

자바스크립트 런타임에도 다양한 종류와 버전이 있으며, 각각의 런타임은 자바스크립트 코드를 실행하는 환경과 규칙을 정의한다.

자바스크립트 엔진(V8 등)은 싱글스레드로 동작하고, 런타임환경(브라우저 등)이 멀티스레드를 제공

• 브라우저 => 우리는 이제 요걸 파헤쳐 본다!
  • 웹 브라우저에서 실행되는 자바스크립트 코드를 처리하는 환경
  • 브라우저 런타임은 DOM(Document Object Model) 조작, 이벤트 처리, AJAX 요청 등과 같은 웹 브라우저 관련 기능을 제공한다.
• Node.js
  • 서버 측 자바스크립트 실행을 가능하게 하는 환경
  • 브라우저 외부에서 자바스크립트를 실행.
  • 파일 시스템 액세스, 네트워크 통신, 데이터베이스 액세스와 같은 서버 측 작업을 처리 
• React Native
  • 모바일 앱 개발을 위한 환경
  • 자바스크립트와 React 라이브러리를 사용하여 iOS와 Android 앱을 개발
• Electron
  • 데스크톱 애플리케이션 개발을 위한 환경.
  • 웹 기술을 사용하여 크로스 플랫폼 데스크톱 앱을 개발

 

2. 브라우저 런타임 환경

런타임(Runtime)이란, 프로그래밍 언어가 구동되는 환경.

브라우저 런타임 환경은 JavaScript 엔진, Web API, Task Queue, Event Loop 등의 구성 요소를 가짐

• 콜 스택(Call Stack)
  • 자바스크립트 코드 실행 흐름을 관리하는 스택 자료구조.
  • 함수 호출 시 해당 함수의 실행 컨텍스트(Execution Context)가 콜 스택에 푸시, 실행이 끝나면 팝
  • 현재 실행 중인 함수가 항상 콜 스택의 최상단에 위치.
• 메모리 힙(Memory Heap)
  • 객체 및 변수와 같은 동적 데이터를 저장하는 비구조화된 메모리 영역.
  • 모든 참조형 데이터(객체, 배열 등)가 힙에 저장되며, 엔진의 가비지 컬렉션을 통해 관리.
• Web APIs
  • 브라우저가 제공하는 비동기 작업을 처리하기 위한 API.
  • JavaScript 엔진이 비동기적 Web API를 만나면 실행 위임 후 다음 코드를 실행.
  • DOM, BOM, 타이머(setTimeout), HTTP 요청(fetch), 이벤트 리스너 등
    • BOM: Brower Object Model / window, history 등의 객체를 포함한다.
  • Web APIs는 자바스크립트 엔진 외부에서 실행되며, 완료된 작업의 결과는 콜백 큐로 전달.
• 콜백 큐 ( = 매크로태스크 큐 = 이벤트 큐)
  • 비동기 작업의 콜백 함수가 대기하는 큐 자료구조. (='브라우저가 처리 완료한' task의 대기열)
  • Web API 작업이 완료되면 콜백 함수가 콜백 큐로 전달
  • 이벤트 루프가 콜백 큐에서 작업 콜스택으로 이동
  • 예) DOM 이벤트 콜백, 타이머(setTimeout, setInterval), 스크립트 로딩 등
• 마이크로태스크 큐
  • Promise와 같은 비동기 작업의 콜백 관리.
  • 콜백 큐보다 높은 우선순위.
  • 예) Promise.then(), MutationObserver.
• 이벤트 루프(Event Loop)
  • 자바스크립트의 비동기 동작을 관리하는 핵심 메커니즘.
  • 콜 스택이 비어 있을 때 콜백 큐 또는 마이크로태스크 큐에서 작업을 가져와 실행.
  • 끊임없이 실행되며, 동기 및 비동기 작업을 조율.

 

3. 런타임 환경의 실행 과정

1. 코드 로드 및 초기화
   • 자바스크립트 코드가 로드되고, 전역 컨텍스트가 콜 스택에 추가.
   • 변수와 함수 선언이 처리되고 초기화됨.
2. 코드 실행
   • 함수 호출 시 콜 스택에 실행 컨텍스트 추가.
   • 비동기 작업은 Web API로 전달.
3. 비동기 작업 처리:
   • Web API 작업 완료 → 콜백 큐/마이크로태스크 큐로 전달.
4. 이벤트 루프 동작
   • 콜 스택이 비면 마이크로태스크 큐 → 콜백 큐 순서로 작업을 실행.

 

4. 실행 과정 예시

console.log("Start"); setTimeout(() => {   console.log("Timeout"); }, 0); Promise.resolve().then(() => {   console.log("Promise"); }); console.log("End");

1. console.log("Start") → 콜 스택에서 실행 → 출력: Start.
2. setTimeout → Web API로 전달 → 타이머 설정 완료.
3. Promise.resolve().then() → 마이크로태스크 큐에 콜백 추가.
4. console.log("End") → 콜 스택에서 실행 → 출력: End.
5. 이벤트 루프:
   1. 마이크로태스크 큐 실행 → 출력: Promise.
   2. 콜백 큐 실행 → 출력: Timeout.

위 코드 실행 시 Start End Promise Timeout 순으로 출력된다.

아래는 위 코드를 너무 잘 설명해주는 동작 gif 모음

1. console.log('Start!') 실행 (Call stack에서 실행)	2. setTimeout 콜스택에 쌓였다가 webAPI에 위임.
3. setTimeout 시간 지난 후 매크로태스크큐로 이동, Promise는 마이크로 태스크 큐로 이동	4. console.log('End') 실행
5. 이벤트 루프 동작. 우선순위 높은 마이크로태스크큐 -> 콜스택 이동	6. 콜스택 비면 이벤트 루프 돌아 매크로 태스크 큐에서 콜스택 이동

 

이 그림을 보면서

전역상태일 때 태스크 큐에 이미 작업들이 쌓여있고,

console.log('End!')가 콜스택에 쌓이기 전에 이벤트 루프가 돌면 큐에 있던 작업이 먼저 나오는 거잖아?

이 순서가 어떻게 보장될까 라는 의문이 자연스럽게 들었다.

알고 보니 '콜스택이 비었을 때 이벤트 루프가 돈다'에는 추가적으로 규칙이 더 있었던 것!! ⭐️ (이걸로 GPT와 싸움)

1. 브라우저는 콜스택 최하단에 전역 컨텍스트가 존재하고, 이는 종료되지 않음. 따라서 브라우저에서 이벤트 루프는 ‘전역 컨텍스트’를 제외한 콜스택이 비어있을 때 동작
2. "전역 코드가 완전히 실행된 후" 이벤트 루프가 실행. 전역 코드 실행 중에는 콜 스택이 비어 있어도 이벤트 루프가 개입하지 않는다.

 

 

내용 중 틀린 부분이 있다면 편히 댓글로 알려주세요 💖

 

 

출처

https://www.choegyumin.com/browser-runtime/

브라우저의 런타임

 

https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke?ref=choegyumin.com

⭐️🎀 JavaScript Visualized: Promises & Async/Await

 

https://dev.to/rahmanmajeed/javascript-the-runtime-environment-35a2

JavaScript: The Runtime Environment🏃🏻🏃🏻🏃🏻

 

https://kwangsunny.tistory.com/39?ref=choegyumin.com

자바스크립트 - 매크로태스크(Macrotask) 와 마이크로태스크(Microtask) 그리고 작업 스케줄링

 

https://www.jeong-min.com/49-js-runtime/

개발자 단민 | 자바스크립트 엔진: "어, 아직 싱글이야" | JS 런타임에 대해 알아보자