DOM 및 이벤트 루프 메커니즘

DOM은 HTML 또는 XML 문서를 계층적인 노드 트리로 표현한 프로그래밍 인터페이스이다. 이 트리 구조는 문서의 논리적 구조와 내용을 객체 지향 방식으로 나타내며, 각 구성 요소는 노드(Node)라는 단위로 모델링된다.

DOM 트리의 최상위에는 Document 노드가 위치하며, 이는 전체 문서를 대표한다. 주요 노드 유형으로는 요소 노드(Element Node), 텍스트 노드(Text Node), 속성 노드(Attribute Node) 등이 있다. 예를 들어, <p id="intro">안녕하세요</p>라는 HTML 요소는 하나의 요소 노드(<p>), 하나의 속성 노드(id="intro"), 그리고 하나의 텍스트 노드("안녕하세요")로 구성된다. 이 노드들은 부모-자식 관계 또는 형제 관계로 연결되어 나무 구조를 형성한다.

트리의 구조는 다음과 같은 관계로 설명할 수 있다.

이러한 트리 구조 덕분에 자바스크립트와 같은 스크립트 언어는 DOM API를 통해 특정 노드를 탐색하고, 그 내용을 읽거나 수정하며, 새로운 노드를 추가하거나 삭제할 수 있다. 예를 들어, document.getElementById()나 parentNode.querySelector() 같은 메서드는 이 트리 구조를 탐색하여 원하는 노드에 접근하는 데 사용된다.

DOM은 HTML 또는 XML 문서에 대한 프로그래밍 인터페이스이다. 문서의 구조화된 표현을 제공하며, 자바스크립트와 같은 스크립팅 언어가 문서의 구조, 스타일, 내용을 동적으로 접근하고 변경할 수 있게 한다. DOM의 핵심 역할은 웹 페이지를 논리적 트리 구조로 변환하여, 각 요소를 개별적인 객체로 다루게 하는 것이다. 이를 통해 개발자는 프로그래밍 방식으로 문서의 모든 요소를 생성, 수정, 삭제하거나 스타일을 변경하고 사용자 이벤트에 반응할 수 있다.

DOM의 중요성은 웹 애플리케이션의 상호작용성을 구현하는 근간이 된다는 점에 있다. 정적인 HTML 문서만으로는 사용자의 클릭이나 입력에 실시간으로 반응하는 동적인 웹 페이지를 만들 수 없다. DOM은 정적 문서와 실행 중인 스크립트 코드 사이의 실시간 다리 역할을 수행한다. 예를 들어, 폼 입력값 검증, 콘텐츠의 동적 로드, 애니메이션 적용, 데이터 바인딩 등 모든 클라이언트 측 상호작용은 DOM 조작을 통해 이루어진다.

또한, DOM은 다양한 플랫폼과 언어에 중립적인 표준 인터페이스를 제공한다. W3C 표준으로 정의된 DOM은 특정 프로그래밍 언어나 브라우저에 종속되지 않는다. 이는 자바스크립트를 주로 사용하지만, 이론적으로 다른 언어에서도 동일한 인터페이스로 문서를 조작할 수 있음을 의미한다[1]. 이러한 표준화는 크로스 브라우징 호환성을 보장하는 데 기여하며, 웹 개발의 생태계를 통합한다.

DOM의 역할은 단순한 조작 인터페이스를 넘어서, 웹 페이지 렌더링의 핵심 데이터 구조이기도 하다. 브라우저는 HTML 파싱과 CSS 스타일 계산을 거쳐 최종적으로 렌더 트리(Render Tree)를 생성하는데, 이 과정의 기초가 바로 DOM 트리이다. 따라서 DOM의 효율적인 조작은 불필요한 리플로우와 리페인트를 줄여 웹 페이지의 성능과 사용자 경험을 직접적으로 결정하는 중요한 요소가 된다.

