Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
Tags
- unique identifiers
- 제너레이터와 async/await
- 블로그 서비스 최적화
- version management
- 자바스크립트 패턴
- 딥다이브
- 자바스크립트
- 프론트엔드 성능 최적화 가이드
- 올림픽 통계 서비스 최적화
- 학습내용정리
- 이미지 갤러리 최적화
- middleware pattern
- pr review
- peerdependencies
- 스코프
- const
- mixin pattern
- 커리어
- 브라우저의 렌더링 과정
- DOM
- 프로그래머스
- 자바스크립트 딥다이브
- 새 코드 받아오기
- package management
- 진행기록
- 이벤트
- js pattern
- 모던 자바스크립트 Deep Dive
- js pattern
- Babel과 Webpack
Archives
- Today
- Total
Dev Blog
Mediator Pattern 본문
Mediator(중재자, 조정자) 패턴은
component 가 중앙 지점인 중재자를 통해 서로 상호 작용할 수 있도록 합니다.
예를 들어,
항공 교통 관제사가 모든 비행기가 다른 비행기에 충돌하지 않고
안전하게 비행하는 데 필요한 정보를 받도록 하는 것과 같은 역할을 합니다.
모든 객체가 다른 객체와 직접 통신하여 many to many 관계가 되는 대신,
객체의 요청은 Mediator 가 처리하는데, Mediator 는 이 요청을 처리하여 필요한 곳으로 전달합니다.
Before. Mediator 패턴 적용 전.
After. Mediator 패턴 적용 후.
Chat room 이 예시 중 하나로,
채팅방 내의 사용자들은 서로 직접 대화하지 않고, 대신, Chat room 이 사용자들 사이의 중재자 역할을 합니다.
class ChatRoom {
logMessage(user, message) {
const time = new Date();
const sender = user.getName();
console.log(`${time} [${sender}]: ${message}`);
}
}
class User {
constructor(name, chatroom) {
this.name = name;
this.chatroom = chatroom;
}
getName() {
return this.name;
}
send(message) {
this.chatroom.logMessage(this, message);
}
}
새 User 객체를 생성하여 send 메소드를 실행하면 아래와 같이 결과값을 확인할 수 있습니다.
'Development Notes > JS Patterns' 카테고리의 다른 글
Mixin pattern (0) | 2024.12.08 |
---|---|
Middleware Pattern (0) | 2024.12.08 |
Flyweight Pattern (0) | 2024.12.08 |
Factory Pattern (0) | 2024.12.08 |
Command Pattern (0) | 2024.11.09 |
Comments