디자인 패턴과 프로그래밍 패러다임(정리중)

Section 1 디자인 패턴

Section 2 프로그래밍 패러다임

 

 

Section 1

1.1 디자인 패턴

디자인 패턴이란 프로그램을 설계할 때 발생했던 문제점들을

객체 간의 상호 관계 등을 이용하여 해결할 수 있도록

하나의 ‘규약’ 형태로 만들어 놓은 것

1.1.1 싱글톤 패턴 

싱글톤 패턴(singleton pattern) 은 하나의 클래스에 오직 하나의 인스턴스만 가지는 패턴.

단 하나의 인스턴스를 만들어 이를 공유하는 방식으로, 보통 데이터베이스 연결 모듈에 많이 사용된다. 

따라서,

인스턴스를 생성할 때 드는 비용이 줄어드는 장점이 있으나,

의존성이 높아진다는 단점이 있다. 

 

자바스크립트 예제

class Singleton {
    constructor() {
        if (!Singleton.instance) {
            Singleton.instance = this
        }
        return Singleton.instance
    }
    getInstance() {
        return this 
    }
}
const a = new Singleton()
const b = new Singleton() 
console.log(a === b) // true

데이터베이스 연결 모듈

// DB 연결을 하는 것이기 때문에 비용이 더 높은 작업 
const URL = 'mongodb://localhost:27017/kundolapp' 
const createConnection = url => ({"url" : url})    
class DB {
    constructor(url) {
        if (!DB.instance) { 
            DB.instance = createConnection(url)
        }
        return DB.instance
    }
    connect() {
        return this.instance
    }
}
const a = new DB(URL)
const b = new DB(URL) 
console.log(a === b) // true

 

 

싱글톤 패턴의 단점

TDD를 할 때 단위 테스트를 주로 하는데, 단위 테스트는 테스트가 서로 독립적이어야 한다.

싱글톤 패턴은 미리 생성된 하나의 인스턴스를 기반으로 구현하는 패턴이므로 각 테스트마다 ‘독립적인’ 인스턴스를 만들기 어렵다.

 

의존성 주입

싱글톤 패턴은 사용하기가 쉽고 굉장히 실용적이지만 모듈 간의 결합을 강하게 만들 수 있다는 단점이 있다. 

이 단점을 의존성 주입(DI, Dependency Injection)을 통해 모듈 간의 결합을 조금 더 느슨하게 만들어 해결할 수 있다. 

중간에 의존성 주입자가 메인 모듈이 ‘간접’적으로 의존성을 주입하도록 하여 메인 모듈(상위 모듈)은 하위 모듈에 대한 의존성이 떨어진다.이를 디커플링 된다고 한다. 

1.1.2 팩토리 패턴 

팩토리 패턴(factory pattern)은 

객체를 사용하는 코드에서 객체 생성 부분을 떼어내 추상화한 패턴이자 

상속 관계에 있는 두 클래스에서 

 

상위 클래스가 중요한 뼈대를 결정하고, 

하위 클래스에서 객체 생성에 관한 구체적인 내용을 결정하는 패턴이다.

 

상위 클래스와 하위 클래스가 분리되어 느슨한 결합을 가지며

상위 클래스에서는 인스턴스 생성 방식에 대해 전혀 알 필요가 없기 때문에 더 많은 유연성을 갖게 된다.

class CoffeeFactory {
    static createCoffee(type) {
        const factory = factoryList[type]
        return factory.createCoffee()
    }
}   
class Latte {
    constructor() {
        this.name = "latte"
    }
}
class Espresso {
    constructor() {
        this.name = "Espresso"
    }
} 

class LatteFactory extends CoffeeFactory{
    static createCoffee() {
        return new Latte()
    }
}
class EspressoFactory extends CoffeeFactory{
    static createCoffee() {
        return new Espresso()
    }
}
const factoryList = { LatteFactory, EspressoFactory } 
 
 
const main = () => {
    // 라떼 커피를 주문한다.  
    const coffee = CoffeeFactory.createCoffee("LatteFactory")  
    // 커피 이름을 부른다.  
    console.log(coffee.name) // latte
}
main()

 

CoffeeFactory 라는 상위 클래스가 중요한 뼈대를 결정하고 