콜 스택은 자바스크립트 엔진의 핵심 구성 요소로, 실행해야 할 함수의 호출을 기록하는 자료 구조이다. 함수가 호출되면 해당 함수의 실행 컨텍스트가 스택의 최상위에 푸시(push)되고, 함수의 실행이 완료되면 스택에서 팝(pop)되어 제거된다. 이 구조는 후입선출(LIFO) 방식으로 동작하여, 현재 실행 중인 코드의 위치와 순서를 추적한다. 단일 스레드 기반의 자바스크립트는 한 번에 하나의 작업만 이 콜 스택에서 처리할 수 있다.

태스크 큐는 이벤트 루프 메커니즘의 또 다른 핵심 요소로, 실행이 예약된 비동기 작업들의 콜백 함수가 대기하는 공간이다. setTimeout, setInterval, DOM 이벤트 핸들러, AJAX 요청의 콜백과 같은 매크로태스크가 여기에 담긴다. 태스크 큐는 선입선출(FIFO) 방식으로 동작하여, 먼저 큐에 들어온 작업이 먼저 처리된다.

이벤트 루프는 콜 스택과 태스크 큐를 지속적으로 관찰하며 동작한다. 그 작동 순서는 다음과 같다.

1. 콜 스택이 완전히 비어 있는지 확인한다.

2. 콜 스택이 비어 있으면, 태스크 큐에서 대기 중인 가장 오래된 작업(콜백 함수)을 꺼낸다.

3. 꺼낸 작업을 콜 스택으로 푸시하여 실행한다.

이 과정은 끊임없이 반복되며, 이를 통해 자바스크립트는 비동기 프로그래밍을 지원하면서도 단일 스레드의 특성을 유지할 수 있다. 콜 스택의 실행이 오래 걸리는 동기 작업으로 막히게 되면, 태스크 큐의 작업들은 실행될 수 없어 블로킹 현상이 발생한다.

이벤트 루프는 콜 스택과 태스크 큐를 관리하며, 태스크 큐는 다시 마이크로태스크 큐와 매크로태스크 큐로 구분된다. 이 두 종류의 큐는 작업의 우선순위와 실행 시점에 있어서 중요한 차이를 보인다.

마이크로태스크는 현재 실행 중인 자바스크립트 작업이 끝난 직후, 즉 콜 스택이 비워지자마자 우선적으로 처리되는 높은 우선순위의 비동기 작업이다. 대표적인 예로 Promise.then(), Promise.catch(), Promise.finally()의 콜백 함수와 queueMicrotask() API, MutationObserver 콜백 등이 있다. 반면, 매크로태스크는 마이크로태스크 큐가 완전히 비워진 후에 실행되는 비교적 낮은 우선순위의 작업이다. setTimeout(), setInterval(), setImmediate()의 콜백, DOM 이벤트 핸들러, requestAnimationFrame, 그리고 I/O 작업 완료 콜백 등이 여기에 속한다.

이벤트 루프의 한 사이클에서 실행 순서는 다음과 같이 정해진다.

1. 콜 스택에 있는 모든 동기 작업을 실행하여 완전히 비운다.

2. 콜 스택이 비면, 마이크로태스크 큐에 대기 중인 모든 작업을 순차적으로 가져와 실행한다. 이 과정은 큐가 완전히 빌 때까지 반복된다.

3. 마이크로태스크 큐가 비워지면, 매크로태스크 큐에서 하나의 작업만을 꺼내 콜 스택으로 가져와 실행한다.

4. 다시 1번으로 돌아가서 사이클을 반복한다.

이 실행 순서는 코드의 동작을 예측하는 데 핵심적이다. 예를 들어, setTimeout 콜백(매크로태스크)과 Promise.then 콜백(마이크로태스크)이 동시에 큐에 들어가 있더라도, 모든 마이크로태스크가 먼저 처리된 후에야 하나의 매크로태스크가 실행된다. 이로 인해 마이크로태스크 내부에서 또 다른 마이크로태스크를 생성하면, 다음 매크로태스크가 실행되기 전에 무한히 지연될 수 있는 상황이 발생하기도 한다.

