Programing/javascript

자바스크립트 Bridge Pattern

2025. 4. 19. 09:43
반응형

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();

✅ 장점

  1. 기능과 구현의 독립적 확장 가능: 하나의 변경이 다른 계층에 영향을 주지 않음
  2. 다형성 활용 극대화: 다양한 구현을 동적으로 조합 가능
  3. 유지보수성 향상: 복잡한 클래스 상속 구조를 단순화함

❌ 단점

  1. 구조 복잡도 증가: 추상화와 구현이 분리되어 이해가 어려울 수 있음
  2. 설계 초기 단계에서 명확한 구조 필요: 잘못 설계 시 확장성 저하
  3. 클래스 수 증가: 추상화와 구현 각각에 대해 클래스가 추가됨

🛠️ 실전 예시: 알림 시스템 구현

// 구현 클래스
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
'Programing/javascript' 카테고리의 다른 글
  • 한글만 입력 가능한 입력 필터링 jQuery (한글 + 영문 추가)
  • 자바스크립트 Flyweight Pattern
  • 자바스크립트 Composite Pattern
  • 자바스크립트 Chain of Responsibility Pattern
Dongkkase
Dongkkase
개발자로 일하면서 부딪히는 문제풀이가 누군가에게 도움이 되길 바라며
    반응형
  • Dongkkase
    정집사의 개발로그
    Dongkkase
  • 전체
    오늘
    어제
    • All (478)
      • 금융 (61)
      • Programing (295)
        • Algorithm (39)
        • API (2)
        • javascript (122)
        • CSS (8)
        • HTML (10)
        • PHP (15)
        • JAVA (27)
        • JSP (17)
        • JSP 예제 (1)
        • IOS (1)
        • Android (1)
        • Sencha Touche (1)
        • bat file, cmd (0)
        • 디버깅 (2)
        • SQL (21)
        • MS-SQL (1)
        • MySQL (13)
        • 보안 (5)
      • Server (14)
        • Docker (1)
        • Windows (9)
        • Linux (3)
        • jeus (1)
      • Database (6)
      • IT 일반 (15)
      • 리뷰 (38)
        • Book (17)
        • 제품 (2)
        • 영화 소개 (11)
        • 음악 소개 (7)
      • 잡생각 (36)
        • 회고 (3)
        • 컬럼 (4)
        • 자료실 (6)
        • 낙서장 (12)
        • 위시리스트 (2)
        • WOW (1)
        • 덕 (1)
  • 인기 글

  • 최근 댓글

  • 태그

    jsp
    블로그
    JavaScript
    읽고 싶은 책
    자바스크립트유틸
    위시리스트
    It
    자바
    js패턴
    사고 싶은 책
    iT's MY LiFE
    php
    디자인패턴
    IT 관련
    자바스크립트
    IT블로그
    IT·컴퓨터
    SQL
    기초
    Java
Dongkkase
자바스크립트 Bridge Pattern
상단으로

티스토리툴바