Design Pattern

Mediator Pattern

2020. 10. 23. 16:35
๋ชฉ์ฐจ
  1. ๐Ÿ“Œ ๋ชฉ์ฐจ
  2. ๐Ÿ“Œ Introduction
  3. ๐Ÿ“Œ What's Mediator Pattern?
  4. ๐Ÿ“Œ Implementation
  5. ๐Ÿ“Œ Conclusion
  6. ๐Ÿ“Œ Reference
๋ฐ˜์‘ํ˜•

๐Ÿ“Œ ๋ชฉ์ฐจ

  • Introduction
  • What's Mediator Pattern?
  • Implementation
  • Conclusion
  • Reference

๐Ÿ“Œ Introduction

์•ˆ๋…•ํ•˜์„ธ์š”. ์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ์ค‘์žฌ์ž ํŒจํ„ด์— ๋Œ€ํ•ด ๋ฐฐ์›Œ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

๐Ÿ“Œ What's Mediator Pattern?

์ค‘์žฌ์ž ํŒจํ„ด์œผ๋กœ Messenger Class๋ฅผ ๊ตฌํ˜„ ํ•ด๋ณผ ํ…๋ฐ์š”. ์ค‘์žฌ์ž ํŒจํ„ด์€ ๋‹ค์Œ ๋„ํ˜•๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

Message๋ฅผ ๊ฐ๊ฐ์˜ participants์—๊ฒŒ ๋ฟŒ๋ ค์ฃผ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์—์„  ์ผ๋‹จ ๋‘๋ช…๋งŒ ๋“ฑ๋ก์„ ํ•˜๋Š” ๊ฒƒ์œผ๋กœ ๊ฐ€์ •์„ ํ•˜๊ณ  ์–ด๋–ป๊ฒŒ ๊ตฌํ˜„์ด ๋˜๋Š”์ง€๋ฅผ ๋ณด์—ฌ๋“œ๋ฆฌ๊ณ˜์Šต๋‹ˆ๋‹ค.

๐Ÿ“Œ Implementation

์ผ๋‹จ ์ค‘์žฌ์ž ํŒจํ„ด์œผ๋กœ ์“ด Messenger๋Š” ์ด๋ ‡๊ฒŒ ์ƒ๊ฒผ์Šต๋‹ˆ๋‹ค.

class Messenger {
  constructor() {
    this.participants = [];
  }
  register(participant) {
    this.participants.push(participant);
    return this;
  }
  deliver(sender, message) {
    this.participants.forEach((participant) => {
      if (participant !== sender) {
        console.log(`From ${sender}:\n Dear ${participant}.\n ${message}`);
      }
    });
    return this;
  }
}

์ฒ˜์Œ๋จผ์ € participant๋ฅผ ๋“ฑ๋ก์„ ํ•˜๊ณ  ๊ทธ๋’ค์— participant์—๊ฒŒ ๋ฉ”์„ธ์ง€๋ฅผ ๋ฐ›์•„ ๋ณด๋‚ธ ์‚ฌ๋žŒ์„ ์ œ์™ธํ•œ ๋ชจ๋“ ์ด์—๊ฒŒ messege๊ฐ€ ๊ฐ€๋Š” ๊ตฌ์กฐ์ž…๋‹ˆ๋‹ค.

const EDDIE = "eddie";
const CLARIE = "claire";

const messenger = new Messenger();
messenger.register(EDDIE);
messenger.register(CLARIE);
messenger.deliver(EDDIE, "Whut ssup");
//From eddie:
//  Dear claire.
//  Whut ssup

๐Ÿ“Œ Conclusion

์ค‘์žฌ์ž ํŒจํ„ด์€ ์–ผํ• ์˜ต์ €๋ฒ„ ํŒจํ„ด์ด๋ž‘ ๋งค์šฐ ์œ ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ๋‘ ๋””์ž์ธ ํŒจํ„ด์˜ ๊ฐ€์žฅ ํฐ ์ฐจ์ด์ ์€ ์ค‘์•™์—์„œ ์ปจํŠธ๋กค ํ•˜๋Š” ์—ญํ• ์ด ์žˆ๋Š”๊ฐ€ ์—†๋Š”๊ฐ€์— ๋”ฐ๋ผ ๋‹ค๋ฆ…๋‹ˆ๋‹ค. ์ค‘์žฌ์ž ํŒจํ„ด์ด ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š” ๊ณณ์€ ์ฑ„ํŒ…, ์ž์› ๋ถ„๋ฐฐ๊ธฐ, ๊ฐ€๊ณ„๋ถ€ ๊ฐ™์€ ๊ฒƒ์— ๋งŽ์ด ์‚ฌ์šฉ๋œ๋‹ค๊ณ  ํ•˜๋„ค์š”. ๊ทธ๋Ÿผ ๋‹ค์Œ์— ๋˜๋ณด์•„์š” ~~

