이번 글은 'Secrets of the JavaScript Ninja'의 'Chapter 2. Building the page at runtime'을 바탕으로 작성하였습니다.
핵심 Keywords
- 웹 애플리케이션 생애주기의 단계
- 웹 페이지를 만들기 위한 HTML code의 절차
- JavaScript code의 실행 순서
- 이벤트를 활용하여 interactive한 page 만들기
- event loop
사전 지식 체크!
- 브라우저는 HTML code가 짜인 대로 page를 생성하는가?
- 웹 애플리케이션은 한 번에 event를 몇 개 처리하는가?
- 브라우저가 event를 처리하기 위해 event queue를 쓰는 이유?
2. event-handling
page-building 단계가 끝나고 나면 event-handling 단계로 돌입한다. event-handling 단계에서 가장 중요한 개념은 바로 브라우저의 실행환경은 한 번에 한 줄씩만 실행된다는 점, 즉 single-threaded execution model이라는 것이다. 사람이 붐비는 시간대의 은행 모습을 떠올리면 이해하기 쉽다. 은행원 앞에 아무리 많은 사람들이 줄을 늘어서고 있어도 은행원은 한 번에 한 명의 손님밖에 응대하지 못한다. 브라우저에서 JavaScript code도 이러한 방식으로 실행된다.
이벤트가 발생할 때마다 브라우저는 연관된 event handler를 실행해야 한다. 허나 다른 event를 불러오기까지 사용자가 언제까지고 기다려주리란 보장은 없다. 따라서 브라우저는 발생했지만 아직 처리되지 않은 이벤트를 추적할 방법이 필요하다. 이를 위해 브라우저는 위 그림에 보이는 event queue를 사용한다.
브라우저가 탐지한 생성된 event들은 종류를 가리지 않고 모두 event queue 안에 담긴다. 위 Figure 2.8의 event-handling 과정을 간략히 적으면 다음과 같다.
- 브라우저는 event queue의 최상부를 확인
- event가 없으면 계속해서 확인
- event queue 최상부에 event가 존재하면 해당 event를 실행. 최상부에 있던 event가 실행되는 동안 다음 event는 실행되기 전까지 최상부에서 대기
유의할 점은 이 같은 event queue를 처리하는 과정은 page-building과 event-handling의 외부에서 일어나는 일이라는 점이다. event가 발생한 시점을 결정하는 처리와 event queue에 push하는 처리는 event-handling 과정에 포함되지 않는다.
Events are asynchronous
event가 일어날 시간이나 순서는 예측할 수 없다. 사용자에게 개발자가 원하는 순서대로 event 발생을 강제시키는 일은 어렵기 때문이다. 그러므로 event를 처리하는 일련의 과정을 비동기적(asynchronous)인 과정이라고 한다.
이러한 event의 종류는 다음과 같다.
- 브라우저 이벤트
- 네트워크 이벤트
- 사용자 이벤트
- Timer 이벤트
Registering event handlers
웹 애플리케이션에서 다음 두 가지 방식으로 event를 등록할 수 있다.
// 특정 속성에 function 부여하기
window.onload = function(){};
// addEventListener method 사용하기
document.body.onclick = function(){};특정 속성에 function을 부여하는 방법이 직관적이어서 쉽고 간단하다. 하지만 이 방식으로 event-handler를 등록한다면 특정 event에 대해 하나의 function만을 등록할 수 있기 때문에 이전 event-handler의 function을 덮어쓰기 쉬워 권장하지 않는다. 반면 addEventListener를 사용하면 우리가 필요한 만큼 event-handler를 한 element에 여러 개 등록할 수 있다. 아래 예제 코드를 살펴보자.
<script>
// Attaches mousemove event handler to body
document.body.addEventListener('mousemove', () => {
const second = document.querySelector('#second');
addMessage(second, 'Event: mousemove');
});
// Attaches click event handler to body
document.body.addEventListener('click', () => {
const second = document.querySelector('#second');
addMessage(second, 'Event: click');
});
</script>위 코드를 보면 알 수 있듯 addEventListener를 사용하면 'second'라는 ID를 가진 element에 'mousemove'와 'click'이라는 event를 동시에 줄 수 있다.
위 그림을 함께 보면서 HTML code에서 JavaScript event가 실행되는 과정을 살펴보자.
- 사용자의 행동에 대한 응답으로 브라우저는 mousemove와 click event를 발생한 순서대로 event queue에 넣는다.
- event loop는 queue를 확인하여 먼저 발생한 mousemove와 관련된 event-hanlder를 실행한다.
- mousemove handler가 실행되는 동안 click event는 순서를 기다린다.
- mousemove handler의 마지막 줄이 실행되고 JavaScript가 hanlder function을 빠져나오면, event loop는 다시 queue를 확인한다.
- 이번엔 click event가 queue의 맨 앞에 있기 때문에 click event가 실행된다.
- click event가 모두 실행되고 나면 event loop는 event queue 안을 계속 확인하면서 새로운 event를 기다린다. 이 event loop는 사용자가 웹 애플리케이션을 종료할 때까지 실행된다.
요약
- HTML은 DOM 구조를 형성하는 데 쓰이는 blueprint이다.
- DOM 구조를 역동적으로 만들기 위해 JavaScript code를 쓴다.
- 웹 애플리케이션은 2가지 단계를 거쳐 실행된다.
- Page-Building
- Event-Handling
댓글