DOM 조작은 기본적으로 동기적으로 실행되지만, 이벤트 루프 메커니즘을 통해 비동기적으로 업데이트를 스케줄링할 수 있다. setTimeout, Promise, requestAnimationFrame과 같은 Web API는 콜백 함수를 태스크 큐나 마이크로태스크 큐에 등록하여, 현재 실행 중인 모든 동기 코드가 완료된 후 콜 스택이 비었을 때 이벤트 루프에 의해 순차적으로 실행된다. 이를 이용하면 복잡한 DOM 변경 작업을 여러 개의 작은 태스크로 분할하여 메인 스레드의 블로킹을 방지하고, 사용자 인터페이스의 반응성을 유지할 수 있다.

예를 들어, element.style.backgroundColor = 'red'와 같은 스타일 변경은 즉시 자바스크립트 객체의 속성을 바꾸지만, 실제 화면에 픽셀이 그려지는 것은 별도의 렌더링 단계에서 비동기적으로 발생한다. setTimeout(callback, 0)이나 Promise.resolve().then(callback)을 사용하면, 현재 실행 컨텍스트가 끝난 직후에 DOM 업데이트를 위한 콜백을 실행하도록 예약할 수 있다. 이는 특히 대량의 DOM 요소를 순차적으로 추가하거나 제거할 때 유용하다.

이러한 비동기 스케줄링은 리플로우와 리페인트를 효율적으로 배치(batch) 처리하는 데도 도움이 된다. 연속된 여러 DOM 읽기/쓰기 작업을 동기적으로 수행하면 매 작업마다 불필요한 레이아웃 재계산이 발생할 수 있지만, 적절한 비동기 패턴을 사용하면 변경 사항을 모아 한 번에 처리하도록 유도하여 성능을 개선할 수 있다[3].

리플로우는 렌더 트리의 노드(Node)에 대한 레이아웃(위치와 크기)을 다시 계산하는 과정이다. 요소의 기하학적 속성(너비, 높이, 위치, 여백 등)이 변경되면, 해당 요소뿐만 아니라 자식 요소와 부모 요소, 때로는 전체 렌더 트리에 영향을 미칠 수 있다. 이는 브라우저가 웹 페이지의 레이아웃을 다시 수행해야 함을 의미하며, 상대적으로 비용이 큰 작업이다.

리페인트는 요소의 시각적 스타일(색상, 배경, 투명도, 가시성 등)이 변경되었지만 레이아웃에는 영향을 주지 않을 때 발생한다. 리플로우가 발생하면 항상 리페인트가 뒤따르지만, 리페인트는 리플로우 없이 독립적으로 발생할 수 있다. 리페인트는 변경된 픽셀을 화면에 다시 그리는 과정으로, 리플로우보다는 일반적으로 비용이 적게 든다.

다음은 리플로우를 유발하는 대표적인 작업과 리페인트만 유발하는 작업의 예시이다.

성능 최적화를 위해 개발자는 불필요한 리플로우를 최소화해야 한다. 일반적인 기법으로는 스타일 변경을 한꺼번에 처리하기, DOM 접근을 최소화하기, 애니메이션에 transform과 opacity 속성을 사용하기 등이 있다. 이러한 속성은 하드웨어 가속을 활용하여 리플로우 없이 리페인트만 발생시키거나, 컴포지터 스레드에서 처리되도록 하여 메인 스레드의 부하를 줄인다.

이벤트 디바운싱과 스로틀링은 자바스크립트에서 빈번하게 발생하는 이벤트(예: 스크롤, 리사이즈, 키업)의 처리 횟수를 제한하여 애플리케이션 성능을 최적화하는 기법이다. 두 기법 모두 불필요한 함수 실행을 줄이지만, 그 동작 방식과 적용 시나리오에는 차이가 있다.

