디자인 패턴

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

1. 싱글톤 패턴 (singleton pattern)

• 하나의 클래스에 오직 하나의 인스턴스만 가지는 패턴
• 하나의 인스턴스를 만들어 놓고, 해당 인스턴스를 다른 모듈들이 공유하며 사용하기 때문에 인스턴스를 생성할 때 드는 비용이 줄어듬(장점)! 하지만 의존성도 높아짐(단점)!
• 예) 데이터베이스 연결 모듈

class Singleton {
  constructor() {
    if(!Singleton.instance) {
      Singleton.instance = this
    }
    return Singleton.instance
  }
  getInstance() {
    return this.instance
  }
}

const a = new Singleton()
const b = new Sintleton()
console.log(a === b) // true

// 데이터베이스 연결 모듈
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

2. 팩토리 패턴 (factory pattern)

• 객체를 사용하는 코드에서 객체 생성 부분을 떼어내 추상화 패턴이자 상속 관계에 있는 두 클래스에서 상위 클래스가 중요한 뼈대를 결정하고, 하위 클래스에서 객체 생성에 관한 구체적인 내용을 결정하는 패턴
• 상위 클래스와 하위 클래스가 분리되기 때문에 느슨한 결합을 가짐
• 상위 클래스에서는 인스턴스 생성 방식에 대해 전혀 알필요가 없음 (유연성!)
• 객체 생성 로직이 따로 떼어져 있기 때문에 코드를 리팩터링하더라도 한 곳만 고칠 수 있게 되니 유지 보수성 증가

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()

3. 전략 패턴 (strategy pattern) == 정책 패턴 (policy pattern)

컨텍스트

• 상황, 맥락, 문맥을 의미
• 개발자가 어떠한 작업을 완료하는 데 필요한 모든 관련 정보를 말함

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

4. 옵저버 패턴 (observer pattern)

• 주체가 어떤 객체(subject)의 상태 변화를 관찰하다가 상태 변화가 있을 때마다 메서드 등을 통해 옵저버 목록에 있는 옵저버들에게 변화를 알려주는 디자인 패턴
• 주체: 객체의 상태 변화를 보고 있는 관찰자
• 옵저버: 객체의 상태 변화에 따라 전달되는 메서드 등을 기반으로 "추가 변화 사항"이 생기는 객체들을 의미
• 주로 이벤트 기반 시스템에 사용하며 MVC(Model-View-Controller) 패턴에도 사용됨
  • 예) 주체라고 볼 수 있는 모델에서 변경 사항이 생겨 update() 메서드로 옵저버인 뷰에 알려주고 이를 기반으로 컨트롤러 등이 작동

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

• 프록시 패턴 (proxy pattern)은 대상 객체(subject)에 접근하기 전 그 접근에 대한 흐름을 가로채 해당 접근을 필터링하거나 수정하는 등의 역할을 하는 계층에 있는 디자인 패턴
• 프록시 서버 (proxy server)는 서버와 클라이언트 사이에서 클라이언트가 자신을 통해 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해주는 컴퓨터 시스템이나 응용 프로그램

6. 이터레이터 패턴 (iterator pattern)

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

7. 노출모듈 패턴 (revealing module pattern)

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

8. MVC 패턴 (Model, View, Controller 패턴)

9. MVP 패턴

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

10. MVVM 패턴

• MVC의 C에 해당하는 컨트롤러가 뷰모델(view model)로 바뀐 패턴
• 뷰모델은 뷰를 더 추상화한 계층, MVC 패턴과는 다르게 커맨드와 데이터 바인딩을 가지는 것이 특징
• 뷰와 뷰모델 사이의 양방향 데이터 바인딩을 지원하며 UI를 별도의 코드 수정 없이 재사용할 수 있고 단위 테스팅하기 쉽다는 장점이 있음

데이터 바인딩
화면에 보이는 데이터와 웹 브라우저의 메모리 데이터를 일치시키는 기법

Reference

• 책/면접을 위한 CS 전공노트/주홍철(http://www.yes24.com/Product/Goods/108887922)
• https://github.com/wnghdcjfe/csnote