디자인패턴

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

1_ 싱글톤 패턴

하나의 클래스에 오직 하나의 인스턴스만 가지는 패턴

하나의 클래스를 기반으로 여러 개의 개별적인 인스턴스를 만들 수 있지만, 그렇게 하지 않고 하나의 클래스를 기반으로 단 하나의 인스턴스를 만들어 이를 기반으로 로직을 만드는 데 쓰이며, 데이터베이스 연결 모듈에 많이 사용함
장점 : 하나의 인스턴스를 만들어 놓고 해당 인스턴스를 다른 모듈들이 공유하며 사용하기 때문에 인스턴스를 생성할 때 드는 비용이 줄어듦
단점 : 의존성이 높아짐

const obj = {
    a: 27
}
const obj2 = {
    a: 27
}
console.log(obj === obj2)
// false
// obj1과 obj2는 다른 인스턴스를 가짐

실제 싱클톤 패턴 코드

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(Test Driven Development)`의 걸림돌이 된다. TDD를 할 때 단위 테스트를 주로 하는데, 단위 테스트는 테스트가 서로 독립적이어야 하며 테스트를 어떤 순서로든 실행할 수 있어야 한다. 하지만 싱글톤 패턴은 미리 생성된 하나의 인스턴스를 기반으로 구현하는 패턴이라 각 테스트마다 '독립적인' 인스턴스를 만들기 어렵다.

의존성 주입

싱글톤 패턴은 사용하기가 쉽고 굉장히 실용적이지맞 모듈 간의 결합을 강하게 만들 수 있다는 단점이 있다. 이때 의존성 주입(DI, Depnecy Injection)을 통해 모듈 간의 결합을 조금 더 느슨하게 만들어 해결할 수 있다.

(의존성이란 종속성이라고도 하며 A가 B에 의존성이 있다는 것은 B의 변경 사항에 대해 A도 변해야 함을 의미)

장점

모듈들을 쉽게 주입할 수 있는 구조가 되어 테스팅하기 쉽고 마이그레이션하기도 수월하다. 또, 구현할 때 추상화 레이어를 넣고 이를 기반으로 구현체를 넣어 주기 때문에 애플리케이션 의존성 방향이 일관되고, 애플리케이션을 쉽게 추론할 수 있으며, 모듈 간의 관걔들이 조금 더 명확해진다.

단점

모듈들이 더욱더 분리되므로 클래스 수가 늘어나 복잡성이 증가될 수 있고 약간의 런타임 페널티가 생기기도 한다.

의존성 주입 원칙

"상위 모듈은 하위 모듈에서 어떠한 것도 가져오지 않아야 한다. 또한, 둘 다 추상화에 의존해야 하며, 이때 추상화는 세부 사항에 의존하지 말아야 한다"

2_ 팩토리 패턴

객체를 사용하는 코드에서 객체 생성 부분을 떼어내 추상화한 패턴이자 상속 관계에 있는 두 클래스에서 상위 클래스가 중요한 뼈대를 결정하고, 하위 클래스에서 객체 생성에 관한 구체적인 내용을 결정하는 패턴

상위 클래스와 하위 클래스가 분리되기 때문에 느슨한 결합을 가지며 상위 클래스에서는 인스턴스 생성 방식에 대해 전혀 알 필요가 없기 때문에 더 많은 유연성을 갖게 된다. 그리고 객체 생성 로직이 따로 떼어져 있기 때문에 코드를 리팩토링하더라도 한 곳만 고칠 수 있게 되어 유지 보수성이 증가된다.

class Cafe {
    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 Cafe{
    static createCoffee() {
        return new Latte()
    }
}
class EspressoFactory extends Cafe{
    static createCoffee() {
        return new Espresso()
    }
}
const factoryList = { LatteFactory, EspressoFactory } 


const main = () => {
    // 라떼 커피를 주문한다.  
    const coffee = Cafe.createCoffee("LatteFactory")  
    // 커피 이름을 부른다.  
    console.log(coffee.name) // latte
}
main()

=> Cage라는 상위 클래스가 중요한 뼈대를 결정하고 하위 클래스인 LatteFactory가 구체적인 내용 결정

*의존성 주입이라고 볼 수 있다* => LatteeFactory에서 생성한 인스턴스를 Cafe에 주입하고 있기 때문

3_ 전략 패턴

정책 패턴이라고도 하며, 객체의 행위를 바꾸고 싶은 경우 '직접' 수령하지 않고 전략이라고 부르는 '캡슐화한 알고리즘'을 컨텍스트 안에서 바꿔주면서 상호 교체를 가능하게 만드는 패턴

ex. kakao, google 등의 OAuth 인증

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 라는 메서드에 '전략'을 매개변수로 넣어 로직 수행

4_ 옵저버 패턴

주체가 어떤 객체의 상태 변화를 관찰하다가 상태 변화가 있을 때마다 메서드 등을 통해 옵저버 목록에 있는 디자인 패턴 (주체 - 객체의 상태 변화를 보고 있는 관찰자, 옵저버 - 이 객체의 상태 변화에 따라 전달되는 메서드 등을 기반으로 '추가 변화 사항' 이 생기는 객체들)

ex. 트위터 (팔로워들에게 팔로우 알림이 가는 것)

**MVC 패턴에도 활용**

MVC(Model-View-Controller)로 주체라고 볼 수 있는 모델에 변경 사항이 생기면 update() 메서드로 옵저버인 뷰에 알려주고 이를 기반으로 컨트롤러가 작동

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

프록시 객체 : 어떠한 대상의 기본적인 동작(속성 접근, 할당, 순회, 열거, 함수 호출 등)의 작업을 가로챌 수 있는 객체를 뜻하며, 자바 스크립트에서 프록시 객체는 두 개의 매개변수를 가짐

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

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() 함수를 통해 속성에 대한 접근을 `가로채`서 빈이라는 속성이 솔로에서 커플이 되는 것을 감시할 수 있다.

=> vue.js 프레임워크에서 ref나 reactive로 정의하면 해당 값이 변경되었을 때 자동으로 DOM에 있는 값이 변경되는 것도 프록시 객체를 이요한 옵저버 패턴으로 구현한 것

📝*용어정리*

*DOM(Document Object Model* : 문서 객체 모델을 말하며, 웹 브라우싱의 화면을 이루고 있는 요소들을 지칭

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

**프록시 패턴**

대상 객체에 접근하기 전 그 접근에 대한 흐름을 가로채 대상 객체 앞단의 인터페이스 역할을 하는 디자인 패턴

이를 통해 객체의 속성, 변환 등을 보완하며 보안, 데이터 검증, 캐싱, 로깅에 사용함

**프록시 서버**

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

ex) nginx

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

CloudFlare

전 세계적으로 분산된 서버가 있고 이를 통해 어떠한 시스템의 콘텐츠 전달을 빠르게 할 수 있는 CDN 서비스

장점 - DDOS 공격 방어, HTTPS 구축

**CORS와 프로느엔드의 프록시 서버**

CORS(Cross-Origin Resource Sharing)는 서버가 웹 브라우저에서 리소스를 로드할 때 다른 오리진을 통해 로드하지 못하게 하는 HTTP 헤더 기반 메커니즘

프론트엔드 개발 시 프론트엔드 서버를 만들어서 백엔드 서버와 통신할 대 주로 CORS 에러를 마주치는데, 이를 해결하기 위해 프론트엔드에서 프록시 서버를 만들기도 한다.
예를 들어, 프론트엔드에서는 3000포트로 테스팅 하고 백엔드 서버에서는 8080 포트라면 포트 번호가 다르기 때문에 CORS 에러가 낱타난다. 이때 프록시 서버를 둬서 프론트엔드 서버에서 요청되는 origin을 8080으로 바꾸는 것이다.

📝*용어정리*

*CDN*(Content Delivery Network) : 각 사용자가 인터넷에 접속하는 곳과 가까운 곳에서 콘텐츠를 캐싱 또는 배포하는 서버 네트워크를 말함

*origin* : 프로토콜과 호스트 이름, 포트의 조합 ex) http://localhost:8080/auth 에서 http://localhost:8080 뜻함

6_ 이터레이터 패턴

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

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

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

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

7_ 노출모듈 패턴

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

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

const pukuba = (() => {
    const a = 1
    const b = () => 2
    // a와 b는 다른 모듈에서 사용할 수 있는 변수나 함수인 private 범위를 가짐
    const public = {
        c : 2, 
        d : () => 3
    }
    return public 
    // c와 d는 다른 모듈에서 사용할 수 있는 변수나 함수인 public 범위를 가짐
})() 
console.log(pukuba)
console.log(pukuba.a)
// { c: 2, d: [Function: d] }
// undefined

📝*용어정리*

*public* : 클래스에 정의된 함수에서 접근 가능하며 자식 클래스와 외부 클래스에서 접근 가능한 범위

*protected* : 클래스에 정의된 함수에서 접근 가능, 자식 클래스에서 접근 가능하지만 외부 클래스에서 접근 불가능한 범위

*private* : 클래스에 정의된 함수에서 접근 가능하지만 자식 클래스와 외부 클래스에서 접근 불가능한 범위

*즉시 실행 함수* : 함수를 정의하자마자 바로 호출하는 함수, 초기화 코드, 라이브러리 내 전역 변수의 충돌 방지 등에 사용

8_ MVC 패턴

Model, View, Controller로 이루어진 디자인 패턴

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

장점 - 재사용성과 확장성이 용이하다

단점 - 애플리케이션이 복잡해질수록 모델과 뷰의 관계과 복잡해진다

*Model* : 애플리케이션의 데이터인 데이터베이스, 상수, 변수 등을 뜻함

*View* : inputbox, checkbox, textarea 등 사용자 인터페이스 요소를 나타냄, 모델을 기반으로 사용자가 볼 수 있는 화면을 뜻함

=> 모델이 가지고 있는 정보를 따로 저장하지 않아야 하며 단순히 사각형 모양 등 화면에 표시하는 정보만 가지고 있어야 한다. 또, 변경이 일어나면 컨트롤러에 이를 전달해야 한다.

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

ex. 리액트

유저 인터페이스를 구축하기 위한 라이브러리, '가상 DOM'을 통해 실제 DOM을 조작하는 것을 추상화해서 성능을 높임

특성 - 불변성

=> state는 setState를 통해서만 수정이 가능하고, props를 기반으로 해서 만들어지는 컴포넌트인 pureComponent 가 있다. 단방향 바인딩이 적용되어 있고, 자유도가 높고, 메타(페이스북)가 운영하고 있으며 넷플릭스, 트위터, 드롭박스 등에서 사용된다.

9_ MVP 패턴

MVC에서 파생되었으며 controller가 presenter로 교체된 패턴

view와 presenter는 일대인 관계이기 때문에 MVC 패턴보다 더 강한 결합을 지닌 디자인 패턴이라고 볼 수 있다.

10_ MVVM 패턴

MVC의 controller가 view model로 바뀐 패턴

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

ex) Vue

Vue.js 는 반응형이 특징인 프론트엔드 프레임 워크

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

📝*용어정리*

*커맨드* : 여러 가지 요소에 대한 처리를 하나의 액션으로 처리할 수 있게 하는 기법

*데이터 바인딩* : 화면에 보이는 데이터와 웹 브라우저의 메모리 데이터를 일치시키는 기법으로, 뷰모델을 변경하면 뷰가 변경된다.

초보개발자

1. 디자인패턴

디자인패턴

1_ 싱글톤 패턴

의존성 주입

2_ 팩토리 패턴

3_ 전략 패턴

passport의 전략 패턴

4_ 옵저버 패턴

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

ex) nginx

CloudFlare

6_ 이터레이터 패턴

7_ 노출모듈 패턴

8_ MVC 패턴

ex. 리액트

9_ MVP 패턴

10_ MVVM 패턴

ex) Vue

티스토리툴바