[디자인패턴 & 프로그래밍 패러다임] 프록시/이터레이터/노출모듈/MVC/MVP/MVVM & 선언형/함수형/객체지향/절차지향

2023.4.8 43p~65p

 

1.1.5 프록시 패턴과 프록시 서버

프록시 패턴?

프록시 패턴은 대상 객체에 접근하기 전 그 접근에 대한 흐름을 가로채 대상 객체 앞단의 인터페이스 역할을 하는 디자인 패턴이다. 이를 사용해 객체의 속성, 변환 등을 보완하고 보안, 데이터검증, 캐싱, 로깅에 사용한다.

* 프록시 서버에서의 캐싱 : 캐시 안에 정보를 담은 후 캐시 안에 있는 정보를 요구하는 요청에 캐시 안에 있는 데이터를 활용하는 것이다. 불필요하게 외부와 다시 연결하지 않기 때문에 트래픽을 줄일 수 있다는 장점이 있다.

프록시 서버?

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

nginx는 비동기 이벤트 기반의 구조와 다수의 연결을 효과적으로 처리하는 웹 서버이며 주로 Node.js 서버 앞단의 프록시 서버로 활용된다. 이를 통해 익명 사용자가 직접 서버에 접근하는 것을 막고 간접적으로 한 단계를 더 거치게 만들어 보안을 강화할 수 있다. 실제 포트를 숨길 수도 있고 정적 자원을 gzip 압축하거나 메인 서버 앞단에서의 로깅도 가능하다.

* 버퍼 오버플로우 : 버퍼는 데이터가 저장되는 메모리 공간으로 메모리 공간을 벗어나는 경우를 말한다.
* gzip 압축 : 데이터 전송량을 줄일 수 있는 압축 기술이다.

cloudFlare는 전 세계적으로 분산된 서버가 있고 이를 통해 시스템 콘텐츠 전달을 빠르게 할 수 있는 CDN 서비스다. 웹 서버 앞단에 프록시 서버로 두어 DDOS 공격에 방어해주거나 별도의 인증서 설치 없이 쉽게 HTTPS를 구축할 수 있도록 해준다. 의심스러운 트래픽인지 판단하여 캡챠 등을 기반으로 의심스러운 트래픽의 많은 발생으로 인한 클라우드 서비스 비용이 드는 것을 막아줄 수 있다.

* DDOS : 짧은 기간 동안 네트워크에 많은 요청을 보내 네트워크를 마비시켜 웹 사이트의 가용성을 방해하는 사이버 공격
* CDN : 각 사용자가 인터넷에 접속하는 곳과 가까운 곳에서 콘텐츠를 캐싱 또는 배포하는 서버 네트워크. 사용자가 웹 서버로부터 콘텐츠를 다운로드하는 시간을 줄일 수 있음

CORS와 프론트엔드의 프록시서버?

서버가 웹 브라우저에서 리소스를 로드할 때 다른 오리진을 통해 로드하지 못하게 하는 HTTP 헤더 기반 메커니즘이다.

* 오리진 : 프로토콜과 호스트 이름, 포트의 조합
ex) https://naver.com:12120

프론트엔드 서버 앞단에 프록시 서버를 놓아 CORS 에러를 해결하고 다양한 API 서버와의 통신을 매끄럽게 할 수 있다.

1.1.6 이터레이터 패턴

이터레이터를 사용하여 컬렉션의 요소들에 접근하는 디자인 패턴으로, 순회 할 수 있는 여러 가지 자료형의 구조와 상관없이 이터레이터라는 하나의 인터페이스로 순회 가능하다.

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 of 라는 이터레이터 프로토콜을 통해 순회 가능하다.

* 이터레이터 프로토콜 : 이터러블한 객체들을 순회할 때 쓰이는 규칙
* 이터러블한 객체 : 반복 가능한 객체로 배열을 일반화한 객체

1.1.7 노출모듈 패턴

