EventTarget 클래스를 직접 구현해 봅니다.Set을 사용해 중복을 막고 삭제를 간단하게 처리합니다.DOM 인터페이스와 비슷한 EventTarget 클래스를 직접 만들어 봅니다. 이 클래스로 이벤트 리스너를 지속적으로 추적할 수 있고, 이벤트를 dispatch해서 원할 때 실행할 수도 있습니다.
javascript
타입스크립트에서 여러 객체를 동시에 상속받을 수 있게 해주는 Mixin 패턴을 알아봅니다.
2022. 4. 29.FrontendAxios 인터셉터로 요청과 응답을 가로채 공통 헤더 추가, 응답 표준화, 에러 처리, 토큰 갱신을 한곳에서 관리하는 방법을 정리합니다.
2024. 12. 23.FrontendV8 같은 현대 JavaScript 엔진이 소스 코드를 토큰화, AST 생성, 바이트코드 변환, JIT 컴파일을 거쳐 기계어로 실행하는 과정을 단계별로 정리합니다.
2024. 11. 25.class EventTarget {
// 등록한 이벤트들을 관리할 listeners 객체
constructor() {
this.listeners = {};
}
// 이벤트 이름과 실행시킬 콜백함수를 인자로 받아서
// listeners 프로퍼티에 등록
addEventListener(name, callback) {
// 처음 등록되는 이벤트라면 Set 생성자를 사용하여 초기값 셋팅
if(!this.listeners.hasOwnProperty(name)) {
this.listeners[name] = new Set([callback]);
} else {
this.listeners[name].add(callback);
}
}
// name과 add했던 같은 콜백함수를 넣어 원하는 이벤트 삭제
removeEventListener(name, callback) {
this.listeners[name].delete(callback);
}
// 등록된 name의 이벤트가 있다면 루프를 돌아 모든 콜백함수 실행
dispatchEvent(name) {
if(!this.listeners[name]) return;
for(const callback of this.listeners[name]) {
callback();
}
}
}Set은 기본적으로 값을 기준으로 유니크값을 보장합니다. 또한 배열을 직접 탐색하는 코드를 짜지 않고도 delete 메서드에 삭제하려는 값을 넣어 손쉽고 빠르게 삭제할 수 있습니다.hasOwnProperty는 자기 자신의 객체에 선언된 프로퍼티만 검사합니다. 반면 in을 사용하면 프로토타입 체인을 타고 올라가 상위 객체의 프로퍼티까지 검사합니다.Set 자료형은 Iterable한 속성을 가지고 있어 for...of나 forEach 구문으로 바로 순회할 수 있습니다.