반응형
JavaScript에서 옵저버 패턴을 적용하면 모듈 간의 결합도를 낮추고, 이벤트 중심의 구조를 구현할 수 있다. 이번 예제에서는 버튼 클릭 이벤트를 통해 옵저버 패턴이 어떻게 동작하는지 살펴보자.
🧩 옵저버 패턴이란?
옵저버 패턴은 객체의 상태 변화를 관찰하는 옵저버들의 목록을 객체에 등록하여, 상태 변화가 있을 때마다 객체가 직접 각 옵저버에게 통지하도록 하는 디자인 패턴이다. 이를 통해 객체 간의 결합도를 낮추고, 시스템의 유연성과 확장성을 높일 수 있다.
📁 파일 구조
/project-root
├── js/
│ ├── ObserverControl.js
│ ├── SampleMain.js
│ └── SampleList.js
├── index.html🧱 옵저버 패턴 구성 요소
- ObserverControl.js: 옵저버를 등록하고, 이벤트를 전달하는 중재자 역할을 한다.
- SampleMain.js: 이벤트를 발생시키는 주체이다.
- SampleList.js: 이벤트를 수신하여 처리하는 옵저버이다.
🛠️ 코드 예제
✅ 1. ObserverControl.js
var ObserverControl = {
observers: [],
addObserver: function(observer) {
this.observers.push(observer);
},
notifyObservers: function(param) {
this.observers.forEach(function(observer) {
if (observer.update) {
observer.update(param);
}
});
}
};✅ 2. SampleMain.js
var SampleMain = {
name: 'SampleMain',
init: function() {
ObserverControl.addObserver(this);
document.getElementById('btnTest').addEventListener('click', function() {
ObserverControl.notifyObservers({
type: 'MAIN_TEST_EVENT',
data: { message: '테스트 메시지' }
});
});
},
update: function(param) {
if (param.type === 'MAIN_TEST_EVENT') {
console.log('SampleMain received:', param.data.message);
}
}
};✅ 3. SampleList.js
var SampleMain = {
name: 'SampleMain',
init: function() {
ObserverControl.addObserver(this);
document.getElementById('btnTest').addEventListener('click', function() {
ObserverControl.notifyObservers({
type: 'MAIN_TEST_EVENT',
data: { message: '테스트 메시지' }
});
});
},
update: function(param) {
if (param.type === 'MAIN_TEST_EVENT') {
console.log('SampleMain received:', param.data.message);
}
}
};✅ 4. index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>옵저버 패턴 예제</title>
</head>
<body>
<button id="btnTest">테스트 버튼</button>
<script src="js/ObserverControl.js"></script>
<script src="js/SampleMain.js"></script>
<script src="js/SampleList.js"></script>
<script>
SampleMain.init();
SampleList.init();
</script>
</body>
</html>🔄 클릭 이벤트 흐름
- 사용자가 btnTest 버튼을 클릭한다.
- SampleMain의 init 함수에서 등록한 클릭 이벤트 리스너가 실행된다.
- ObserverControl.notifyObservers가 호출되어 등록된 모든 옵저버의 update 메서드가 실행된다.
- 각 옵저버(SampleMain, SampleList)의 update 메서드에서 이벤트 타입을 확인하고, 해당 이벤트에 대한 처리를 수행한다.
✅ 결론
이 예제를 통해 JavaScript에서 옵저버 패턴을 활용하여 모듈 간의 통신을 효율적으로 관리할 수 있음을 확인할 수 있다. 옵저버 패턴을 적용하면 각 모듈이 독립적으로 동작하면서도 필요한 정보를 주고받을 수 있어, 유지보수성과 확장성이 향상된다.
반응형
'개발노트' 카테고리의 다른 글
| JSP + Mustache.js + Ajax로 동적으로 데이터 렌더링하기 (0) | 2025.04.15 |
|---|---|
| JSP에서 페이지별 JS 모듈을 invoke로 효율적으로 호출하는 방법 (0) | 2025.04.15 |
| [javascript] DateRangePicker 달력 라이브러리 (0) | 2024.09.27 |
| [restAPI] @restcontroller API converter 오류 (0) | 2024.07.05 |
| [Github Pages] 깃허브 페이지(github.io) 만들기 (0) | 2024.06.25 |
