[JavaScript] 이벤트 큐, Event Emitter

1. Event Emitter

• 비동기로 이벤트를 처리할 때 사용할 수 있다.

const EventEmitter = require('events');
const myEmitter = new EventEmitter();

myEmitter.on('event', async () => {
    console.log('Start processing event');

    // 비동기 함수
    async function asyncTask() {
        return new Promise(resolve => {
            setTimeout(() => {
                console.log('Async task completed');
                resolve();
            }, 2000); // 2초 대기
        });
    }

    await asyncTask();
    
    console.log('End processing event');
});

myEmitter.emit('event');

• 위와 같이 on 으로 이벤트를 등록하고 emit으로 이벤트를 발생시킬 수 있다.
• on과 addListener는 동일한 기능을 가지고 있다.
  • 아래와 같은 형태로 변수를 전달할 수 있다.
  • myEmitter.on("distributerAction", (var1, var, ...) => 
• emit 메소드
  • 이벤트를 인위적으로 발생시키는 메소드
• once 메소드
  • once로 이벤트를 등록하면 emit을 통해 여러번 호출해도 한번만 실행된다.
• listeners
  • 특정 이벤트에 대한 이벤트 핸들러들을 출력해주는 메소드
  • 아래와 같이 해당 이벤트에 어떤 핸들러가 있는지 출력해준다.

const EventEmitter = require('events');

const myEmitter = new EventEmitter();

myEmitter.once('test', () => {
  console.log('A');
});

myEmitter.once('test', () => {
  console.log('B');
});

myEmitter.once('test', () => {
  console.log('C');
});

console.log(myEmitter.listeners('test'));

//출력
[ [Function], [Function], [Function] ]

• off 메소드
  • 핸들러를 해제하는 메소드
  • 함수 명이 동일해야 off 메소드를 사용할 수 있다.
    • 즉 직접 함수를 만들어 넣어준다면 작동하지 않는다.

const EventEmitter = require('events');

const myEmitter = new EventEmitter();

const callback = () => {
  console.log('Success!');
};

myEmitter.on('test', callback);

myEmitter.off('test', callback);

myEmitter.emit('test');

// 출력
Success!

const EventEmitter = require('events');

const myEmitter = new EventEmitter();

const cbArr = [];

cbArr[0] = () => {
  console.log('A');
};

cbArr[1] = () => {
  console.log('B');
};

myEmitter.on('test', cbArr[0]);
myEmitter.on('test', cbArr[1]);

myEmitter.off('test', cbArr[0]);
myEmitter.off('test', cbArr[1]);

myEmitter.emit('test');

//아무것도 출력 안됨

 

2. 이벤트 큐

• 이벤트 큐는 비동기적으로 발생한 이벤트나 함수 호출을 저장하는 큐로, 자바스크립트의 이벤트 루프(Event Loop)와 함께 동작하여 비동기 작업을 처리한다
• JavaScript는 단일 스레드로 동작하기 때문에 비동기 작업을 효율적으로 처리하기 위해 이벤트 큐와 이벤트 루프를 사용한다.
• 이벤트 루프와 이벤트 큐
  • 콜 스택
    • 자바스크립트는 함수 호출을 처리할 때 콜 스택을 사용합니다.
    • 함수가 호출되면 콜 스택의 맨 위에 추가되고, 함수가 반환되면 콜 스택에서 제거됩니다.
    • 자바스크립트는 콜 스택이 비어 있을 때만 다른 작업을 처리할 수 있습니다.
  • 이벤트 큐(Event Queue)
    • 비동기 작업(예: setTimeout, setInterval, I/O 작업 등)이 완료되면 해당 작업의 콜백 함수가 이벤트 큐에 추가됩니다.
    • 이벤트 큐는 FIFO(First In, First Out) 구조로 동작합니다.
  • 이벤트 루프(Event Loop)
    • 이벤트 루프는 콜 스택과 이벤트 큐를 지속적으로 확인합니다.
    • 콜 스택이 비어 있으면 이벤트 큐에서 작업을 꺼내 콜 스택에 추가합니다.
    • 이렇게 해서 비동기 작업의 콜백이 실행됩니다.
• 마이크로태스크 큐와 태스크 큐
  • 마이크로태스크 큐(Microtask Queue)
    • 프로미스의 then 또는 catch와 같은 콜백이 여기에 추가됩니다.
    • 마이크로태스크는 이벤트 루프의 각 단계가 끝난 후 즉시 실행됩니다.
  • 태스크 큐(Task Queue)
    • setTimeout, setInterval 등의 콜백이 여기에 추가됩니다.
    • 태스크 큐의 작업은 마이크로태스크 큐의 작업이 모두 완료된 후 실행됩니다.

 

 

 

1. 참조

1) event Emitter :  https://velog.io/@vekkary/EventEmitter-%EA%B0%9D%EC%B2%B4-%EC%82%AC%EC%9A%A9%EB%B2%95