디자인 패턴 (design pattern)에 대해 알아보자.

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

1.1.1 싱글톤 패턴

하나의 클래스에 오직 하나의 인스턴스만 가지는 패턴이다. 보통 데이터베이스 연결 모듈에 많이 사용된다.

장점

• 하나의 인스턴스를 만들어 두고 다른 모듈이 공유하며 사용하기 때문에 인스턴스 생성시 드는 비용이 감소한다.
  

단점

• TDD(Test Driven Development, 테스트 주도 개발)이 어렵다.
• 의존성이 높아져서 모듈 간의 결합을 강하게 만들 수 있다. 이에 따라 의존성 주입을 통해 모듈 간의 결합을 조금 더 느슨하게 만들 수 있다.
  

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

   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

1.1.2 팩토리 패턴

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

ex) 레시피라는 하위 클래스가 컨테이너 벨트를 통해 전달되고 상위 클래스인 공장에서 이를 토대로 생산함

장점

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

    // 레시피
    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 }
    
    // 바리스타 공장 - 상위 클래스로 중요한 뼈대를 결정
    // 이는 의존성 주입에 해당된다. CoffeeFactory에서 LatteFactory의 인스턴스를 생성하는 것이 아닌 LatteFactory에서 생성한 인스턴스를 CoffeeFactory에 주입하고 있기 때문이다.
    
    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()

1.1.3 전략 패턴

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

활용예시

• passport.js

1.1.4 옵저버 패턴

주체(객체의 상태변화를 보고 있는 관찰자)가 어떤 객체의 상태 변화를 관찰하다가 상태 변화가 있을 때마다 메서드 등을 통해 옵저버 목록에 있는 옵저버들(객체의 상태 변화에 따라 추가 변화 사항이 생기는 객체들)에게 변화를 알려주는 디자인 패턴이다.

또는 주체와 객체를 따로 두지 않고 상태가 변경되는 객체를 기반으로 구축하기도 한다. 주로 이벤트 기반 시스템이나 MVC 패턴에도 사용된다.

    // 프록시 객체(다자인 패턴 중 하나인 프록시 패턴이 담긴 객체)를 통해 옵저버 패턴을 구현할 수 있다.
    // 프록시 객체는 어떠한 대상의 기본적인 동작의 작업을 가로챌 수 있는 객체를 의미하며 두 개의 매개변수를 가진다. `target`은 프록시할 대상이며 `handler`는 target의 동작을 가로채고 어떠한 동작을 할 것인지가 설정되어 있는 함수이다.
    
    function createReactiveObject(target) {
        // 프록시 객체 선언
        const proxy = new Proxy(target, {
            // 프록시 객체의 set()함수는 속성에 대한 접근을 가로챈다.
    				// 이를 통해 형규라는 속성이 변하는 것을 감시할 수 있다.
            set(obj, prop, value) {
                if (value !== obj[prop]) {
                    const prev = obj[prop]
                    obj[prop] = value
                    console.log(`${prop}가 [${prev}] >> [${value}] 로 변경되었습니다`)
                }
                return true
            }
        })
        return proxy
    }
    const a = {
        "형규": "솔로"
    }
    const b = createReactiveObject(a)
    b.형규 = "솔로"
    b.형규 = "커플"
    // 형규가 [솔로] >> [커플] 로 변경되었습니다
    b.형규 = "솔로"
    // 형규가 [커플] >> [솔로] 로 변경되었습니다

활용예시

• vue.js 3.0에서 ref나 reactive로 정의하면 해당 값이 변경되었을 때 자동으로 DOM에 있는 값 변경

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

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

프록시 서버란?

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

활용예시

• 프록시 서버로 쓰는 nginx와 CloudFlare

1.1.6 이터레이터 패턴

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

    const mp = new Map()
    mp.set('a', 1)
    mp.set('b', 2)
    mp.set('c', 3)
    
    const st = new Set()
    st.add(1)
    st.add(2)
    st.add(3)
    
    for (let a of mp) console.log(a) // [ 'a', 1 ] [ 'b', 2 ] [ 'c', 3 ]
    for (let a of st) console.log(a) // 1 2 3

1.1.7 노출모듈 패턴

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

    const pukuba = (() => {
        // private
        const a = 1
        const b = () => 2
        // public
        const public = {
            c: 2,
            d: () => 3
        }
        return public
    })()
    console.log(pukuba) // // { c: 2, d: [Function: d] }
    console.log(pukuba.a) // undefined

활용예시

• 자바스크립트의 모듈 방식으로 CJS(commonJS) 모듈 방식

1.1.8 MVC 패턴

모델(Model), 뷰(View), 컨드롤러(Controller)로 이루어진 디자인 패턴이다. 애플리케이션의 구성 요소를 세 가지 역할로 구분하여 개발 프로세스에서 각각의 구성 요소에만 집중하여 개발할 수 있다.

• 모델
  

애플리케이션의 데이터인 데이터베이스, 상수, 변수 등을 의미한다. 예를 들어 사각형 모양의 박스 안에 글자가 들어 있다면 사각형 모양의 박스 위치 정보, 글자 내용, 글자 위치 등에 관한 정보를 모두 가지고 있어야 한다. 뷰에서 데이터를 생성하거나 수정하면 컨트롤러를 통해 모델을 생성하거나 갱신한다.

• 뷰
  

inputbox checkbox 등 사용자 인터페이스 요소를 나타낸다. 즉, 모델을 기반으로 사용자가 볼 수 있는 화면을 의미한다. 모델이 가지고 있는 정보를 따로 저장하지 않아야 하며 단순히 사각형 모양 등 화면에 표시하는 정보만 가지고 있어야 한다. 또한 변경이 일어나면 이를 컨트롤러에 전달해야 한다.

• 컨트롤러
  

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

장점

• 재사용성과 확장성이 용이하다.
  

단점

• 애플리케이션이 복잡할 수록 모델과 뷰의 관계가 복잡해진다.
  

활용예시

• 스프링

1.1.9 MVP 패턴

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

1.1.10 MVVM 패턴

MVC의 C에 해당하는 컨트롤러가 뷰모델로 바뀐 패턴이다. 뷰모델은 뷰를 더 추상화한 계층이며 MVVM 패턴은 MVC 패턴과 다르게 커맨드와 데이터 바인딩을 가지는 것이 특징이다. 뷰와 뷰모델 사이에 양방향 데이터 바인딩을 지원한다.

장점

• UI를 별도의 코드 수정 없이 재사용할 수 있다.
• 단위 테스팅하기 쉽다.

활용예시

• Vue.js

면접을 위한 CS 전공지식 노트를 참고하였습니다.