웹 브라우저(크롬, 사파리 등)는 자바스크립트 코드를 해석하고 실행해주는 중요한 환경이다. 이를 이해하기 위해서는 브라우저 내부의 구조와 자바스크립트의 동작 방식을 알아야 한다.



웹 브라우저 내부 구조


1. 스택(Stack)

  • 코드 실행이 이루어지는 공간.

  • 자바스크립트는 싱글 스레드(single-thread) 기반 언어로, 한 번에 하나의 작업만 처리할 수 있다.(stack이 하나기 때문). 이는 코드가 스택에서 순차적으로 하나씩 실행된다는 의미이다.

  • 자바스크립트는 싱글 스레드이기 때문에, 스택이 바쁘면 새로운 작업을 바로 처리할 수 없다. 반복문을 1억 번 실행하는 무거운 작업(10초 정도 걸리는 작업)이 스택에서 실행 중이면, 그동안 다른 간단한 작업(예: 모달창 하나 띄우는 간단한 버튼 클릭 이벤트 처리)도 지연될 수 있다. -> stack을 바쁘게 하지 말자.


2. 대기실(Waiting Room)

  • 시간이 걸리는 작업들은 스택에서 바로 처리되지 않고 대기실로 보내진다.

  • setTimeout, 서버에 데이터를 요청하는 AJAX 요청, 그리고 이벤트리스너 (예: 버튼 클릭 대기) 같은 작업. 이들은 바로 스택에서 실행되지 않으며, 일정 조건(예: 시간이 지나거나 데이터가 도착)이 충족될 때까지 대기한다.


\*ajax: 자바스크립트를 사용하여 서버와 비동기적으로 데이터를 주고받는 기술


3. 큐(Queue)

  • 대기 중이던 작업이 완료되면 큐로 이동한다.

  • 스택이 비어있을 때만 큐에서 작업이 스택으로 올라가 실행된다는 특징으로, 만약 스택이 계속해서 바쁘다면, 큐에 있는 작업은 실행되지 못하고 계속 대기하게 된다.



자바스크립트의 동기적 처리와 비동기적 처리


동기적 처리(Synchronous Processing)

  • 자바스크립트는 기본적으로 stack이 하나이기 때문에 동기적으로 코드를 처리한다. 모든 작업이 스택에서 순차적으로 한줄씩 실행되기 때문에, 하나의 작업이 끝나지 않으면 그 다음 작업은 실행될 수 없다.


비동기적 처리(Asynchronous Processing)

  • 비동기 처리는 대기 시간이 필요한 작업을 처리하기 위해 사용된다. setTimeout, AJAX, 이벤트리스너 와 같은 함수들이 비동기적으로 동작하여 스택을 차지하지 않고 별도의 대기실에서 대기하다가, 조건이 충족되면 큐로 이동해 실행된다. 비동기를 활용하면 장시간 대기하는 작업을 스택에서 처리하지 않으므로, 다른 작업을 중단시키지 않고 동시에 여러 작업을 처리하는 것처럼 보이게 한다.