[javascript] Aurelia에서의 모듈간 통신 방법

21 Dec 2023

javascript

Aurelia는 모듈 간 효과적인 통신을 지원하는 강력한 프레임워크입니다. 여러 모듈 간의 통신은 프로젝트의 유연성과 확장성을 높일 수 있습니다.

Pub/Sub 패턴

Aurelia 앱에서 모듈 간 통신을 구현하는 일반적인 방법 중 하나는 Pub/Sub (발행/구독) 패턴을 사용하는 것입니다. 이 패턴을 사용하면 이벤트의 발생 및 구독을 통해 모듈 간의 통신을 가능하게 할 수 있습니다.

// app-event.js
import { EventAggregator } from 'aurelia-event-aggregator';
export class AppEvent {
    static inject = [EventAggregator];
    constructor(eventAggregator) {
      this.eventAggregator = eventAggregator;
    }
    publish(event, data) {
      this.eventAggregator.publish(event, data);
    }
    subscribe(event, callback) {
      return this.eventAggregator.subscribe(event, callback);
    }
    dispose(subscription) {
      subscription.dispose();
    }
}

위 예제는 aurelia-event-aggregator 라이브러리를 사용하여 Pub/Sub 패턴을 구현하는 방법을 보여줍니다. publish 메서드를 사용하여 이벤트를 발행하고, subscribe 메서드를 사용하여 해당 이벤트를 구독할 수 있습니다.

커스텀 이벤트

Aurelia에서는 커스텀 이벤트를 통해 모듈 간 통신을 구현할 수도 있습니다.

// app-component.js
import { bindable } from 'aurelia-framework';
export class AppComponent {
    @bindable message;
    sendMessage() {
        this.element.dispatchEvent(new CustomEvent('message-sent', { detail: this.message }));
    }
}

위의 코드에서는 CustomEvent를 사용하여 ‘message-sent’ 커스텀 이벤트를 생성하고 해당 이벤트를 발생시킵니다.

Conclusion

Aurelia에서는 Pub/Sub 패턴 및 커스텀 이벤트를 사용하여 모듈 간의 효과적인 통신을 구현할 수 있습니다. 이러한 방법을 통해 코드의 재사용성을 높이고 모듈 간의 결합도를 낮출 수 있습니다.

참고 문헌: