디자인 패턴이란?

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

디자인 패턴의 종류

- 크게 생성(Creational), 구조(Structural), 행위(Behavioral) 3가지로 분류됩니다.

- GoF(Gang of Four) 디자인 패턴이라고 불리며, 에리히 감마(Erich Gamma), 리차드 헬름(Richard Helm), 랄프 존슨(Ralph Johnson), 존 블리시디스(John Vissides) 4명의 유명한 개발자들에 의해 고안되었는데 이 4명을 the Gang of Four 또는 GoF라고 부릅니다.



싱글톤 패턴 (Singleton Pattern)

싱글톤 패턴 예시 이미지
이미지 출저 - Refactoring.Guru

- 특정 클래스에 객체 인스턴스가 하나만 만들어지도록 해주는 패턴입니다.

- 전역 변수를 사용할 때와 마찬가지로 객체 인스턴스를 어디서든지 액세스 할 수 있게 만들 수 있습니다.

- 클래스 인스턴스를 하나만 만들고 그 인스턴스로의 전역 접근을 제공합니다.


👍 장점

- 하나의 인스턴스를 만들어 놓고 다른 모듈들이 공유하며 사용하기 때문에, 인스턴스를 생성할 때 드는 비용이 줄어듭니다.


🥲 단점

- 의존성이 높아지고 모듈간의 결합을 강하게 만들수 있습니다.

- 독립적인 인스턴스를 만들기가 어렵기 때문에 TDD(Test Driven Development)를 하는데 있어서 걸림돌이 될 수 있습니다.

팩토리 패턴 (Factory Pattern)

- 부모 클래스에서 객체들을 생성할 수 있는 인터페이스를 제공하지만, 자식 클래스들이 생성될 객체들의 유형을 변경할 수 있도록 하는 생성 패턴입니다.


👍 장점

- 상위 클래스와 하위 클래스가 분리되기 때문에 느슨한 결합을 가지며 더 많은 유연성을 갖게 됩니다.

- 객체 생성 로직이 따로 떼어져 있어서 코드의 유지 보수성이 증가됩니다.


🥲 단점

- 패턴을 구현하기 위해 많은 새로운 자식 클래스들을 도입해야 하므로 코드가 더 복잡해질 수 있습니다.

전략 패턴 (Strategy Pattern)

- 정책 패턴(policy pattern)이라고도 하며, 객체의 행위를 바꾸고 싶은 경우 전략이라고 부르는 캡슐화한 알고리즘을 '컨텍스트' 안에서 바꿔주면서 상호 교체가 가능하게 만드는 패턴입니다.


👀 컨텍스트

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


옵저버 패턴 (Observer Pattern)

- 주체가 어떤 객체(subject)의 상태 변화를 관찰하다가 상태 변화가 있을 때마다 메서드 등을 통해 옵저버 목록에 있는 옵저버들에게 변화를 알려주는 디자인 패턴입니다.


- 자바스크립트에서는 프록시 객체를 통해서 구현할 수 있습니다.


프록시 패턴 (Proxy Pattern)

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


- 객체의 속성, 변환 등을 보완하며 보안, 데이터 검증, 캐싱, 로깅에 사용되며, '프록시 서버'로도 활용됩니다.


👀 프록시 서버(proxy server)

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

이터레이터 패턴 (Iterator Pattern)

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


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

노출모듈 패턴 (Revealing Module Pattern)

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


- 자바스크립트는 전역 범위에서 스크립트가 실행되기 때문에 노출모듈 패턴을 통해 private, public 접근 제어자를 구현하기도 합니다.

MVC 패턴

싱글톤 패턴 예시 이미지 이미지 출저 - MDN Web Docs (MVC)

- 모델(Model), 뷰(View), 컨트롤러(Controller)로 이루어진 디자인 패턴입니다.


👍 장점

- 재사용성과 확장성이 용이합니다.

- 개발 프로세스에서 각각의 구성 요소에만 집중해서 개발할 수 있습니다.


🥲 단점

- 애플리케이션이 복잡해질수록 모델과 뷰의 관계가 복잡해집니다.

MVP 패턴

싱글톤 패턴 예시 이미지

- MVC 패턴으로부터 파생되었으며 MVC에서 C에 해당하는 컨트롤러가 프레젠터(presenter)로 교체돈 패턴입니다.


- 뷰와 프레젠터는 일대일 관계이기 떄문에 MVC 패턴보다 더 강한 결합을 지닌 디자인 패턴이라고 볼 수 있습니다.

MVVM 패턴

싱글톤 패턴 예시 이미지

- MVC의 C에 해당하는 컨트롤러가 뷰모델(View Model)로 바뀐 패턴입니다.


- 뷰모델은 뷰를 더 추상화한 계층이며, MVC 패턴과는 다르게 커맨드와 데이터 바인딩을 가지는 것이 특징입니다.


👍 장점

- 뷰와 뷰모델 사이의 양방향 데이터 바인딩을 지원하기 때문에 UI를 별도의 코드 수정 없이 재사용할 수 있습니다.

- 단위 테스팅하기 쉽습니다.


🥲 단점

- 간단한 UI에서 오히려 ViewModel을 설계하는 어려움이 있을 수 있습니다.

- 데이터 바인딩이 필수적으로 요구됩니다.