즉시 실행 함수를 통해 private, public 같은 접근 제어자를 만드는 패턴이다. 자바스크립트는 private, public 같은 접근제어자가 존재하지 않고 전역 범위에서 스크립트가 실행되기 때문에 노출모듈 패턴을 통해 접근 제어자를 구현할 수 있다.

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

노출모듈 패턴을 기반으로 만든 자바스크립트 모듈 방식으로는 CJS(CommonJS)가 있다.

* public : 클래스에 정의된 함수에서 접근 가능. 자식/외부 클래스 접근 가능
* protected : 클래스에 정의된 함수에서 접근 가능. 자식 클래스 접근 가능. 외부 클래스 접근 불가능
* private : 클래스에 정의된 함수에서 접근 가능. 자식/외부 클래스 접근 불가능
* 즉시 실행 함수 : 함수를 정의하자마자 바로 호출하는 함수. 초기화 코드, 라이브러리 내 전역 변수의 충돌 방지에 사용

1.1.8 MVC 패턴

모델, 뷰, 컨트롤러로 이루어진 디자인 패턴이다. 애플리케이션(사용자가 컴퓨터로 원하는 작업을 할 수 있도록 만들어진 소프트웨어 또는 사용자와 상호 작용이 가능한 프로그램)의 구성 요소를 세 가지 역할로 구분하여 개발 프로세스에서 각각의 구성 요소에만 집중해서 개발할 수 있으며 재사용성, 확장성이 용이하다는 장점이 있고, 애플리케이션이 복잡해질수록 모델과 뷰의 관계까 복잡해지는 단점이 있다.

* 모델 : 애플리케이션의 데이터인 데이터 베이스, 상수, 변수를 뜻한다. 뷰에서 데이터를 생성,수정하면 컨트롤러를 통해 모델을 생성하거나 갱신한다.
* 뷰 : 사용자 인터페이스 요소를 나타낸다. 모델을 기반으로 사용자가 볼 수 있는 화면을 뜻한다. 모델이 가지고 있는 정보를 따로 저장하지 않아야 하며 화면에 표시하는 정보만 가지고 있어야 한다. 변경이 일어나면 컨트롤러에 이를 전달해야 한다.
* 컨트롤러 : 하나 이상의 모델과 하나 이상의 뷰를 잇는 다리 역할을 한다. 이벤트의 메인로직을 담당하고 모델과 뷰의 생명주기도 관리하며 모델이나 뷰의 변경 통지를 받으면 이를 해석하여 각각의 구성 요소에 해당 내용을 전달한다.

1.1.9 MVP 패턴

MVC에서 C에 해당하는 컨트롤러가 프레젠터로 교체된 패턴이다. 뷰와 프레젠터는 일대일 관계로 MVC 패턴보다 더 강한 결합을 지녔다.

1.1.10 MVVM 패턴

MVC의 C에 해당하는 컨트롤러가 뷰모델로 바뀐 패턴이다. 뷰모델은 뷰를 더 추상화한 계층이며 뷰와 뷰모델 사이의 커맨드와 데이터 바인딩을 갖지는 것이 특징이다. 뷰와 뷰모델 사이의 양방향 데이터 바인딩을 지원하며 UI를 별도의 코드 수정 없이 재사용 할 수 있고 단위 테스트가 쉬워진다. 대표적인 프레임워크로는 뷰가 있다.

* 커맨드 : 여러 가지 요소에 대한 처리를 하나의 액션으로 처리할 수 있게 하는 기법
* 데이터 바인딩 : 화면에 보이는 데이터와 웹 브라우저의 메모리 데이터를 일치시키는 기법. 뷰모델을 변경하면 뷰가 변경된다.

 

1.2 프로그래밍 패러다임

프로그래밍 패러다임이란 프로그래머에게 프로그래밍의 관점을 갖게 해주는 역할을 하는 개발 방법론이다. 프로그래밍 패러다임은 크게 선언형, 명령형으로 나누며 선언형에는 함수형, 명령형에는 객체지향, 절차지향이 있다.

1.2.1 선언형과 함수형 프로그래밍

선언형은 무엇을 풀어내는가에 집중한다. 프로그램은 함수로 이루어진 것이라는 명제가 담겨있다.