이벤트 디바운싱은 연속적인 이벤트 발생 시, 마지막 이벤트가 발생한 후 미리 정해진 지연 시간이 경과할 때까지 기다린 다음에 핸들러 함수를 한 번만 실행하도록 한다. 예를 들어, 검색창에 사용자가 타이핑할 때마다 API 요청을 보내는 대신, 사용자의 타이핑이 완전히 멈춘 후에 한 번만 요청을 보내는 방식이다. 이는 setTimeout과 clearTimeout을 활용하여 구현된다. 반면, 스로틀링은 이벤트가 아무리 빈번하게 발생하더라도, 정해진 시간 간격(예: 100ms)마다 핸들러 함수가 최대 한 번만 실행되도록 보장한다. 스크롤 이벤트나 창 크기 변경(resize) 이벤트 처리에 주로 사용되어, 일정한 주기로만 DOM 업데이트나 무거운 계산을 수행하게 한다.

적용 상황에 따른 선택 기준은 다음과 같다.

성능 최적화 측면에서, 두 기법 모두 과도한 리플로우와 리페인트를 방지하고, 불필요한 네트워크 요청이나 복잡한 연산을 줄여 이벤트 루프의 부하를 경감시킨다. 최신 프론트엔드 라이브러리나 유틸리티(예: Lodash)는 이 두 기법을 구현한 함수를 제공하며, React와 같은 가상 DOM 라이브러리 내부에서도 유사한 원리가 적용된다. 적절한 지연 시간을 설정하는 것은 사용자 경험과 성능 사이의 균형을 맞추는 중요한 요소이다.

가상 DOM은 실제 DOM의 가벼운 복사본 또는 표현으로, 메모리 상에 존재하는 자바스크립트 객체 트리 구조이다. 주로 React와 같은 현대적 자바스크립트 라이브러리나 프레임워크에서 UI 업데이트 성능을 최적화하기 위해 채택된 개념이다. 실제 DOM을 직접 조작하는 작업은 상대적으로 비용이 크기 때문에, 변경 사항을 먼저 가상 DOM에 적용한 후, 실제 DOM과의 차이점을 계산하여 최소한의 변경만 실제 DOM에 반영하는 방식으로 동작한다.

이 과정은 일반적으로 '재조정' 또는 '비교 알고리즘'이라고 불린다. 상태가 변경되면 새로운 가상 DOM 트리가 생성되고, 이전 가상 DOM 트리와 비교하여 차이가 발생한 노드들을 식별한다. 이 차이점만을 실제 DOM에 패치하는 방식으로, 불필요한 리플로우와 리페인트를 줄여준다. 이는 특히 복잡한 SPA에서 빈번한 UI 업데이트 시 성능 저하를 완화하는 데 효과적이다.

가상 DOM의 활용은 이벤트 루프와도 연관되어 있다. 가상 DOM의 비교 및 업데이트 로직은 자바스크립트 코드로 구현되어 있으므로, 콜 스택에서 실행된다. 그러나 실제 DOM에 대한 최종 패치는 일반적으로 동기적으로 즉시 발생하지 않고, 이벤트 루프의 다음 사이클이나 특정 시점에 배치 처리될 수 있다. 이는 렌더링 엔진의 작업과 자바스크립트 실행을 효율적으로 스케줄링하여, 사용자 경험을 부드럽게 유지하는 데 기여한다.

그러나 가상 DOM은 만능 해결책이 아니며, 비교 알고리즘 자체에도 일정한 계산 비용이 든다. 매우 간단한 정적 페이지에서는 오히려 오버헤드가 될 수 있다. 또한, 가상 DOM은 내부적으로 상태 변화를 감지하고 리렌더링을 트리거하는 메커니즘을 필요로 하며, 이를 위해 프레임워크별로 고유한 반응성 시스템을 구축한다.

