반응형
Bridge Pattern(브릿지 패턴) 은 기능 계층과 구현 계층을 분리하여 각각 독립적으로 확장할 수 있게 만드는 구조 디자인 패턴입니다. 주로 클래스의 다중 상속을 피하면서도 다양한 기능 조합이 필요한 경우에 유용합니다.
🧱 Bridge Pattern이란?
Bridge Pattern은 추상화(Abstraction) 와 구현(Implementation) 을 분리하여 서로 독립적으로 변경이 가능하도록 설계합니다. 하나의 클래스 계층에서는 인터페이스(기능)를 정의하고, 다른 클래스 계층에서는 구체적인 동작을 정의합니다.
// 구현 계층 (Implementation)
class DrawingAPI {
drawCircle(x, y, radius) {}
}
class DrawingAPI1 extends DrawingAPI {
drawCircle(x, y, radius) {
console.log(`API1 - 원 그리기: (${x}, ${y}), 반지름: ${radius}`);
}
}
class DrawingAPI2 extends DrawingAPI {
drawCircle(x, y, radius) {
console.log(`API2 - Circle at (${x}, ${y}) radius ${radius}`);
}
}
// 추상화 계층 (Abstraction)
class Shape {
constructor(drawingAPI) {
this.drawingAPI = drawingAPI;
}
draw() {}
}
class Circle extends Shape {
constructor(x, y, radius, drawingAPI) {
super(drawingAPI);
this.x = x;
this.y = y;
this.radius = radius;
}
draw() {
this.drawingAPI.drawCircle(this.x, this.y, this.radius);
}
}
const circle1 = new Circle(5, 10, 3, new DrawingAPI1());
const circle2 = new Circle(2, 4, 6, new DrawingAPI2());
circle1.draw();
circle2.draw();
✅ 장점
- 기능과 구현의 독립적 확장 가능: 하나의 변경이 다른 계층에 영향을 주지 않음
- 다형성 활용 극대화: 다양한 구현을 동적으로 조합 가능
- 유지보수성 향상: 복잡한 클래스 상속 구조를 단순화함
❌ 단점
- 구조 복잡도 증가: 추상화와 구현이 분리되어 이해가 어려울 수 있음
- 설계 초기 단계에서 명확한 구조 필요: 잘못 설계 시 확장성 저하
- 클래스 수 증가: 추상화와 구현 각각에 대해 클래스가 추가됨
🛠️ 실전 예시: 알림 시스템 구현
// 구현 클래스
class NotificationSender {
send(message) {}
}
class EmailSender extends NotificationSender {
send(message) {
console.log(`이메일 전송: ${message}`);
}
}
class SMSSender extends NotificationSender {
send(message) {
console.log(`문자 전송: ${message}`);
}
}
// 추상화 클래스
class Notification {
constructor(sender) {
this.sender = sender;
}
notify(message) {
this.sender.send(message);
}
}
const emailAlert = new Notification(new EmailSender());
const smsAlert = new Notification(new SMSSender());
emailAlert.notify("서버 다운 경고!");
smsAlert.notify("정기 점검 안내");
🧩 결론
Bridge Pattern은 기능과 구현을 분리하여 서로 독립적으로 변경 가능하게 만들어 확장성과 유연성을 극대화하는 설계 방식입니다. 복잡한 클래스 계층 구조를 깔끔하게 정리할 수 있으며, 다양한 기능 조합이 필요한 시스템에 특히 적합합니다.
반응형
'Programing > javascript' 카테고리의 다른 글
| 가격 입력 필드를 위한 jQuery 자동 포맷팅 및 제한(금액만) (0) | 2025.04.21 |
|---|---|
| 숫자와 쉼표(,)만 입력 가능하게 하는 jQuery 입력 필터링 (0) | 2025.04.21 |
| 한글만 입력 가능한 입력 필터링 jQuery (한글 + 영문 추가) (1) | 2025.04.21 |
| 자바스크립트 Flyweight Pattern (1) | 2025.04.19 |
| 자바스크립트 Composite Pattern (0) | 2025.04.19 |
| 자바스크립트 Chain of Responsibility Pattern (0) | 2025.04.19 |
| 자바스크립트 Iterator Pattern (0) | 2025.04.19 |
| 자바스크립트 State Pattern (1) | 2025.04.19 |