[CS] 디자인 패턴 종류와 간단한 개념 정리

해당 포스팅은 <면접을 위한 CS 전공지식 노트> 를 읽고 정리한 내용입니다.

 

디자인 패턴이란 프로그램을 설계할 때 발생했던 문제점들을 객체 간의 상호 관계 등을 이용해 해결할 수 있도록 하나의 '규약' 형태로 만들어 놓은 것이다. 디자인 패턴의 종류에는 싱글톤 패턴, 팩토리 패턴, 전략 패턴, 옵저버 패턴, 프록시 패턴, 이터레이터 패턴, 노출모듈 패턴, MVC 패턴, MVP 패턴, MVVM 패턴 등이 있다.

싱글톤 패턴

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

 

싱글톤 패턴은 하나의 인스턴스를 만들어 놓고 해당 인스턴스를 다른 모듈들이 공유하며 사용하는 패턴이다. 데이터베이스 연결 모듈에 많이 쓰인다.

 

싱글톤 패턴의 장단점은 다음과 같다.

• 장점 : 사용하기 쉬움, 인스턴스 생성 시 비용 절감
• 단점 : 의존성이 높아짐, TDD를 하기 어려움(각 테스트마다 독립적인 인스턴스를 만들기 어려움)

싱글톤 패턴은 단순하고 실용적이지만 모듈 간의 결합을 강하게 만들 수 있다는 단점이 있다. 이때 의존성 주입(DI, Dependency Injection)을 통해 모듈 간의 결합을 느슨하게 만들 수 있다. 의존성 주입을 원칙은 상위 모듈은 하위 모듈에서 어떠한 것도 가져오지 않아야 한다는 것이다. 또한 둘 다 추상화에 의존해야 하며, 이때 추상화는 세부사항에 의존하지 않는다. 

💡 의존성 주입의 장단점
장점 : 모듈을 쉽게 교체 가능 → 테스팅, 마이그레이션 쉬워짐
단점 : 모듈들이 더욱더 분리되어 복잡성 증가

팩토리 패턴

객체를 사용하는 코드에서 객체 생성 부분을 떼어내 추상화한 패턴.

 

팩토리 패턴은 상속 관계에 있는 두 클래스에서 상위 클래스가 중요한 뼈대를 결정하고, 하위 클래스에서 구체적인 내용을 결정하는 패턴이다. 즉, 객체 생성의 책임을 분리하는 것이 목적이다.

• 상위 클래스와 하위 클래스가 분리됨 → 느슨한 결합을 가짐
• 상위 클래스에서는 인스턴스 생성 방식에 대해 알 필요 없음 → 더 많은 유연성
• 객체 생성 로직이 분리되어 있음 → 코드를 리팩토링 시 한 곳만 고칠 수 있어 유지 보수성 증가 

전략 패턴(= 정책 패턴)

객체의 행위를 바꾸고 싶을 때 직접 수정하지 않고 '캡슐화한 알고리즘'을 컨텍스트 안에서 바꿔주면서 상호 교체가 가능하게 만드는 패턴.

 

전략 패턴은 알고리즘이나 동작 방식을 유연하게 교체할 수 있도록 하는 패턴이다. 예를 들어, 결제 시스템에서 PaymentStrategy를 바꿔서 CardPayment, KakaoPay 등으로 교체할 수 있다. 즉, 동작을 유연하게 바꾸는 것이 목적이다.

옵저버 패턴

주체가 어떤 객체의 상태 변화를 관찰하다가 상태 변화가 있을 때마다  옵저버 목록에 있는 옵저버들에게 변화를 알려주는 패턴.

 

옵저버 패턴은 주로 이벤트 기반 시스템에 사용되며, MVC 패턴에도 자주 사용된다. 옵저버 패턴에서의 주체, 옵저버의 개념은 다음과 같다.

• 주체 : 객체의 상태 변화를 보고 있는 관찰자로, 상태 변경 시 옵저버에게 알림을 보냄 
• 옵저버 : 이 객체의 상태 변화에 따라 전달되는 메서드 등을 기반으로 '추가 변경 사항'이 생기는 객체들을 의미함

옵저버 패턴을 구현하는 방법에는 프록시 객체를 사용하는 방법이 있다. 프록시 객체를 통해 객체의 속성이나 메서드 변화 등을 감지하고 이를 미리 설정해놓은 옵저버들에게 전달하는 방법으로 구현한다.

💡프록시 객체
어떠한 대상의 기본적인 동작(속성 접근, 할당, 순회, 열거, 함수 호출 등)의 작업을 가로챌 수 있는 객체를 의미한다.

프록시 패턴

대상 객체에 접근하기 전 그 접근에 대한 흐름을 가로채 대상 객체 앞단의 인터페이스 역할을 하는 패턴.

 

프록시 패턴은 실제 객체에 대한 접근을 제어하기 위해 그 객체를 대신하는 대리 객체를 두는 패턴이다. 이를 통해  객체의 속성, 변환 등을 보완하며 보안, 데이터 검증, 캐싱, 로깅에 사용한다.

