Event Emitter를 언제 사용해야 할까?

pickvs 프로젝트를 리팩토링 하던 도중 댓글과 관련된 기능들을 한데 모아 모듈로 수정하고 있었다.

댓글내부에는 대댓글을 펼칠수 있는 기능이 있기 때문에 외부 라이브러리인 accordion을 댓글 모듈에서 사용해야 한다.

라이브러리가 타겟에 대해서 each로 반복문을 돌면서 accordion객체를 초기화 해주고 있기 때문에 새롭게 동적으로 추가된 댓글은 each문에 포함되지 않아서 추가된 댓글에 대해 accordion을 새롭게 활성화 시켜야 하는 방법이 필요했다.

고민 끝에 댓글 모듈의 프로토타입에 event emitter를 확장하고 activateAccordion이라는 이벤트가 발생하면 외부라이브러리인 accordion을 초기화 해주는 방식을 생각했다.

activateAccordion이벤트 등록은 댓글모듈이 초기화 될떄 해주고, 대댓글 펼치기 버튼이 클릭되었을때 activateAccordion이벤트를 emit해주면 될것같다.

 

event Emitter를 좀 더 깊게 공부하기 위해서 아래 링크를 찾아봤다.

 

https://stackoverflow.com/questions/38881170/when-should-i-use-eventemitter

When should I use EventEmitter?

function addTicket(ticket, callback) {
    insertTicketIntoDatabase(ticket, function(err) {
        if (err)
            return handleError(err);

        callback();
    });
}

티켓을 데이터베이스에 넣는 함수가 있다. 성공적으로 디비에 넣고나서 콜백을 실행하는 함수이다.

근데 만약 티켓이 디비에 넣어지고 나서 유저들에게 그 사실을 알람해주고 싶다면?

function addTicket(ticket, callback) {
    insertTicketIntoDatabase(ticket, function(err) {
        if (err)
            return handleError(err);

        emailUser(ticket, callback);
    });
}

다음과 같이 emailUser라는 함수를 추가해야한다. 이렇게 되면 addTicket이라는 함수 내에 티켓을 추가하는 기능 외에 알람을 해주는 기능이 추가로 들어가있기 때문에 코드가 깔끔하지않고 유지보수하기 어려워진다. 지금은 유저한테만 알람하니까 괜찮은데 더 많은곳에 알람을 해줘야한다면 더 많은 콜백이 들어가야 할것이다.

 

function addTicket(ticket, callback) {
    insertTicketIntoDatabase(ticket, function(err) {
        if (err)
            return handleError(err);

        TicketEvent.emit('inserted', ticket);
        callback();
    });
}

TicketEvent.on('inserted', function(ticket) {
    emailUser(ticket);
});

TicketEvent.on('inserted', function(ticket) {
    notifySlack(ticket);
});

 

그래서 이런식으로 티켓이 디비에 성공적으로 저장됬으면 티켓이벤트 객체에 이벤트를 발생시켜서 그 티켓이벤트 객체가 알람을 해주는 기능을 맡게끔 하는것이다. 이렇게 되면 모듈간 역할이 분리되기떄문에 유지보수하기 좋아지며, 알람을 보내기 위해 콜백(emailUser)의 실행이 끝날떄까지 기다릴 필요도 없다. 

 

여기까지가 위 스택오버플로우를 요약한것이다.

 

내 프로젝트에 대해서 적용해보자..

 

위 내용을 요약해보자면.. 

어떤 상태변화가 생겼을때 그 상태변화에 대응해야하는 여러 구독자들이 있다면 이미터를 사용하는것이 좋을것 같다. 지금 당장은 아니더라도, 추후에 어떤 상태변화에 여러 구독자들이 추가될것같으면 미리 그렇게 만들어놓는것이 좋을것이다.

아코디언을 활성화 해줘야 하는 상황은 다음과 같다.

1. 상세페이지의 첫슬라이드를 비동기로 불러왔을때 그 슬라이드의 모든 댓글에 대해서

2. 스와이프해서 다음 슬라이드가 나왔을때 그 슬라이드의 모든 댓글에 대해서

3. 댓글이 새로 추가되었을때 그 댓글에 대해서

 

위의 예를 다시 생각해보면.. 티켓이 inserted 된 상황이 발생했을때 슬랙에 알림, 이메일로 유저에게 알림 두가지 다른 행위를 하고있다.

즉, 어떤 하나의 상황에 대해서 여러 행위를 하는것인데.. 내 프로젝트는 하나의 상황이 아니라 세가지 상황에서 아코디언을 활성화 해줘야 한다.

 

따라서, 이벤트 이미터를 사용하는것보다는 그냥 함수 호출로 구현하는것이 맞다고 판단했으나.. 조금만 더 생각해보니

차라리, 스와이퍼 모듈에 activateAccordion와 같이 이벤트를 등록해놓고 위 세가지 케이스에 대해서 이벤트를 emit하는게 좀 더 좋은 구현인 것 같다.

 

근데.. 생각해보니 그럴거면 왜 굳이 이벤트를 emit을 하는걸까? 그냥 객체 내부 메소드를 호출하면 될텐데.. 좀 더 생각해보자

https://www.freecodecamp.org/news/using-events-in-node-js-the-right-way-fc50c060f23b/

http://boxersb.github.io/javascript/2010/04/01/observer-pattern-of-javascript/

https://jundol.kr/2

http://blog.naver.com/PostView.nhn?blogId=c_ist82&logNo=220795909036

자바스크립트(Javascript)에서 옵저버 패턴(observer pattern)으로 모듈 간 의존성 제거하기

이 블로그 진짜 진짜 진짜 잘 설명되어 있다. 읽고 나서 내 프로젝트에 적용해보자.