[디자인패턴] 전략 패턴, 옵저버 패턴,상속,구현,프록시 객체,옵저버,Dom,주체

디자인 패턴이란?

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

종류는 아래와 같다.

1. 싱글톤 패턴
2. 팩토리 패턴
3. 전략 패턴
4. 옵저버 패턴
5. 프록시 패턴과 프록시 서버
6. 이터레이터 패턴
7. 노출모듈 패턴
8. MVC 패턴
9. MVP 패턴
10. MVVM 패턴

 

---

전략 패턴

전략 패턴은 정책 패턴이라고도 하며, 객체의 행위를 바꾸고 싶은 경우 '직접' 수정하지 않고 

전략이라고 부르는 '캡슐화한 알고리즘'을 컨텍스트안에서 바꿔주면서 상호 교체가 가능하게 만드는 패턴이다.

 

컨택스트란?

프로그래밍에서의 컨텍스트는 상황, 문맥, 맥락을 의미하며,

개발자가 어떠한 작업을 완료하는데 필요한 모든 관련 정보를 말한다. 

---

옵저버 패턴

주체가 어떤 객체의 상태 변화를 관찰하다가 상태 변화가 있을 때마다 메서드 등을 통해

옵저버 목록에 있는 옵저버들에게 변화를 알려주는 디자인 패턴이다.

트위터 서비스가 해당된다. 

또한, 주체와 객체를 따로 두지 않고 상태가 변경되는 객체를 기반으로 구축된다.

옵저버 패턴은 주로 이벤트 기반 시스템에 사용하며 MVC(모델-뷰-컨트롤러) 패턴에도 사용된다.

 

 

주체란?

객체의 상태 변화를 보고 있는 관찰자를 말한다.

 

옵저버들이란?

이 객체의 상태 변화에 따라 전달되는 메서드 등을 기반으로 '추가 변화 사항'이 생기는 객체들을 의미

 

 

자바스크립트에서의 옵저버 패턴은 프록시 객체를 통해 구현할 수 있다.

 

프록시 객체란?

어떠한 대상의 기본적인 동작(속성 접근, 할당, 순회, 열거, 함수 호출 등의) 작업을 가로챌 수 있는 

객체를 뜻하며, JS에서의 프록시 객체는 두 개의 매게변수(target,handler)를 가진다.

1. target : 프록시할 대상

2. handler : 프록시 객체의 target 동작을 가로채서 정의할 동작들이 정해져 있는 함수

 

 

 

Vue.js 3.0의 옵저버 패턴에서 ref, reactive로 정의하면 해당값이 변경되었을 때 자동으로 DOM에 있는 값이 변경되는데,

이는 프록시 객체를 이용한 옵저버 패턴을 이용하여 구현한 것이다.

 

Dom이란?

문서 객체 모델을 말하며, 웹 브라우저 상에서 화면을 이루고 있는 요소들을 지칭한다.

 

 

 

 

 

자바에서 상속과 구현의 특징과 차이에 대해서도 알아야 한다.

 

상속(extends)?

상속은 일반 클래스, abstract 클래스를 기반으로 구현한다.

자식 클래스가 부모 클래스의 메서드 등을 상속받아 사용하며 자식 클래스에서 추가 및 확장을 할 수 있는 것을 말한다.

재사용성, 중복성의 최소화가 이루어진다.

 

구현(implements)?

구현은 인터페이스를 기반으로 구현한다.

부모 인터페이스를 자식 클래스에서 재정의하여 구현하는 것을 말한다. 

상속과는 달리 반드시 부모 클래스의 메서드를 재정의하여 구현해야 한다. 

 

예상질문
Q.  옵저버 패턴을 어떻게 구현하나요?

A.  옵저버 패턴이란 주체가 어떤 객체의 상태 변화를 관찰하다가 상태 변화가 있을 때마다 메서드 등을 통해
옵저버 목록에 있는 옵저버들에게 변화를 알려주는 디자인 패턴이다.
여러가지 방법이 있겠지만 자바스크립트에서의 옵저버 패턴은 프록시 객체를 통해 구현할 수 있습니다. 
프록시 객체를 통해 객체의 속성이나 메서드 변화 등을 감지하고 이를 미리 설정해 놓은 옵저버들에게
전달하는 방식으로 구현합니다