DesignPattern 2

5. 프록시 패턴과 프록시 서버

5.1. 프록시 패턴

`프록시 객체` 는 디자인 패턴 중 하나인 프록시 패턴이 녹아들어 있는 객체다.

> `프록시 패턴 (Proxy Pattern)` 은 대상 객체에 접근하기 전 그 접근에 대한 흐름을 가로채 대상 객체 앞단의 인터페이스 역할을 하는 디자인 패턴이다.

프록시 패턴은 객체의 속성, 변환, 등을 보완하며 보안, 데이터 검증, 캐싱, 로깅에 사용한다. 프록시 객체로도 사용되지만, 프록시 서버로도 활용된다.

프록시 서버에서의 캐싱 캐시 안에 정보를 담아두고, 캐시 안에 정보를 요구하는 요청에 대해 다시 저 멀리 있는 원격 서버에 요청하지 않고 캐시 안에 있는 데이터를 활용하는 것을 말한다. 이를 통해 불필요하게 외부와 연결하지 않기 때문에 트래픽을 줄일 수 있다는 장점이 있다.

5.2. 프록시 서버

>`프록시 서버 (Peoxy Server)` 는 서버와 클라이언트 사이에서 클라이언트가 자신을 통해 다른 네트워크 서비스에서 간접적으로 접속할 수 있게 해주는 컴퓨터 시스템이나 응용 프로그램을 가르킨다.

 프록시 서버로 쓰는 nginx  `nginx`는 비동기 이벤트 기반의 구조와 다수의 연결을 효과적으로 처리 가능한 웹 서버이며, 주로 Node.js 서버 앞단의 프록시 서버로 활용된다.

Node.js의 창시자 라이언 달(Ryan Dahl)은 "Node.js의 버퍼 오버플로우 취약점을 예방하기 위해서는 nginx를 프록시 서버로 앞단에 놓고 Node.js를 뒤쪽에 놓는 것이 좋다."라고 말했다.

이러한 말은 교과서처럼 참고되어 현재 많은 사람들이 Node.js 서버를 운영할 때 이렇게 구축한다. 이를 통해 익명 사용자의 직접적인 서버로의 접근을 차단하고 간접적으로 한 단게를 더 거침으로써 보안성을 더 강화할 수 있다.
 프록시 서버로 쓰는 CloudFlare  `CloudFlare`는 전 세계적으로 분산된 서버가 있고 이를 통해 어떠한 시스템의 콘텐츠 전달을 빠르게 할 수 있는 CDN 서비스이다.

CDN 말고도 CloudFlare를 통해 누릴 수 있는 이점은 많다. 대표적으로 DDOS 공격 방어, HTTPS 구축이 있다. 이 모든 것은 웹 서버 앞단에 두어 '프록시 서버'로 쓰기 때문에 가능한 것이다.

사용자, 크롤러, 공격자가 자신의 웹 사이트에 접속하게 될텐데, 이때 CloudFlare를 통해 공격자로부터 보호할 수 있다.

DDOS 공격 방어 `DDOS` 는 짧은 기간 동안 네트워크에 많은 요청을 보내 네트워크를 마비시켜 웹 사이트의 가용성을 방해하는 사이버 공격 유형이다. `CloudFlare` 는 의심스러운 트래픽, 시스템을 통해 오는 트래픽을 자동으로 차단해서 DDOS 공격으로 부터 보호한다. CloudFlare의 거대한 네트워크 용량과 캐싱 전략으로 소규모 DDOS 공격은 쉽게 막아낼 수 있으며, 이러한 공격은 대한 방화벽 대시보드로 제공한다.

HTTPS 구축 서버에서 HTTPS를 구축할 때 인증서를 기반으로 구축할 수 있다. 하지만 CloudFlare를 사용하면 별도의 인증서 설치 없이 좀 더 손쉽게 HTTPS를 구축할 수 있다.
 CORS와 프런트엔드의 프록시 서버  `CORS(Cross-Origin Resource Sharing)` 는 서버가 웹 브라우저에서 리소스를 로드할 때 다른 오리진을 통해 로드하지 못하게 하는 HTTP 헤더 기반 메커니즘이다.

프런트엔드 개발 시 프런트엔드 서버를 만들어서 백엔드 서버와 통신할 때 주로 CORS 에러를 마주하는데, 이를 해결하기 위해 프런트엔드에서 프록시 서버를 만들기도 한다.

6. 이터레이터 패턴

> `이터레이터 패턴 (Iterator Pattern)` 은 이터레이터를 사용하여 컬렉션(collection)의 요소들에 접근하는 디자인 패턴이다.

이를 통해 순회할 수 있는 여러 가지 자료형의 구조와는 상관없이 이터레이터라는 하나의 인터페이스로 순회가 가능하다.

6.1. 자바스크립트에서의 이터레이터 패턴

javascript
const mp = new Map() 
mp.set('a', 1)
mp.set('b', 2)
mp.set('cccc', 3) 
const st = new Set() 
st.add(1)
st.add(2)
st.add(3) 
const a = []
for(let i = 0; i < 10; i++)a.push(i)

for(let aa of a) console.log(aa)
for(let a of mp) console.log(a)
for(let a of st) console.log(a) 
/* 
a, b, c 
[ 'a', 1 ]
[ 'b', 2 ]
[ 'c', 3 ]
1
2
3
*/

분명히 다른 자료 구조인 `set` 과 `map` 임에도 똑같은 for a of b 라는 이터레이터 프로토콜을 통해 순회하는 것을 볼 수 있다.

