디자인 패턴

싱글톤 패턴

싱글톤 패턴은 하나의 클래스에 하나의 인스턴스만 가지는 패턴이다. 하나의 인스턴스를 만들어 놓고 해당 인스턴스를 다른 모듈들이 공유하며 사용하기 때문에 인스턴스를 생성할 때 드는 비용이 줄어든다. 하지만 의존성이 높아진다는 단점이 있다.

싱글톤 패턴은 데이터베이스 연결 모듈에 많이 쓰인다.

const URL = 'url'
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

위처럼 DB.instance라는 하나의 인스턴스를 기반으로 a, b를 생성하는 것을 볼 수 있다.

 

싱글톤 패턴에는 단점이 존재하는데 바로 TDD(Test Driven Development)를 할 때 걸림돌이 된다. TDD를 할 때 테스트가 독립적이어야 하며 테스트를 어떤 순서로든 실행 할 수 있어야 한다. 하지만 싱글톤 패턴은 미리 생성된 하나의 인스턴스를 기반으로 구현하는 패턴이므로 각 테스트마다 '독립적인' 인스턴스를 만들기가 어렵다.

 

또한 싱글톤 패턴은 모듈 간의 결합을 강하게 만들 수 있다. 이때 의존성 주입(DI, Dependency Injection)을 통해 해결할 수 있다. 여기서 의존성이란 종속성이라고도 하며 A가 B에 의존성이 있다는 것은 B의 변경 사항에 대해 A 또한 변해야 된다는 것을 의미한다.

의존성 주입(DI, Dependency Injection): 메인 모듈이 직접 다른 하위 모듈에 대한 의존성을 주기보다는 중간에 의존성 주입자(Dependency injector)가 이 부분을 가로채 메인 모듈이 간접적으로 의존성을 주입하는 방식이다. 이를 통해 메인 모듈은 하위 모듈에 대한 의존성이 떨어지게 된다. 이를 "디커플링이 된다"라고도 한다.

의존성 주입에도 장단점이 존재하는데 우선 모듈들을 쉽게 교체할 수 있는 구조가 되어 테스팅하기 쉽고 마이그레이션하기도 수월하다. 하지만 모듈들이 분리되면서 클래스 수가 늘어나 복잡성이 증가될 수 있다.

 

 

팩토리 패턴

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

상위 클래스와 하위 클래스가 분리되고 객체 생성 로직이 따로 떼어져 있기 때문에 코드를 리팩토링하더라도 한 곳만 고칠 수 있게 되니 유지 보수성이 증가된다.

아래 코드를 확인하면 이해하기 좀 더 편하다.

class Latte {
    constructor() {
        this.name = "latte"
    }
}
class Espresso {
    constructor() {
        this.name = "Espresso"
    }
} 

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

CoffeeFactory라는 상위 클래스가 중요한 뼈대를 결정하고 하위 클래스인 LatteFactory가 구체적인 내용을 결정하고 있습니다. 이것은 의존성 주입이라고도 볼 수 있다. CoffeeFactory에서 LatteFactory의 인스턴스를 생성하는 것이 아닌 LatteFactory에서 생성한 인스턴스를 CoffeeFactory에 주입하고 있기 때문이다.

 

전략 패턴

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

예를 들어서 어떤 물건을 온라인에서 주문할때 여러 결제 방법으로 결제할 수 있습니다. 이때 결제 방식의 '전략'만을 바꾸어서 결제하는 것을 구현할 수 있습니다.

컨텍스트: 프로그래밍에서 컨텍스트는 상황, 맥락, 문맥을 의미하며 개발자가 어떠한 작업을 완료하는데 필요한 모든 관련 정보를 말한다.

 

옵저버 패턴

옵저버 패턴은 주체가 어떤 객체의 상태 변화를 관찰하다가 상태 변화가 있을 때마다 메서드 등을 통해 옵저버 목록에 있는 옵저버들에게 변화를 알려주는 디자인 패턴이다. 여기서 주체란 객체의 상태 변화를 보고 있는 관찰자이고 옵저버들이란 이 객체 상태 변화에 따라 전달되는 메서드 등을 기반으로 '추가 변화 사항'이 생기는 객체들을 의미한다. 또한 주체와 객체를 따로 두지 않고 상태가 변경되는 객체를 기반으로 구축되기도한다.

옵저버 패턴을 활용한 서비스의 대표적인 예로 트위터가 있다. 그래서 어떤 사람인 주체를 '팔로우'했다면 주체가 포스팅을 올리게 되면 알림이 '팔로워'에게 가게 되는 것이다.

 

프록시 패턴

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

캐싱: 캐시 안에 정보를 담아두고, 캐시 안에 있는 정보를 요구하는 요청에 대해 원격 서버에 요청하지 않고 캐시 안에 있는 데이터를 활요하는 것

- 프록시 서버

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

 

이터레이터 패턴

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

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임에도 똑같은 이터레이터 프로토콜을 통해 순회하는 것을 볼 수 있다.

이터레이터 프로토콜: 이터러블한 객체를 순회할 때 쓰이는 규칙

 

노출모듈 패턴

노출모듈 패턴은 즉시 실행 함수를 통해 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

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

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

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

즉시 실행 함수: 함수를 정의하자마자 바로 호출하는 함수

 

MVC 패턴

MVC 패턴은 모델, 뷰, 컨트롤러로 이루어진 디자인 패턴이다. 애플리케이션의 구성 요소를 세 가지 역할로 구분하여 개발 프로세스에서 각각의 구성 요소에만 집중해서 개발할 수 있다. 재사용성과 확장성이 용이하다는 장점이 있고 애플리케이션이 복잡해질수록 모델과 뷰의 관계가 복잡해지는 단점이 있다.

 

- 모델

모델은 애플리케이션의 데이터인 데이터베이스, 상수, 변수 등을 뜻한다.

- 뷰

inputbox, checkbox, textarea 등 사용자 인터페이스 요소를 나타낸다.

-컨트롤러

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

 

MVP 패턴

MVP 패턴은 MVC 패턴으로부터 파생되었으며 MVC에서 C에 해당하는 컨트롤러가 프레젠터로 교체된 패턴이다. 뷰와 프레젠터는 일대일 관계이기 때문에 MVC보다 더 강한 결합을 지닌 디자인 패턴이라고 볼 수 있다.

 

MVVM 패턴

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

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