이벤트 버블링은 DOM 요소에서 발생한 이벤트가 해당 요소부터 시작하여 최상위 조상 요소까지 거슬러 올라가며 전파되는 방식을 말한다. 예를 들어, <button> 요소를 클릭하면, 그 이벤트는 먼저 버튼에서 발생한 후, 그 부모 요소(예: <div>)로, 그리고 <body>, <html>까지 순차적으로 전달된다. 이는 거품(bubble)이 물속에서 아래에서 위로 올라오는 것에 비유되어 명명되었다. 대부분의 이벤트는 기본적으로 이 버블링 단계를 거친다.

반대로, 이벤트 캡처링은 이벤트가 최상위 조상 요소에서 시작하여 실제 이벤트가 발생한 타겟 요소까지 하향식으로 전파되는 단계이다. 캡처링 단계는 이벤트가 타겟에 도달하기 전에 발생한다. 이 단계에서 이벤트 리스너를 동작시키려면, addEventListener 메서드의 세 번째 매개변수를 true로 설정해야 한다[6].

이벤트의 전체 전파 과정은 세 단계로 구성된다.

1. 캡처링 단계: 이벤트가 window 객체부터 타겟 요소의 부모까지 내려온다.

2. 타겟 단계: 이벤트가 실제 발생한 요소에 도달한다.

3. 버블링 단계: 이벤트가 타겟 요소부터 시작하여 window 객체까지 다시 올라간다.

개발자는 event.stopPropagation() 메서드를 사용하여 이벤트의 추가 전파를 명시적으로 중단할 수 있다. 이 메서드는 캡처링 또는 버블링 단계에서 호출된 위치 이후의 이벤트 전파를 막는다. 또한 event.stopImmediatePropagation()은 동일한 요소에 등록된 다른 이벤트 핸들러의 실행까지 방지한다. 이러한 전파 메커니즘을 이해하는 것은 복잡한 UI에서 이벤트를 정확히 제어하고, 이벤트 위임과 같은 효율적인 패턴을 구현하는 데 필수적이다.

이벤트 위임은 DOM 요소에 이벤트 핸들러를 개별적으로 할당하는 대신, 공통 조상 요소에 단 하나의 핸들러를 할당하여 그 하위 요소에서 발생하는 이벤트를 관리하는 디자인 패턴이다. 이 패턴은 이벤트 버블링의 특성을 활용한다. 하위 요소에서 이벤트가 발생하면, 해당 이벤트는 이벤트 버블링 단계를 거쳐 상위 요소로 전파되기 때문이다. 상위 요소에 등록된 핸들러는 event.target 속성을 통해 실제로 이벤트가 발생한 원본 요소를 식별하고, 그에 맞는 로직을 실행한다.

이 패턴의 주요 장점은 메모리 사용량 감소와 동적 요소 처리의 용이성이다. 수많은 유사한 요소 각각에 핸들러를 부착하면 메모리 낭비가 발생하고 성능에 부정적 영향을 미칠 수 있다. 반면 이벤트 위임을 사용하면 단일 핸들러만으로 모든 하위 요소의 이벤트를 처리할 수 있다. 또한, 자바스크립트로 동적으로 추가되는 새로운 요소에 대해서도 별도의 이벤트 바인딩 과정 없이 자동으로 기존의 상위 핸들러가 이벤트를 처리할 수 있다.

구현 시에는 일반적으로 switch 문이나 조건문을 사용하여 event.target의 속성(예: id, class, tagName, data-* 속성)을 검사한다. 아래는 간단한 예시 표이다.

이벤트 위임은 주로 목록(<ul>, <ol>), 테이블(<table>), 또는 버튼 그룹과 같이 여러 개의 동일한 형제 요소가 존재하는 컨테이너에 적용된다. 그러나 너무 문서의 최상위 요소(예: document)에 이벤트를 위임하면, 불필요한 이벤트 필터링 로직이 늘어나고 의도하지 않은 요소의 이벤트까지 처리하게 될 수 있으므로, 가능한 한 이벤트가 발생할 영역에 가까운 공통 조상 요소를 선택하는 것이 바람직하다.