JavaScript를 공부하다 보면 Call Stack, Web API, Event Loop라는 용어를 자주 접하게 됩니다.
처음에는 각각 독립적인 개념처럼 보이지만 실제로는 서로 긴밀하게 연결되어 있습니다.
특히 JavaScript의 비동기 처리 방식을 제대로 이해하기 위해서는
Call Stack과 Web API의 관계를 반드시 알아야 합니다.
JavaScript는 기본적으로 단일 스레드 언어입니다.
한 번에 하나의 작업만 수행할 수 있으며 현재 실행 중인 코드가 끝나야 다음 작업을 처리할 수 있습니다.
그럼에도 불구하고 웹 애플리케이션은 서버 통신,
타이머 실행,
파일 업로드,
사용자 이벤트 처리 등을 동시에 수행하는 것처럼 동작합니다.
이러한 기능이 가능한 이유는 JavaScript 엔진 외부에 존재하는 Web API 덕분입니다.
Call Stack과 Web API가 어떻게 협력하는지 이해하면
비동기 코드의 실행 순서를 더욱 명확하게 예측할 수 있습니다.
Call Stack이란 무엇인가
Call Stack은 JavaScript 엔진 내부에 존재하는 자료구조입니다.
현재 실행 중인 함수와 작업들을 저장하는 공간이라고 생각하면 이해하기 쉽습니다.
함수가 호출되면 Call Stack의 가장 위에 추가되고,
실행이 완료되면 제거됩니다.
예를 들어 함수 A가 함수 B를 호출하고,
함수 B가 함수 C를 호출한다면
Stack에는 순서대로 A, B, C가 저장됩니다.
가장 마지막에 들어온 함수가 가장 먼저 실행을 마치게 되므로
Call Stack은 후입선출 구조를 사용합니다.
JavaScript 엔진은 항상 Call Stack의 최상단 작업을 실행합니다.
따라서 Stack이 가득 차 있거나 긴 연산이 수행 중이라면
다른 작업은 기다려야 합니다.
이것이 JavaScript가 단일 스레드 언어라고 불리는 이유입니다.
Web API는 JavaScript 엔진이 아니다
많은 초보 개발자들이 오해하는 부분 중 하나는
Web API가 JavaScript의 일부라고 생각하는 것입니다.
실제로 Web API는 JavaScript 엔진 내부 기능이 아닙니다.
브라우저가 제공하는 별도의 기능 집합입니다.
대표적인 Web API에는 다음과 같은 기능들이 포함됩니다.
setTimeout
setInterval
Fetch API
DOM 이벤트 처리
Geolocation API
Local Storage
WebSocket
JavaScript는 이러한 기능을 호출할 수 있지만
실제 작업 수행은 브라우저가 담당합니다.
즉 Web API는 JavaScript 엔진 외부에서 동작하는 보조 시스템이라고 볼 수 있습니다.
비동기 작업은 어떻게 처리될까
비동기 작업이 시작되면 먼저 해당 함수가 Call Stack에 들어갑니다.
예를 들어 setTimeout을 호출한다고 가정해 보겠습니다.
JavaScript 엔진은 setTimeout 함수를 실행하기 위해 Call Stack에 올립니다.
타이머 등록이 완료되면
실제 시간 측정 작업은 Web API 영역으로 전달됩니다.
이 시점에서 Call Stack은 즉시 비워집니다.
JavaScript 엔진은 더 이상 해당 작업을 기다리지 않고
다음 코드를 계속 실행합니다.
설정된 시간이 지나면
Web API는 실행해야 할 콜백 함수를 Queue로 이동시킵니다.
이후 Event Loop가 Call Stack 상태를 확인하고
비어 있는 경우 Queue의 작업을 Stack으로 옮겨 실행합니다.
이러한 과정을 통해 비동기 처리가 이루어집니다.
Call Stack만 존재한다면 발생하는 문제
만약 Web API가 존재하지 않는다고 가정해 보겠습니다.
서버 요청이 발생하면 응답이 올 때까지 Call Stack이 점유될 것입니다.
이미지 다운로드 또한 마찬가지입니다.
그 결과 사용자는 버튼을 클릭할 수도 없고
스크롤을 움직일 수도 없으며
화면 전체가 멈춘 것처럼 보이게 됩니다.
현대 웹 서비스는 수많은 네트워크 요청과 사용자 입력을 동시에 처리해야 하기 때문에
이러한 구조로는 정상적인 서비스 운영이 불가능합니다.
Web API는 오래 걸리는 작업을 별도로 처리함으로써
JavaScript 엔진이 계속 다른 코드를 실행할 수 있도록 만들어 줍니다.
결국 Web API는 브라우저 성능과 사용자 경험을 유지하기 위한 필수 구성 요소입니다.
Fetch API와 Call Stack의 관계
현대 웹 개발에서 가장 많이 사용하는 비동기 기능 중 하나가 Fetch API입니다.
Fetch를 실행하면 네트워크 요청이 발생합니다.
하지만 JavaScript 엔진은 응답이 도착할 때까지 기다리지 않습니다.
요청은 브라우저의 네트워크 시스템으로 전달되고
Call Stack은 즉시 다음 코드를 실행합니다.
서버 응답이 도착하면
Promise 기반 콜백이 Microtask Queue에 등록됩니다.
이후 Event Loop가 해당 작업을 실행하게 됩니다.
이러한 구조 덕분에 수많은 API 요청이 존재하는 환경에서도
브라우저가 멈추지 않고 부드럽게 동작할 수 있습니다.
React나 Vue 같은 프레임워크 역시 이러한 비동기 처리 구조를 적극 활용합니다.
Call Stack Overflow가 발생하는 이유
Call Stack은 무한한 공간이 아닙니다.
브라우저마다 일정한 크기 제한이 존재합니다.
재귀 함수가 종료 조건 없이 계속 호출되면
Stack에 함수가 계속 쌓이게 됩니다.
결국 허용된 공간을 초과하면
Stack Overflow 오류가 발생합니다.
대표적으로 Maximum Call Stack Size Exceeded 오류가 이에 해당합니다.
이 오류는 JavaScript 엔진이 더 이상 함수를 저장할 공간이 없다는 의미입니다.
Call Stack 구조를 이해하면 이러한 문제를 예방할 수 있으며
복잡한 재귀 알고리즘을 설계할 때도 도움이 됩니다.
실무에서 알아야 하는 핵심 포인트
실제 개발 현장에서는 Call Stack과 Web API의 관계를 이해하는 것이 매우 중요합니다.
성능 문제를 분석하거나
비동기 로직의 실행 순서를 디버깅할 때
이 구조를 정확히 알고 있어야 합니다.
Promise가 왜 먼저 실행되는지,
setTimeout이 예상보다 늦게 실행되는 이유가 무엇인지,
API 요청 이후 어떤 순서로 코드가 동작하는지를 설명할 수 있어야 합니다.
특히 React의 상태 업데이트나 비동기 렌더링을 이해하는 과정에서도
Call Stack과 Web API 개념은 중요한 기반 지식이 됩니다.
JavaScript를 깊이 있게 학습하고 싶다면
문법보다 먼저 실행 구조를 이해하는 것이 큰 도움이 됩니다.
Summary
Call Stack
• JavaScript 엔진 내부에서 함수 실행을 관리하는 공간.
• 후입선출 구조로 동작함.
• 현재 실행 중인 작업을 저장함.
• Stack이 비어야 새로운 작업을 처리할 수 있음.
Web API
• 브라우저가 제공하는 외부 기능 집합.
• 타이머, 네트워크 요청, 이벤트 처리를 담당함.
• 오래 걸리는 작업을 JavaScript 엔진 대신 수행함.
• 비동기 처리를 가능하게 만드는 핵심 요소임.