디자인 패턴

💡 디자인 패턴이란?

• 프로그램을 설계할 때 발생했던 문제점들을 객체 간의 상호 관계 등을 이용하여 해결할 수 있도록 하나의 '규약' 형태로 만들어 놓은 것

---

옵저버 패턴

💡 옵저버 패턴 (observer pattern) 이란?

주체가 어떤 객체의 상태 변화를 관찰하다가 상태 변화가 있을 때마다 메서드 등을 통해 옵저버 목록에 있는 옵저버들에게 변화를 알려주는 디자인 패턴

• 주체 : 객체의 상태 변화를 보고 있는 관찰자
• 옵저버 : 객체의 상태 변화에 따라 전달되는 메서드 등을 기반으로 '추가 변화 사항'이 생기는 객체

🔗 실제 사용

• 트위터
  • 옵저버들이 '팔로우'한 주체의 포스팅이 '팔로워'들에게 알림이 간다.
• Vue.js 3.0 프레임워크
  • ref나 reactive로 정의 -> 해당 값 변경 시 자동으로 DOM 반영
• 주로 이벤트 기반 시스템 & MVC 패턴에 사용
  • 주체(모델)에서 변경사항이 생겨 update() 메서드로 옵저버(뷰)에 알리고 이를 기반으로 컨트롤러 작동

MVC 패턴 (Model - View - Controller)

Java

⭐️ 옵저버 패턴 활용 자바 예시 코드
👉 topic은 주체이자 객체

interface Subject{
	public void register(Observer obj);
	public void unregister(Observer obj);
	public void notifyObservers();
	public Object getUpdate(Observer obj);
}

interface Observer{
	public void update();
}

class Topic implements Subject{
	private List<Observer> observers;
	private String message;

	public Topic(){
		this.observers = new ArrayList<>();
		this.message = "";
	}

	@Override
	public void register(Observer obj){
		if(!observers.contains(obj))
			observers.add(obj);
	}

	@Override
	public void unregister(Observer obj){
		observers.remove(obj);
	}

	@Override
	public void notifyObservers(){
		this.observers.forEach(Observer::update);
	}

	@Override
	public Object getUpdate(Observer obj){
		return this.message;
	}

	public void postMassage(String msg){
		System.out.println("Message sended to Topic: " + msg);
		this.message = msg;
		notifyObservers();
	}
}

class TopicSubscriber implements Observer{
	private String name;
	private Subject topic;

	public TopicSubscriber(String name, Subject topic){
		this.name = name;
		this.topic = topic;
	}

	@Override
	public void update(){
		String msg = (String) topic.getUpdate(this);
		System.out.println(name + ":: got message >> " + msg);
	}
}

public class ObserverPattern{
	public static void main(String[] args){
		Topic topic = new Topic();
		Observer a = new TopicSubscriber("a", topic);
		Observer b = new TopicSubscriber("b", topic);

		topic.register(a);
		topic.register(b);

		topic.postMassage("Happy new year!");
	}
}

/*
Message sended to Topic: Happy new year!
a:: got message >> Happy new year!
b:: got message >> Happy new year!
*/

JS

자바스크립트에서 옵저버 패턴 - 프록시 객체

프록시(proxy) 객체 : 어떠한 대상의 기본적인 동작의 작업을 가로챌 수 있는 객체로, 두 매개변수를 가짐
target : 프록시할 대상
handler : target 동작을 가로채고 어떠한 동작을 할 것인지의 함수

🔗 프록시 객체 활용 자바스크립트 옵저버 패턴 예시 코드

function createReactiveObject(target, callback){
	const proxy = new Proxy(target, {
		set(obj, prop, value){
			if(value !== obj[prop]){
				const prev = obj[prop]
				obj[prop] = value;
				callback(`${prop}가 [${prev}] >> [${value}] 로 변경되었습니다.`)
			}
			return true
		}
	})
	return proxy
}

const a = {"형규" : "솔로"}
const b = createReactiveObject(a. console.log)
b.형규 = "솔로"
b.형규 = "커플"
// 형규가 [솔로] >> [커플] 로 변경되었습니다.

---

상속과 구현

💡 상속(extends) 이란?

자식 클래스가 부모 클래스의 메서드 등을 상속받아 사용하며, 자식 클래스에서 추가 및 확징을 할 수 있는 것
-> 재사용성, 중복성의 최소화

일반 클래스, abstract 클래스를 기반으로 구현

💡 구현(implements) 이란?

부모 인터페이스를 자식 클래스에서 '재정의'하여 구현하는 것으로 반드시 부모 클래스의 메서드를 재정의해야 함

인터페이스(interface)를 기반으로 구현