[CS지식] 1-1. 디자인 패턴 - 옵저버 패턴(Observer Pattern), 프록시 패턴(Proxy Pattern)과 프록시 서버(Proxy Server)
CS Note
1-1-2 Factory Pattern 과 1-1-3 Strategy Pattern 에 대해 👈🏻
1-1-4. Observer Pattern
옵저버 패턴이란?
주체가 어떤 객체(subject)의 상태 변화를 관찰하다가 상태 변화가 있을 때마다 메서드 등을 통해 옵저버 목록에 있는 옵저버들에게 변화를 알려주는 디자인 패턴
여기서 주체란 객체의 상태 변화를 보고 있는 관찰자이며, 옵저버들이란 이 객체의 상태 변화에 따라 전달되는 메서드 등을 기반으로 ‘추가 변화 사항’이 생기는 객체들을 의미한다.
유튜브로 예시를 들어보자.
한 유투버(객체)가 영상을 업로드하거나 공지글을 남겼을 때 등 데이터가 달라지면 구독자(옵저버)에게 알림이 가게 된다. 하지만, 구독하지 않은 유저는 상태가 변경되어도 알림이 안가게 되어 알지 못한다.
옵저버 패턴에서는 한 객체의 상태가 바뀌면 그 객체에 의존하는 다른 객체들한테 연락이 가고, 자동으로 내용이 갱신되는 방식으로 일대다(one-to-many) 의존성을 정의한다.
이렇게 이해해 보니 참 쉽죠? 😁
옵저버 패턴에는 '객체와 주체가 분리되어 있는 옵저버 패턴'과 '객체와 주체가 합쳐진 옵저버 패턴'으로 나뉘는데, 첫 번째는 주체가 객체의 상태 변화를 보고 있다가 변화가 있으면 옵저버에게 알리는 방법이고, 두 번째는 객체와 주체를 따로 두지 않고 합쳐져 객체의 변화가 있으면 객체가 직접 옵저버들에게 알리는 방법이다.
옵저버 패턴에서 주제자는 옵저버에 대한 정보가 없고 오직 옵저버가 특정 인터페이스를 구현한다는 것만 알고 있어서 즉, 옵저버가 무슨 동작을 하는지 모른다. 게다가 옵저버는 언제든지 새로 추가되거나 제거될 수 있으며 새로운 형식의 옵저버를 추가할 때에도 주제에 전혀 영향을 주지 않는다.
(1) 자바스크립트에서의 옵저버 패턴
자바스크립트에서의 옵저버 패턴은 프록시 객체를 통해 구현할 수 있다.
프록시 객체
: 어떤 대상의 기본적인 동작의 작업을 가로챌 수 있는 객체
onst handler = {
get: function (target, name) {
return name === 'name' ? `${target.a} ${target.b}` : target[name]
}
}
const p = new Proxy({a: 'OneCosy', b: 'IS AMUMU ZANGIN'}, handler)
console.log(p.name)(2) 프록시 객체를 이용한 옵저버 패턴
function createReactiveObject (target, callback) {
const proxy = new Proxy (target, {
set (obj, prop, value) {
if (value !== obj[prop]) { //변경하려는 값이 obj 객체의 prop 값과 같은지 확인
const prev = obj[prop] //prev 변수에 원래 저장되있던 obj 객체의 prop 값 저장
obj[prop] = value //obj 객체의 prop 값에 변경하려는 값 저장
callback(`${prop}가 [${prev}] >> [${value}]로 변경되었습니다. `) //callback 함수로 출력
}
return true
}
})
return proxy
}
const a = {
"형규" : "솔로"
}
const b = createReactiveObject(a, console.log)
b.형규 = "솔로"
b.형규 = "커플"변수 a에 “형규”라는 key에 “솔로”라는 값을 할당하고, 변수 b에 변수 a와 console.log를 인자를 갖는 createReactiveObject 함수를 넘겨준다.
b.형규 = "솔로" 코드는 이미 b 객체의 형규라는 key에는 “솔로”라는 값이 할당되어있기 때문에 set 함수 안의 if문 조건이 만족하지 않아 빠져나온다.
b.형규 = "커플"이라는 코드는 “커플”이라는 값이 b 객체의 형규라는 속성 값과 다르기 때문에 접근을 가로채는 것이 가능하다.
따라서 b 객체의 형규라는 key 값이 "솔로"라는 값에서 "커플"이라는 값으로 변경되는 것을 감시할 수 있다.
옵저버 패턴은 많이 사용되고 MVC 패턴을 사용하기 위한 기초 개념이니 꼭 익혀두면 좋겠다. (MVC 패턴은 1-1-8에 더 정리해두었다)
1-1-5. Proxy Pattern
앞서 설명한 프록시 객체는 디자인 패턴 중 하나인 프록시 패턴이 녹아있는 객체이다.
프록시 패턴이란?
프록시(Proxy)는 누군가를 대신해서 그 역할을 수행하는 존재로,
프록시 패턴은 어떤 객체를 사용하고자 할 때, 해당 객체(subject)에 접근하기 전 접근을 가로채 해당 객체 앞단의 인터페이스 역할을 함
(1) 예시 : 회사 대표와 비서
어느 정도 규모가 있는 회사에서 작은 일들은 대표와 직접적으로 하지 않고, 비서 등과 하고 중요도가 있고 권한이 필요한 일은 대표와 한다.
프로그래밍에서 사용되는 클래스들 중에서도 인터넷에서 받아와야 해서 시간이 걸리거나 메모리를 많이 차지하거나 하는 등의 이유로 객체를 여럿 생성하기 부담이 될 때가 있다. 그럴 때 그 클래스의 'Proxy' 즉, 대리인 역할을 하는 클래스를 따로 두어서 무거운 작업을 할 때 비로소 실제 클래스를 생산해서 사용하는 것을 말한다.
(2) 예시 : 유투브의 썸네일
유투브의 첫 화면에서는 썸네일이 뜨되, 기본적으로 제목이 나타나고 마우스 오버시 프리뷰가 재생된다.
제목을 띄우는건 쉽지만 프리뷰를 보여주려면 영상 데이터를 받아와야 한다. 썸네일을 담당하는 객체는 제목과 프리뷰를 두 메소드를 통해 각각 보여주도록 하되, 썸네일이 처음 화면에 나타날 때는 제목만 보여줄 수 있는 프록시(Proxy)로 생성되게 하고, 프리뷰를 보여주는 무거운 작업은 실제 클래스가 담당하도록 하여 프록시 객체로 생성된 썸네일에 커서를 올릴 때 실제 클래스가 호출돼서 프리뷰를 보여주게 한다.
이제 완전 이해됐을 것이다 😎
(3) 프록시 패턴의 장점
- 사이즈가 큰 객체가 로딩되기 전에도 프록시를 통해 참조할 수 있다.
- 실제 객체의 public, protected 메소드를 숨기고 인터페이스를 통해 노출시킬 수 있다. (= 보안이 좋다)
- 로컬에 있지 않고 떨어져있는 객체를 사용할 수 있다.
- 원래 객체에 접근에 대해 사전처리를 할 수 있다.
(4) 프록시 패턴의 단점
- 객체를 생성할 때 한 단계를 거치게 되므로, 빈번한 객체 생성이 필요한 경우 성능이 저하될 수 있다.
- 프록시 내부에서 객체 생성을 위해 스레드가 생성, 동기화가 구현되어야 하는 경우 성능이 저하될 수 있다.
- 로직이 난해해져 가독성이 떨어질 수 있다.
1-1-5. Proxy Server
Proxy 를 제대로 이해했다면, 프록시 서버도 어떤 역할인지 알 것이다.
프록시 서버는 클라이언트에서 서버로 접속을 할 때 직접적으로 접속하지 않고 중간에 대신 전달해주는 서버
그렇다면 클라이언트에서 서버로 곧바로 요청과 데이터를 주고 받지 않고 프록시 서버를 거치는 이유가 뭘까?
(1) 보안
프록시 서버를 통해서 데이터를 주고 받는 가장 큰 이유는 보안이다.
클라이언트에서 "여기 주소로 ~~ 보내줘!" 라고 요청을 보낼 경우 서버의 주소가 쉽게 노출되고 다른 익명의 사용자가 서버로 접근하기 쉬워지게 된다. 하지만 프록시 서버를 거쳐 명령을 내리면 서버의 IP를 숨기는 것이 가능하고 이는 외부로부터 위험을 막아주는 역할을 한다.
(2) 캐시
캐시를 사용한다는 것은 곧 속도를 빠르게 하는데 도움을 준다.
캐시가 속도를 빠르게 하는데 도움을 주는 방식은 바로 이전에 했던 요청들을 프록시 서버에 저장(캐시) 해두어 다음에 재요청을 보낼 때 서버를 거치지 않고 데이터를 주고 받을 수 있기 때문에 속도가 더 빨라질 수 있다.
동시에 불필요하게 외부와의 연결을 하지 않아도 된다는 장점을 가지게 된다. 또한 외부와의 트래픽을 줄이게 됨으로써 네트워크 병목 현상을 방지할 수 있다.
(3) 우회
보안에서는 클라이언트에서 서버의 주소를 감출 수 있다고 언급했다.
이와 같이 IP 주소를 감출 수가 있기 때문에 어느 곳에서 접속한지를 숨길 수가 있다. 이는 곧 IP를 통해 접속을 감지하는 사이트를 프록시 서버를 통해 우회할 수가 있다.
(4) Proxy Server의 특징
- PC와 외부 인터넷 사이의 징검다리 역할
- 중계를 해주기 때문에 외부 인터넷에서는 Client 정보를 알 수 없다.
- 외부 인터넷의 내부 침입을 막는 방화벽과 관련이 있다.
- Proxy Server는 캐시 기능이 있다.
- IP를 바꾸기 위한 용도로 많이 사용되고 있다.
- A Client가 B Proxy에 접근하여 C 사이트에 접속하는 방식
- A Client (Proxy Server 설치) 한 후에 C라는 컴퓨터를 감시한다면, C 컴퓨터의 브라우저 설정을 C 컴퓨터 IP 주소로 하면 C 컴퓨터 그룹 A Client에 남길 수 있다.
📍 출처
주홍철, [면접을 위한 CS 전공지식 노트]
[Network] 프록시 서버란? (feat. 필요한 이유) (What is a Proxy server?)
📍 참고하면 좋을 사이트
https://velog.io/@sehyunny/The-Observer-Pattern-in-JavaScript (자바스크립트에서의 옵서버 패턴)