const list = [1, 2, 3, 4, 5, 11, 12]
const ret = list.reduce((max, num) => num > max ? num : max, 0)
console.log(ret) // 12

함수형 프로그래밍은 작은 순수함수들을 블록처럼 쌓아 로직을 구현하고 고차함수를 통해 재사용성을 높인 프로그래밍 패러다임이다.

* 순수함수 : 출력이 입력에만 의존하는 것
* 고차함수 : 함수가 함수를 값처럼 매개변수로 받아 로직을 생성할 수 있는 것. 고차 함수를 쓰기 위해서는 해당 언어가 일급 객체여야 한다. 변수나 메서드에 함수를 할당할 수 있어야 하며, 함수 안에 함수를 매개변수로 담을 수 있어야 하고, 함수가 함수를 반환할 수 있어야 한다.

1.2.2 객체지향 프로그래밍

객체지향 프로그래밍이란 객체들의 집합으로 프로그램의 상호 작용을 표현하며 데이터를 객체로 취급하여 객체 내부에 선언된 메서드를 활용하는 방식을 말한다. 설계에 많은 시간이 소요되며 처리속도가 늦다.

const ret = [1, 2, 3, 4, 5, 11, 12]
class List {
    constructor(list) {
        this.list = list
        this.mx = list.reduce((max, num) => num > max ? num : max, 0)
    }
    getMax() {
        return this.mx
    }
}
const a = new List(ret)
console.log(a.getMax()) // 12

특징?

1. 추상화 : 복잡한 시스템으로부터 핵심적인 개념 또는 기능을 간추려내는 것
2. 캡슐화 : 객체의 속성과 메서드를 하나로 묶고 일부를 외부에 감추어 은닉화하는 것
3. 상속성 : 상위 클래스의 속성을 하위 클래스가 이어받아 재사용하거나 추가, 확장하는 것
4. 다형성 : 하나의 메서드나 클래스가 다양한 방법으로 동작하는 것 -> 오버로딩(컴파일 중에 발생하는 정적 다형성), 오버라이딩(런타임 중에 발생하는 동적 다형성)

설계 원칙(SOLID)?

1. 단일 책임 원칙 : 모든 클래스는 각각 하나의 책임만 가져야 한다.
2. 개방-폐쇠 원칙 : 유지 보수 사항이 생긴다면 코드를 쉽게 확장할 수 있도록 하고 수정할 때는 닫혀 있어야 한다. 기존의 코드는 잘 변경하지 않으면서도 확장은 쉽게 할 수 있어야 한다.
3. 리스코프 치환 원칙 : 프로그램의 객체는 프로그램의 정확성을 깨뜨리지 않으면서 하위 타입의 인스턴스로 바꿀 수 있어야 하는 것이다. 부모 객체에 자식 객체를 넣어도 시스템이 문제없이 돌아가게 만들어야 한다.
4. 인터페이스 분리 원칙 : 하나의 일반적인 인터페이스보다 구체적인 여러 개의 인터페이스를 만들어야 한다.
5. 의존 역전 원칙 : 자신보다 변하기 쉬운 것에 의존하던 것을 추상화된 인터페이스나 상위 클래스를 두어 변하기 쉬운 것ㅇ의 변화에 영향받지 않게하는 것이다. 상위 계층은 하위 계층의 변화에 대한 구현으로부터 독립해야 한다.

1.2.3 절차형 프로그래밍

절차형 프로그래밍은 로직이 수행되어야 할 연속적인 계산 과정으로 이루어져 있다. 가독성이 좋고 실행속도가 빨라 계산이 많은 작업에 쓰이지만 모듈화하기 어렵고 유지보수성이 떨어진다.

const ret = [1, 2, 3, 4, 5, 11, 12]
let a = 0
for(let i = 0; i < ret.length; i++){
    a = Math.max(ret[i], a)
} 
console.log(a) // 12

1.2.4 패러다임의 혼합

비즈니스 로직이나 서비스의 특징을 고려해서 패러다임을 정하는 것이 좋다.