브릿지 bridge 패턴 - 자바스크립트 예제
요약
브릿지 bridge 패턴을 자바스크립트 코드와 함께 알아봅니다. 정보처리기사 대비 문제가 포함되어있습니다.
브릿지 패턴 요약
| 패턴 종류 | 핵심 키워드 |
|---|---|
| 브릿지 (Bridge) | 기능 클래스-구현 클래스 연결, 추상 계층 분리 |
브릿지 (Bridge) 패턴
브릿지 패턴은 '추상화'와 '구현'을 두 개의 독립적인 클래스 계층으로 분리하여, 이 둘이 서로에게 영향을 주지 않고 독립적으로 확장될 수 있도록 하는 디자인 패턴입니다. 이름처럼 두 영역을 연결하는 '다리' 역할을 합니다.
상속을 사용하면 기능과 구현이 강하게 결합되어, 새로운 기능을 추가하거나 새로운 구현 방식을 지원해야 할 때 클래스가 기하급수적으로 늘어나는 문제가 발생할 수 있습니다. 브릿지 패턴은 상속 대신 합성(Composition) 을 사용하여 이 문제를 해결합니다.
기본 구조
- Abstraction (추상화): 클라이언트가 사용할 상위 수준의 인터페이스를 정의합니다. 내부에
Implementor에 대한 참조를 가집니다. - RefinedAbstraction (구체화된 추상화):
Abstraction을 상속받아 더 구체적인 기능을 확장합니다. - Implementor (구현자): 실제 기능을 구현하기 위한 하위 수준의 인터페이스를 정의합니다.
Abstraction은 이 인터페이스에만 의존합니다. - ConcreteImplementor (구체적인 구현자):
Implementor인터페이스를 실제로 구현하는 클래스입니다.
예시: 다양한 테마를 지원하는 UI 요소
다양한 종류의 UI 요소(예: 버튼, 토글 스위치)가 여러 가지 테마(예: 라이트 모드, 다크 모드)를 지원해야 하는 상황을 가정해 봅시다.
먼저, 테마를 구현할 Theme 인터페이스와 구체적인 테마 클래스들을 만듭니다.
// Implementor: 테마 인터페이스
class Theme {
getColor() {
throw new Error("getColor() 메서드는 반드시 구현되어야 합니다.");
}
}
// ConcreteImplementor A: 라이트 테마
class LightTheme extends Theme {
getColor() {
return "White";
}
}
// ConcreteImplementor B: 다크 테마
class DarkTheme extends Theme {
getColor() {
return "Black";
}
}이제 UI 요소를 나타내는 UIComponent 추상 클래스를 만듭니다. 이 클래스는 Theme 객체를 내부에 가집니다(합성).
// Abstraction: UI 요소 추상 클래스
class UIComponent {
constructor(theme) {
this.theme = theme;
}
render() {
throw new Error("render() 메서드는 반드시 구현되어야 합니다.");
}
}UIComponent를 상속받는 구체적인 UI 요소들을 만듭니다.
// RefinedAbstraction A: 버튼
class Button extends UIComponent {
render() {
console.log(`버튼을 렌더링합니다. (배경색: ${this.theme.getColor()})`);
}
}
// RefinedAbstraction B: 토글 스위치
class Toggle extends UIComponent {
render() {
console.log(
`토글 스위치를 렌더링합니다. (배경색: ${this.theme.getColor()})`
);
}
}이제 클라이언트 코드에서 이들을 조합하여 사용합니다.
// 클라이언트 코드
const lightTheme = new LightTheme();
const darkTheme = new DarkTheme();
// 라이트 테마를 사용하는 UI 요소들
const lightButton = new Button(lightTheme);
const lightToggle = new Toggle(lightTheme);
lightButton.render(); // 출력: 버튼을 렌더링합니다. (배경색: White)
lightToggle.render(); // 출력: 토글 스위치를 렌더링합니다. (배경색: White)
// 다크 테마를 사용하는 UI 요소들
const darkButton = new Button(darkTheme);
const darkToggle = new Toggle(darkTheme);
darkButton.render(); // 출력: 버튼을 렌더링합니다. (배경색: Black)
darkToggle.render(); // 출력: 토글 스위치를 렌더링합니다. (배경색: Black)만약 새로운 '블루 테마'를 추가하고 싶다면 BlueTheme 클래스만 새로 만들면 됩니다. 기존 Button이나 Toggle 코드는 전혀 수정할 필요가 없습니다. 마찬가지로 새로운 UI 요소 '드롭다운 메뉴'를 추가하고 싶다면 Dropdown 클래스만 만들면 되고, 기존 테마 코드는 건드릴 필요가 없습니다.
이처럼 브릿지 패턴은 기능의 계층(UI 요소)과 구현의 계층(테마)을 분리하여 각각 독립적으로 확장할 수 있게 해줍니다.
브릿지 패턴 중요 키워드
- 추상화와 구현을 분리하여 독립적으로 확장할 수 있게 합니다.
- 상속 대신 합성(Composition) 을 사용합니다.
- 클래스 폭발 문제를 방지하고 유연성을 높입니다.
- 기능과 구현이 서로 다른 속도로 변경되거나, 여러 플랫폼을 지원해야 할 때 유용합니다.
정처기 기출 문제
| 기출 | |
| 문제 | 기능을 처리하는 클래스와 구현을 담당하는 추상 클래스로 구별하는 디자인 패턴을 보기에서 고르시오 |
| 보기 | |
| 답변 | |
| 정답 | 정답 보기 |