๐Ÿ“Œ Reference

  • ์ œ๋กœ์ดˆ ์ค‘์žฌ์ž ํŒจํ„ด
  • ์œค์˜์‹๋‹˜์˜ ์ค‘์žฌ์ž ํŒจํ„ด
  • ์ผ์ฒด์œ ์‹ฌ์กฐ์˜ ์ค‘์žฌ์ž ํŒจํ„ด
๋ฐ˜์‘ํ˜•

'Design Pattern' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

Higher Order Component Pattern (with React)  (0) 2022.01.21
Mixin Pattern  (0) 2022.01.20
Observer Pattern  (0) 2020.10.19
Module Pattern  (0) 2020.10.07
Singleton Pattern  (0) 2020.10.05
  1. ๐Ÿ“Œ ๋ชฉ์ฐจ
  2. ๐Ÿ“Œ Introduction
  3. ๐Ÿ“Œ What's Mediator Pattern?
  4. ๐Ÿ“Œ Implementation
  5. ๐Ÿ“Œ Conclusion
  6. ๐Ÿ“Œ Reference
'Design Pattern' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
  • Higher Order Component Pattern (with React)
  • Mixin Pattern
  • Observer Pattern
  • Module Pattern
eddie0329
eddie0329
Front-end Developer
๋ฐ˜์‘ํ˜•
eddie0329
Eddie Sunny's Blog
eddie0329
์ „์ฒด
์˜ค๋Š˜
์–ด์ œ
  • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (100)
    • Summary of Book (0)
    • Vue Study (11)
    • Vue TDD (9)
    • Vue BDD (5)
    • Design Pattern (9)
    • Javascript Study (3)
    • React Study (15)
    • React TDD (1)
    • Vue Storybook (2)
    • Refactoring (0)
    • Graphql_Apollo (3)
    • Svelte (8)
    • Open Source (1)
    • D3 (4)
    • Typescript (1)
    • CSS (2)
    • Android (0)
    • Java (0)
    • Kotlin (0)
    • ์žก๋‹ด (0)
    • Swift (19)
    • Rust (2)
    • ํšŒ์‚ฌ์ด์•ผ๊ธฐ (2)
    • ReactNative Study (2)
    • Vitest (0)

๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

  • Home

๊ณต์ง€์‚ฌํ•ญ

์ธ๊ธฐ ๊ธ€

ํƒœ๊ทธ

  • Javascript
  • react useRef
  • vue tdd
  • vue storybook
  • client only
  • CSS
  • React Native
  • jest
  • Vue
  • react
  • vue3
  • Design Pattern
  • slot ํŒจํ„ด
  • TDD
  • Vue test
  • react-component-slot
  • svelte
  • vue cypress
  • D3
  • storybook6
  • BDD
  • swift
  • swift5
  • Kotlin
  • vue bdd
  • apollo
  • TypeScript
  • Cypress
  • Nextjs
  • javascript pattern

์ตœ๊ทผ ๋Œ“๊ธ€

์ตœ๊ทผ ๊ธ€

hELLO ยท Designed By ์ •์ƒ์šฐ.
eddie0329
Mediator Pattern
์ƒ๋‹จ์œผ๋กœ

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”

๋‹จ์ถ•ํ‚ค

๋‚ด ๋ธ”๋กœ๊ทธ

๋‚ด ๋ธ”๋กœ๊ทธ - ๊ด€๋ฆฌ์ž ํ™ˆ ์ „ํ™˜
Q
Q
์ƒˆ ๊ธ€ ์“ฐ๊ธฐ
W
W

๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๊ธ€

๊ธ€ ์ˆ˜์ • (๊ถŒํ•œ ์žˆ๋Š” ๊ฒฝ์šฐ)
E
E
๋Œ“๊ธ€ ์˜์—ญ์œผ๋กœ ์ด๋™
C
C

๋ชจ๋“  ์˜์—ญ

์ด ํŽ˜์ด์ง€์˜ URL ๋ณต์‚ฌ
S
S
๋งจ ์œ„๋กœ ์ด๋™
T
T
ํ‹ฐ์Šคํ† ๋ฆฌ ํ™ˆ ์ด๋™
H
H
๋‹จ์ถ•ํ‚ค ์•ˆ๋‚ด
Shift + /
โ‡ง + /

* ๋‹จ์ถ•ํ‚ค๋Š” ํ•œ๊ธ€/์˜๋ฌธ ๋Œ€์†Œ๋ฌธ์ž๋กœ ์ด์šฉ ๊ฐ€๋Šฅํ•˜๋ฉฐ, ํ‹ฐ์Šคํ† ๋ฆฌ ๊ธฐ๋ณธ ๋„๋ฉ”์ธ์—์„œ๋งŒ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.