하위 클래스인 LatteFactory가 구체적인 내용을 결정한다. 

CoffeeFactory에서 LatteFactory의 인스턴스를 생성하는 것이 아닌

LatteFactory에서 생성한 인스턴스를 CoffeeFactory에 주입하고 있기 때문에 이는 의존성 주입이라 볼 수 있다.

 

CoffeeFactory 클래스를 보면 static 키워드를 통해 createCoffee() 메서드를 정적메서드로 선언하여 

클래스를 기반으로 객체를 만들지 않고 호출이 가능하며, 

해당 메서드에 대한 메모리 할당을 한 번만 할 수 있는 장점이 있다. 

 

1.1.3 전략 패턴 

객체의 행위를 변경하고 싶을때 ‘직접’ 수정하지 않고 

전략이라고 부르는 ‘캡슐화한 알고리즘’을 컨텍스트 안에서 바꿔주면서 

상호 교체가 가능하게 만드는 패턴

Passport 의 전략 패턴

passport는 Node.js에서 인증 모듈을 구현할 때 쓰는 미들웨어 라이브러리로, 

여러 가지 ‘전략’을 기반으로 인증할 수 있다. 

 

서비스 내의 회원가입된 아이디와 비밀번호를 기반으로 인증하는 LocalStrategy 전략과 

페이스북, 네이버 등 다른 서비스를 기반으로 인증하는 OAuth 전략 

등을 지원한다.

var passport = require('passport')
    , LocalStrategy = require('passport-local').Strategy;

passport.use(new LocalStrategy(
    function(username, password, done) {
        User.findOne({ username: username }, function (err, user) {
          if (err) { return done(err); }
            if (!user) {
                return done(null, false, { message: 'Incorrect username.' });
            }
            if (!user.validPassword(password)) {
                return done(null, false, { message: 'Incorrect password.' });
            }
            return done(null, user);
        });
    }
));