•  프록시 서버 : 서버와 클라이언트 사이에서 클라이언트가 자신을 통해 다른 네트워크 서비스에 접속할 수 있게 해주는 컴퓨터 시스템이나 응용 프로그램. 서버 앞단에 둬서 캐싱, 로깅, 데이터 분석을 서버보다 먼저 하는 서버를 말한다.
  • 프록시 서버를 통해 포트 번호를 바꿔서 사용자가 실제 서버의 포트에 접근하지 못하게 하거나, 공격자의 DDOS 공격을 차단할 수 있다. 또한 CDN을 프록시 서버로 달아서 캐싱 처리를 용이하게 할 수 있다.
  • nginx로 Node.js로 이루어진 서버의 앞단에 둬서 버퍼 오버플로우를 해결하거나 CloudFlare를 둬서 캐싱, 로그 분석 등을 할 수 있다.

💡 DN(Content Delivery Network)
각 사용자가 인터넷과 가까운 곳에서 콘텐츠를 캐싱 또는 배포하는 서버 네트워크를 말한다.

이터레이터 패턴

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

 

이터레이터 패턴을 통해 순회할 수 있는 여러 가지 자료형과 상관없이 이터레이터라는 하나의 인터페이스로 순회할 수 있다.

 

다음 예제를 보면 서로 다른 자료 구조인 set과 map이지만, 똑같은 for a of b 라는 이터레이터 프로토콜을 통해 순회하는 것을 볼 수 있다.

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)
for (let a of st) console.log(a)

노출 모듈 패턴

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

 

자바 스크립트는 접근 제어자가 존재하지 않고 전역 범위에서 스크립트가 실행됨 -> 노출 모듈 패턴을 통해 접근 제어자를 구현하기도 함. 

MVC 패턴

모델(Model), 뷰(View), 컨트롤러(Controller)로 이루어진 패턴.

 

MVC 패턴을 이용하면 애플리케이션의 구성 요소를 세 가지 역할로 구분하여 개발 프로세스에서 가각의 구성 요소에만 집중하여 개발할 수 있다. MVC 패턴을 이용한 대표적인 라이브러리에는 리액트(React.js)가 있다..라고 책에 나와있는데, 검색해보니 실제로 React 자체는 MVC를 완전히 구현한 라이브러리는 아니고, View 역할만 담당하는 컴포넌트 기반 라이브러리라고 한다. Controller나 Model 역할은 외부 상태 관리 라이브러리(Redux, Recoil 등)나 개발자가 직접 구현해야 한다. 즉, React로 MVC 구조를 구현할 수는 있지만, React자체가 MVC는 아니다.

 

MVC 패턴의 장단점은 다음과 같다.

• 장점 : 재사용성과 확장성이 용이함
• 단점 : 애플리케이션이 복잡해질수록 모델과 뷰의 관계가 복잡해짐

모델(Model), 뷰(View), 컨트롤러(Controller)의 개념은 다음과 같다.

• 모델(Model)
  • 애플리케이션의 데이터(데이터베이스, 상수, 변수 등)를 의미
• 뷰(View)
  • 사용자 인터페이스 요소(inputbox, checkbox, textarea 등)를 의미
• 컨트롤러(Controller)
  • 하나 이상의 모델과 뷰를 잇는 다리 역할을 하며, 메인 로직을 담당함.
  • 모델과 뷰의 생명주기 관리
  • 모델이나 뷰의 변경 통지를 받으면 이를 해석해 각각의 구성 요소에 해당 내용에 대해 알려줌

MVP 패턴

MVC 패턴으로부터 파생된 패턴으로, C에 해당하는 컨트롤러(Controller)가 프레젠터(Presenter) 로 교체된 패턴.

 

MVP패턴에서 뷰와 프레젠터는 일대일 관계이기 때문에 MVC 패턴보다 더 강한 결합을 가진다.

MVVM 패턴

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

 

MVVM 패턴은 모델(Model), 뷰(View),  뷰모델(View Model)로 이루어진 패턴이다. MVVM 패턴을 이용한 대표적인 라이브러리에는 뷰(Vue.js)가 있다. 이 패턴에서 뷰모델이란 뷰를 더 추상화한 계층으로, MVC 패턴과는 다르게 커맨드와 데이터 바인딩을 가지는 것이 특징이다.

• 장점 : 뷰와 뷰모델 사이의 양방향 데이터 바인딩 지원, 별도의 코드 수정 없이 UI 재사용 가능, 단위 테스트가 쉬움
• 단점 : 양방향 바인딩이 많아질수록 복잡해짐

💡MVC 패턴과 MVVM 패턴의 차이
MVVM 패턴은 MVC 패턴과 다르게 커맨드와 데이터 바인딩을 가지는 것이 특징이다. 뷰와 뷰모델 사이의 양방향 데이터 바인딩을 지원하며 UI를 별도의 코드 수정 없이 재사용할 수 있고 단위 테스팅하기 쉽다는 장점이 있다.