프로그래밍 이벤트 (Event)

프로그래밍 이벤트(Event)는 프로그램이 실행되는 시스템에서 일어난 일을 그 시스템이 코드에 알리는 신호입니다. 버튼 클릭, 키 입력, 페이지 로드 완료, 서버 연결 같은 일이 이벤트가 되고, 코드는 미리 등록해 둔 함수로 그 신호에 반응합니다. 웹 브라우저와 Node.js는 같은 개념을 서로 다른 방식으로 구현합니다.

이벤트와 리스너의 작동 방식

MDN의 이벤트 입문 문서는 이벤트를 프로그래밍 대상 시스템에서 일어나는 일로 정의하고, 이벤트가 일어나면 시스템이 신호를 발생(fire)시키며 그때 실행할 코드를 연결하는 장치를 제공한다고 설명합니다. 브라우저에서 이벤트는 요소 하나, 여러 요소, 현재 탭의 HTML 문서, 브라우저 창 전체 같은 특정 대상에 붙습니다. 사용자의 클릭과 키 입력, 창 크기 변경, 페이지 로딩 완료, 폼 제출, 동영상 재생, 오류 발생이 모두 이벤트입니다.

이벤트에 반응하려면 대상에 이벤트 리스너(event listener)를 붙입니다. 리스너는 이벤트가 발생하는지 지켜보다가, 발생하는 순간 자신이 참조하거나 담고 있는 이벤트 핸들러(event handler) 함수를 호출합니다. 같은 문서의 예제는 버튼의 "click" 이벤트에 리스너를 등록해, 버튼을 누를 때마다 핸들러가 페이지 배경색을 무작위 색으로 바꾸게 합니다. 이렇게 이벤트에 맞춰 실행될 코드를 연결하는 일을 이벤트 핸들러 등록이라고 부릅니다.

핸들러에는 이벤트 객체가 자동으로 전달됩니다. 이벤트 객체의 target 속성은 이벤트가 일어난 요소를 가리키고, keydown 이벤트처럼 종류에 따라 눌린 키를 알려 주는 key 같은 속성이 더 붙습니다. 이벤트 객체의 preventDefault()는 기본 동작을 막습니다. 같은 문서의 폼 예제는 submit 이벤트 핸들러에서 입력란이 비어 있으면 이 함수를 호출해 서버 전송을 멈추고 오류 문구를 보여 줍니다.

브라우저 이벤트 등록 방식의 차이

MDN의 이벤트 리스너 등록 메서드 문서는 addEventListener()를 이벤트 리스너를 등록하는 권장 방법으로 소개합니다. 한 이벤트에 핸들러를 여러 개 붙일 수 있고, 리스너가 작동하는 단계(캡처와 버블링)를 세밀하게 정할 수 있으며, HTML이나 SVG 요소 밖의 이벤트 대상에서도 작동하기 때문입니다. onclick 같은 이벤트 핸들러 속성은 값을 다시 넣으면 앞의 함수를 덮어써 한 이벤트에 리스너를 하나만 둘 수 있고, 이벤트 입문 문서는 HTML 속성에 코드를 직접 쓰는 인라인 핸들러를 나쁜 관행으로 봅니다.

등록한 리스너는 removeEventListener()로 떼어 냅니다. 같은 대상·이벤트 유형·캡처 설정에 같은 함수를 다시 등록하면 중복 추가되지 않지만, 겉모양이 같은 익명 함수를 다시 만들어 넘기면 다른 함수로 취급돼 따로 추가됩니다. 함수 참조를 보관하지 않은 익명 리스너는 removeEventListener()에 같은 함수를 다시 넘기기 어렵고, 반복문 안에서 만들면 함수가 반복마다 새로 생겨 메모리도 더 씁니다.

세 번째 인수인 옵션 객체로 동작을 조정합니다. once를 true로 두면 리스너가 한 번 호출된 뒤 자동으로 제거되고, passive를 true로 두면 리스너가 preventDefault()를 호출하지 않겠다고 선언해 브라우저가 스크롤 같은 기본 동작을 기다리지 않고 시작합니다. signal에 AbortSignal을 넘기면 그 신호를 소유한 AbortController의 abort()를 호출할 때 리스너가 제거됩니다.

Node.js의 이벤트 모델

MDN 이벤트 입문 문서는 대부분의 프로그래밍 언어가 저마다 이벤트 모델을 갖고 있다고 설명하고, 브라우저와 다른 예로 Node.js를 듭니다. Node.js 공식 Events 문서에 따르면 Node.js 핵심 API의 상당 부분은 이미터(emitter)라는 객체가 이름 붙은 이벤트를 내보내고 그 이벤트가 리스너 함수를 호출하게 하는 비동기 이벤트 구동 구조로 짜여 있습니다. net.Server 객체는 상대가 연결할 때마다, fs.ReadStream은 파일이 열릴 때, 스트림은 읽을 데이터가 생길 때마다 이벤트를 내보냅니다.

이 EventEmitter 기반 API에서 이벤트를 내보내는 객체는 해당 클래스의 인스턴스이며, eventEmitter.on()으로 리스너를 등록하고 eventEmitter.emit()으로 이벤트를 발생시킵니다. 이벤트가 발생하면 등록 순서대로 모든 리스너가 동기적으로 호출되고, 리스너가 돌려준 값은 버려집니다. 문서는 이 방식이 이벤트 순서를 지켜 경쟁 상태와 논리 오류를 피하게 돕는다고 설명합니다. 비동기로 넘길 작업은 리스너 안에서 setImmediate()나 process.nextTick()으로 미룹니다.

eventEmitter.once()로 등록한 리스너는 이벤트가 처음 발생할 때 등록이 풀린 뒤 한 번만 호출됩니다. 오류에는 별도 규칙이 있습니다. 'error' 이벤트에 리스너가 하나도 없는 상태에서 이 이벤트가 발생하면 오류가 던져지고 스택 트레이스가 출력된 뒤 Node.js 프로세스가 종료되며, 문서는 'error' 이벤트에 항상 리스너를 붙이는 것을 모범 사례로 듭니다. Node.js에도 EventTarget이 있지만 DOM의 EventTarget과 달리 계층 구조와 이벤트 전파 개념이 없습니다.