passport.use(new LocalStrategy( ...

처럼 passport.use()라는 메서드에 ‘전략’을 매개변수로 넣어서 로직을 수행하는 것을 볼 수 있다.

 

1.1.4 옵저버 패턴

주체가 어떤 객체(subject)의 상태 변화를 관찰하다가

상태 변화가 있을 때마다 메서드 등을 통해

옵저버 목록에 있는 옵저버들에게 변화를 알려주는

디자인 패턴.

 

주체: 객체의 상태 변화를 보고 있는 관찰자

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

자바스크립트에서의 옵저버 패턴

프록시 객체를 통해 구현할 수 있다. 

프록시(proxy) 객체는 어떠한 대상의 기본적인 동작(속성 접근, 할당, 순회, 열거, 함수 호출 등)의 작업을 

가로챌 수 있는 객체를 뜻하며, 자바스크립트에서 프록시 객체는 두 개의 매개변수를 갖는다.

 

target: 프록시할 대상

handler: target 동작을 가로채고 어떠한 동작을 할 것인지 설정되어 있는 함수

 

위 예에서 볼 수 있듯이, name 속성 등 특정 속성에 접근할 때 그 부분을 가로채서 어떠한 로직을 강제할 수 있는 것이 프록시 객체이다.

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.형규 = "커플"
// 형규가 [솔로] >> [커플] 로 변경되었습니다

프록시 객체의 

get() 함수는 속성과 함수에 대한 접근을 가로챈다.

has() 함수는 in 연산자의 사용을 가로챈다.

set() 함수는 속성에 대한 접근을 가로챈다.

set() 함수를 통해 속성에 대한 접근을 “가로채”서 형규라는 속성이 솔로에서 커플로 되는 것을 감시할 수 있다.

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

프록시 패턴, 

대상 객체(subject)에 접근하기 전 그 접근에 대한 흐름을 가로채 

대상 객체 앞단의 인터페이스 역할을 하는 디자인 패턴.

 

객체의 속성, 변환 등의 보완 그리고 보안, 데이터 검증, 캐싱, 로깅에 사용된다.

 

프록시 서버,

서버와 클라이언트 사이에서 

클라이언트가 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해주는

컴퓨터 시스템이나 응용 프로그램으로 대표적으로 nginx 가 있다.

Node.js 서버를 구축할 때 앞단에 nginx 를 두어

• 익명 사용자가 직접적으로 서버에 접근하는 것을 차단하고,
• 간접적으로 한 단계를 더 거치게 하여 보안을 강화할 수 있다. 
• 또한 실제 포트를 숨기거나,
• 정적 자원을 gzip 압축,
• 메인 서버 앞단에서의 로깅

을 할 수 있다. 

 

CloudFlare

전 세계적으로 분산된 서버가 있고 이를 통해 어떠한 시스템의 콘텐츠 전달을 빠르게 할 수 있는 CDN 서비스이다.
CloudFlare는 웹 서버 앞단에 프록시 서버로 두어 

DDOS 공격 방어나 HTTPS 구축에 쓰인다. 

또한, 서비스를 배포한 이후에 해외에서 무언가 의심스러운 트래픽이 많이 발생하면 

CloudFlare가 의심스러운 트래픽인지를 먼저 판단해 CAPTCHA 등을 기반으로

이를 일정부분 막아주어 잠재적인 클라우드 서비스 비용을 방지한다. 

1.1.6 이터레이터 패턴

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

아래의 예시를 보면,

다른 자료 구조인 set과 map임에도

똑같은 for a of b 라는 이터레이터 프로토콜을 통해 순회하는 것을 볼 수 있다.

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
*/

1.1.7 노출모듈 패턴

즉시 실행 함수를 통해 private, public 같은 접근 제어자를 만드는 패턴을 말합니다.

자바스크립트는 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

a와 b는 다른 모듈에서 사용할 수 없는 변수나 함수인 private 범위를 갖는다.

c와 d는 다른 모듈에서 사용할 수 있는 변수나 함수이며 public 범위를 갖는다.

1.1.8 MVC 패턴

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

 

재사용성과 확장성이 용이하다는 장점이 있고, 

애플리케이션이 복잡해질수록 모델과 뷰의 관계가 복잡해지는 단점이 있다.

모델(model)

애플리케이션의 데이터인 데이터베이스, 상수, 변수 등을 뜻합니다.

뷰에서 데이터를 생성하거나 수정하면 컨트롤러를 통해 모델을 생성하거나 갱신합니다.

뷰(view)

inputbox, checkbox, textarea 등 사용자 인터페이스 요소로

모델이 가지고 있는 정보를 따로 저장하지 않아야 하며 단순히 UI 적으로 화면에 표시하는 정보만 가지고 있어야 한다.

그리고 변경이 일어나면 컨트롤러에 이를 전달해야 한다.

 

컨트롤러

하나 이상의 모델과 하나 이상의 뷰를 잇는 다리 역할을 하며 이벤트 등 메인 로직을 담당한다. 

모델과 뷰의 생명주기도 관리한다.

모델이나 뷰의 변경 통지를 받으면 이를 해석하여 각각의 구성 요소에 해당 내용에 대해 통지한다.

1.1.9 MVP 패턴

MVC 패턴으로부터 파생되어

MVC에서 C에 해당하는 컨트롤러가 프레젠터(presenter)로 교체된 패턴.

뷰와 프레젠터는 일대일 관계로 강한 결합을 갖는다. 

 

UI(View)와 로직(Model)을 분리하고,

다른 객체 Presenter 를 통해 서로 간 상호작용 할 수 있기 때문에 의존성을 최소화 할 수 있다. 

1.1.10 MVVM 패턴

MVC의 C에 해당하는 컨트롤러가 뷰모델(view model)로 바뀐 패턴.

• 뷰모델은 뷰를 더 추상화한 계층
• 커맨드와 데이터 바인딩을 가짐
• 뷰와 뷰모델 사이의 양방향 데이터 바인딩을 지원
• UI를 별도의 코드 수정 없이 재사용 가능
• 단위 테스팅이 용이

함수를 사용하지 않고 값 대입만으로도 변수가 변경되며 

양방향 바인딩, html을 토대로 컴포넌트를 구축할 수 있다.

재사용 가능한 컴포넌트 기반으로 UI를 구축할 수 있으며 BMW, 구글, 루이비통 등에서 사용하고 있다.