7. 노출모듈 패턴

> `노출모듈 패턴 (Revealing Module Pattern)` 은 즉시 실행 함수를 통해 private, public 같은 접근 제어자를 만드는 패턴이다.

자바스크립트는 private나 pulbic 접근 제어자가 존재하지 않고 전역 범위에서 스크립트가 실행된다. 그렇기 때문에 노출 모듈 패턴을 통해 private와 public 접근 제어자를 구현하기도 한다.

javascript
const pukuba = (() => {
    const a = 1
    const b = () => 2
    const public = {
        c : 2, 
        d : () => 3
    }
    return public 
})() 
console.log(pukuba)
console.log(pukuba.a)
// { c: 2, d: [Function: d] }
// undefined

위 예제에서 보면 a와 b는 다른 모듈에서 사용할 수 없는 변수나 함수이며, private 범위를 가진다. c와 d는 다른 모듈에서 사용할 수 있는 변수나 함수이며, public 범위를 가진다. 앞서 설명한 노출모듈 패턴을 기반으로 만든 자바스크립트 모듈 방식으로는 `CJS(CommonJS) 모듈` 방식이 있다.

8. MVC 패턴

> `MVC 패턴` 은 모델(Model), 뷰(View), 컨트롤러(Controller)로 이루어진 디자인 패턴이다.

애플리케이션이 구성 요소를 세 가지 역할로 구분하여 개발 프로세스에서 각각의 구성 요소에만 집중해서 개발할 수 있다.

장점: 재사용성과 확장성이 용이 단점: 애플리케이션이 복잡해질수록 모델과 뷰의 관계가 복잡해짐

8.1. 모델(Model)

`모델(Model)` 은 애플리케이션의 데이터인 데이터베이스, 상수, 변수 등을 뜻한다. ex) 사각형 모양의 박스 안에 글자가 들어 있다면 그 사각형 모양의 박스 위치 정보, 글자 내용, 글자 위치, 글자 포맷(utf-8)에 관한 정보를 모두 가지고 있어야 한다. 뷰에서 데이터를 생성하거나 수정하면 컨트롤러를 통해 모델을 생성하거나 갱신한다.

8.2. 뷰(View)

`뷰(View)` 는 inputbox, checkbox, textarea 등 사용자 인터페이스 요소를 나타낸다. 즉, 모델을 기반으로 사용자가 볼 수 있는 화면을 뜻한다. 모델이 가지고 있는 정보를 따로 저장하지 않아야 하며, 단순히 사각형 모양 등 화면에 표시하는 정보만 가지고 있어야 한다. 변경이 일어날 경우에는 컨트롤러에 이를 전달해야 한다.

8.3. 컨트롤러(Controller)

`컨트롤러(Controller)` 는 하나 이상의 모델과 하나 이상의 뷰를 잇는 다리 역할을 하며, 이벤트 등 메인 로직을 담당한다. 또한, 모델과 뷰의 생명주기도 관리하며, 모델이나 뷰의 변경 통지를 받으며 이를 해석하여 각각의 구성 요소에 해당 내용에 대해 알려준다.

8.4. MVC 패턴의 예시) 리액트

`리액트(React)` 는 유저 인터페이스를 구축하기 위한 라이브러리다. '가상 DOM'을 통해 실제 DOM을 조작하는 것을 추상화해서 성능을 높였다.

대표적인 특성으로는 불변성(immutable)이 있다. 예를 들어 state는 setState를 통해서만 수정이 가능하고, props를 기반으로 해서 만들어지는 컴포넌트인 pureComponent가 있다. 단방향 바인딩이 적용되어 있고, 자유도가 높고, 메타(페이스북)가 운영하고 있으며 넷플릭스, 트위터, 드롭박스, 우버, 페이팔, 마이크로소프트 등에서 사용된다.

9. MVP 패턴

> `MVP 패턴` 은 MVC 패턴으로부터 파생되었으며 MVC에서 C에 해당하는 컨트롤러가 프레젠터(presenter)로 교체된 패턴이다.


뷰와 프레젠터는 일대일 관계이기 때문에 MVC 패턴보다 더 강한 결합을 지니 디자인 패턴이라고 볼 수 있다.

10. MVVM 패턴

> `MVVM 패턴` 은 MVC의 C에 해당하는 컨트롤러가 뷰모델(View Model)로 바뀐 패턴이다.


여기서 뷰모델은 뷰를 더 추상화한 계층이며, MVVM 패턴은 MVC 패턴과는 다르게 커맨드와 데이터 바인딩을 가지는 것이 특징이다. 뷰와 뷰모델 사이의 양방향 데이터 바인딩을 지원하며 UI를 별도의 코드 수정 없이 재사용할 수 있고 단위 테스팅하기 쉽다는 장점이 있다.

10.1. MVVM 패턴의 예) 뷰(Vue)

MVVM 패턴을 가진 대표적인 프레임워크로는 뷰(Vue.js)가 있다. `뷰(Vue.js)` 는 반응형(reactivity)이 특징인 프런트엔트 프레임워크다. 예를 들어 watch와 computed 등으로 쉽게 반응형적인 값들을 구축할 수 있다.

함수를 사용하지 않고 값 대입만으로도 변수가 변경되며 양방향 바인딩, html을 토대로 컴포넌트를 구축할 수 있다는 점이 특징이다. 재사용 가능한 컴포넌트 기반으로 UI를 구축할 수 있으며 BMW, 구글, 루이비통 등에서 사용한다.