yonggoo-design: publish/subscribe 패턴을 이용한 설계

[ygnoh]

전체 흐름

1. 각 projector들에 대해 1:1로 Container를 생성한다.
2. Container가 초기화 되며, 옵션 값에 따라 Navigator, Indicator를 생성한다.
3. Container, Navigator, Indicator는 동일한 EventAggregator 객체를 공유한다.
4. 각 컴포넌트는 EventAggregator를 통해 자신이 필요한 이벤트를 subscribe하고, 때에 따라 publish하기도 한다.
5. EventAggregator는 이벤트가 publish될 경우, 그를 subscribe하는 handler들을 모두 호출하여 이벤트가 발생했음을 알린다.

TODO

• 예외 처리
• index 정보를 모두 공유할 수 없을까
• moveToNext, moveToPrev를 moveTo 하나로 통합할 수 없을까
• naming 개선..?

[hyeonmi]

@mojosoeun 님 @ygnoh 님 개인적으로 인디케이터나 네비게이터 모양이나 위치가 마크업에 따라 다를수 있어서 마크업은 html로 구성하고 라이브러 옵션으로 클래스를 지정하면 알아서 되는 방법을 저는 선호합니다.

용구님이 구현한 방식으로하면 기본적으로 렌더링되서 편한 이점있지만 커스텀하기 어려울수 있어요. 장단점이 있으니 컨셉에 따라 구현하시면 될거 같아요.

고민한 흔적이 느껴지는 코드였어요! 잘보고 가요! 👍

[hyeonmi]

이것저것 알아보고 테스트 해봤는데 어디에도 참조되지 않는 빈 인스턴스를 할당하지 않으면 heap에 쌓여지지 않고 바로 소멸되는것 같습니다.

아래 코드로 테스트 해봤을때 GC가 실행 되지 않았어요.

class Test{}

function f(){
    for(let i = 0; i < 1000000; i++){
        new Test();
    }
}

아래처럼 인스턴스를 배열에 담았다가 인스턴스를 초기화 하면(여러 인스턴스 생성한다고 가정해서) GC가 실행이 됩니다.

class Test{}

function f(){
    let a = [];
    for(let i = 0; i < 1000000; i++){
        let inst = new Test();
        a.push(inst);
        inst = null;
    }
}

그래서 "인스턴스를 할당하지 않는 경우 인스턴스 내부에 어딘가 참조가 걸려있지 않으면 바로 소멸 될수가 있다는 위험이 있다"로 결론 내려봤어요.

[ygnoh]

음 첫 번째 결과대로면 new Container()가 메모리에서 해제됐어야 하는데, 그렇지 않았던 것은 dom에 참조가 걸려있기 때문이라고 생각해도 될 것 같네요!

[hyeonmi]

답변이 늦었네요~ 인스턴스로 생성하는 클래스에 addEventListener가 걸린 경우 heap 사이즈가 유지 되는 걸 확인해 볼수 있어요.

[mojosoeun]

@hyeonmi 현미님 월욜날 저 그래프 보는법좀 여쭤볼게용!