디자인 패턴

디자인 패턴이란?

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

즉, 객체 지향 프로그래밍을 설계 할 때 발생할 수 있는 문제들을 피하기 위해서 정해놓은 패턴입니다. 여러 사람과 협업을 진행할 때 다른 사람들이 작성한 코드를 이해하는 것은 굉장히 어렵고 힘든 일입니다. 이런 코드를 이해하고 수정하거나 새로운 기능을 추가해야 할 때 의도치 않은 버그나 결과가 발생할 수 있습니다. 이 때 발생할 수 있는 시간과 예산의 낭비를 줄여줄 수 있는 의사소통 수단의 일종이 바로 디자인 패턴입니다.

디자인 패턴의 종류

일반적으로 디자인 패턴은 몇 가지 범주에 맞춰 분류하고 있습니다. 그 중 가장 많이 분류되는 방법이 패턴 카탈로그에서 제시한 생성, 행동, 구조라는 3가지 범주에 따라 나누는 방법입니다. 패턴을 범주별로 나누면 같은 그룹에 속한 패턴끼리 비교하기 쉽기 때문에 확실히 분류는 필요하다고 생각합니다. 다만, 중요한 것은 패턴을 제대로 이해하고, 여러 패턴 사이의 관계를 확실히 파악하는 것이 중요하다고 생각합니다. 그래서 저는 현재 보편적으로 사용되는 디자인 패턴들을 소개한 후 현재 프론트엔드에서 가장 인기있는 디자인 패턴 중 하나인 아토믹 디자인 패턴에 대해서도 소개하고자 합니다.

1. 싱글톤 패턴(Singleton Pattern)

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

자바스크립트에서는 {} 또는 new Object로 객체를 생성하게 되면 다른 어떤 객체와 다르기 때문에 이 것만으로도 싱글톤 패턴을 구현할 수 있습니다.

const obj = {
	a:27
}
const obj2 = {
	a:27
}
console.log(obj === obj2)
// false

이렇게 두 obj와 obj2는 다른 인스턴스를 가지게 됩니다.

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

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

위 코드에서 a, b는 하나의 인스턴스를 가지게 됩니다. 이렇게 하나의 인스턴스를 다른 모듈들이 공유하며 사용할 수 있으므로 비용이 줄어든다는 장점이 있지만, 의존성이 높아진다는 단점도 있습니다. 특히, TDD를 진행할 때 단위 테스트로 진행하는 경우가 많은데, 서로 독립적인 인스턴스 생성이 어렵기 때문에 단위테스트를 진행하기 어렵다는 문제가 있습니다.

이러한 의존성 문제의 경우 의존성 주입을 통해 해결할 수 있습니다. 메인 모듈이 직접 하위 모듈에 대한 의존성을 주지 않고 의존성 주입자를 중간에 생성하여 메인모듈이 하위 모듈에 대한 의존성이 떨어지게 되는 디커플링이 됩니다. 단, 의존성 주입을 할 때는 상위 모듈은 하위 모듈에서 어떠한 것도 가져오지 않아야 하고 둘 다 추상화에 의존해야 하며, 이 때 추상화는 세부사항에 의존하지 말아야 한다는 원칙을 지켜야 합니다.

참고자료

면접을 위한 cs 전공지식노트(주홍철)