[면접을 위한 CS 전공지식 노트] 디자인패턴의 종류 및 특징

1. 싱글톤 패턴 ⭐️

 

싱글톤 패턴은 특정 클래스의 인스턴스를 1개만 생성되는 것을 보장하는 디자인 패턴이다.

 

쉽게 말하자면 메모리 절약을 위해, 인스턴스가 필요할 때 똑같은 인스턴스를 새로 만들지 않고 기존의 인스턴스를 가져와 활용하는 기법을 말한다.

 

사용자가 1초에 10번 똑같은 요청을 보내면 요청을 처리하기 위한 똑같은 객체를 1초에 10번 생성하고 소멸되는 메모리 낭비 문제가 발생하게 된다.

하지만 싱글톤 패턴을 사용하면 최초 한번 new로 객체를 생성하고 해당 객체를 이후에도 사용하도록 다른 모듈들과 공유(static)하여 메모리 낭비 문제를 방지할 수 있다.

 

따라서 싱글톤 패턴을 사용하게 되면 불필요한 메모리 낭비를 방지할 수 있다.

 

보통 싱글톤 패턴이 적용된 객체가 필요한 경우는 그 객체가 리소스를 많이 차지하는 역할을 하는 무거운 클래스일때 적합하다.
 
대표적으로 데이터베이스 연결 모듈을 예로 들 수 있는데, 데이터베이스에 접속하는 작업(I/O 바운드)은 그 자체로 무거운 작업에 속하며 또한 한번만 객체를 생성하고 돌려쓰면 되지 굳이 여러번 생성할 필요가 없기 때문이다.

싱글톤 패턴의 단점

1. 모듈간 의존성이 높아진다. (하나의 싱글톤 클래스를 여러 모듈들이 공유를 하므로 싱글톤의 인스턴스가 변경되면 이를 참조하는 모듈들도 수정이 필요하게 됨)
2. TDD 단위 테스트에 어려움이 발생한다. (싱글톤 인스턴스는 자원을 공유하고 있기 때문)

 

2. 팩토리 패턴

 

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

 

팩토리 메소드 패턴은 객체 생성을 공장(Factory) 클래스로 캡슐화 처리하여 대신 생성하게 하는 생성 디자인 패턴이다.

 

즉, 클라이언트에서 직접 new 연산자를 통해 제품 객체를 생성하는 것이 아닌, 제품 객체들을 도맡아 생성하는 공장 클래스를 만들고, 이를 상속하는 서브 공장 클래스의 메서드에서 여러가지 제품 객체 생성을 각각 책임지는 것이다.

 

따라서 상위 클래스와 하위 클래스 간의 강한 결합을 피할 수 있고 팩토리 메서드를 통해 객체의 생성 후 공통으로 할 일을 수행하도록 지정해줄 수 있다. 또한, 캡슐화 및 추상화를 통해 생성되는 객체의 구체적인 타입을 감출 수 있다.

 

ex) 자바스크립트의 new Object()는 숫자나 문자열을 전달함에 따라 다른 타입의 객체를 생성, 즉 전달받은 값에 따라 다른 객체를 생성하며 인스턴스의 타입 등을 결정

 

3. 전략 패턴

 

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

 

ex) 물건을 결제할 때 네이버페이나 카카오페이 등 다양한 방법으로 결제하듯이 결제 방식의 '전략'만 바꿔서 다양한 방식으로 결제하는 것을 구현

 

4. 옵저버 패턴 ⭐️

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

 

여기서 주체란 객체의 상태 변화를 보고 있는 관찰자이며, 옵저버란 객체의 상태 변화에 따라 추가적으로 변화가 생기는 객체를 의미한다.

 

또한, 주체와 객체를 따로 두지 않고 상태가 변경되는 객체를 기반으로 구축하기도 한다.

 

옵저버 패턴은 주로 이벤트 기반 시스템에 사용하며 MVC(Model-View-Controller)패턴에도 사용된다.

 

예를 들어 주체라고 볼 수 있는 모델(Model)에서 변경사항이 생겨 update() 메서드로 옵저버인 뷰(View)에 알려주고 이를 기반으로 컨트롤러(Controller) 등이 작동하는 것이다.

 

자바스크립트의 옵저버 패턴

자바스크립트에서의 옵저버 패턴은 '프록시 객체'를 통해 구현할 수 있다.

 

프록시 객체란?
프록시(proxy) 객체는 어떠한 대상의 기본적인 동작(속성 접근, 할당, 순회, 열거, 함수 호출 등)의 작업을 가로챌 수 있는 객체를 뜻하며 자바스크립트에서 프록시 객체는 두 개의 매개변수를 가진다.

• target : 프록시할 대상
• handler : 프록시 객체의 traget 동작을 가로채서 정의할 동작들이 정해져 있는 함수

Vue.js 3.0의 옵저버 패턴

• ref나 reactive로 정의하면 값 변경시 자동으로 DOM(웹 브라우저 화면을 이루고 있는 요소)에 있는 값이 변경된다.
• ref는 변수를 반응성 데이터로 만든다. ref로 선언된 변수의 값이 변경되면 해당 값을 사용하는 Vue 컴포넌트의 뷰도 자동으로 업데이트된다.
• proxy 객체의 옵저버패턴을 이용하여 구현한 것이다.

5. 프록시 패턴

프록시 패턴(Proxy Pattern)은 대상 객체에 접근하기 전 그 접근에 대한 흐름을 가로채 대상 객체 앞단의 인터페이스 역할을 하는 디자인 패턴이다. 즉, 대상 원본 객체의 대리인에게 대신 처리하도록 하여 로직의 흐름을 제어하는 행동 패턴이다.

 

프록시(Proxy)의 사전적인 의미는 '대리인'이라는 뜻이다. 즉, 누군가에게 어떤 일을 대신 시키는 것을 의미하는데, 이를 객체 지향 프로그래밍에 접목해보면 클라이언트가 대상 객체를 직접 쓰는게 아니라 중간에 프록시(대리인)을 거쳐서 쓰는 코드 패턴이라고 보면 된다.

 

따라서 대상 객체(Subject)의 메소드를 직접 실행하는 것이 아니라, 대상 객체에 접근하기 전에 프록시(Proxy) 객체의 메서드를 접근한 후 추가적인 로직을 처리한뒤 접근하게 된다.

 

이를 통해 객체의 속성, 변환 등을 보완하며 보안, 데이터 검증, 캐싱, 로깅, 프록시 서버, CORS 에러 해결 등에 사용한다.

 

6. 이터레이터 패턴

 

반복자(Iterator) 패턴은 일련의 데이터 집합에 대하여 순차적인 접근(순회)을 지원하는 디자인 패턴이다.

 

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

 

7. 노출모듈 패턴

노출모듈 패턴은 즉시 실행 함수를 통해 private, public과 같은 접근 제어자를 만드는 패턴이다.

 

자바스크립트는 접근 제어자가 존재하지 않고 전역 범위에서 스크립트가 실행된다. 그렇기 때문에 노출모듈 패턴을 통해 private와 public 접근 제어자를 구현하기도 한다.

 

8. MVC 패턴 ⭐️

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

 

애플리케이션의 구성 요소를 3가지 역할로 구분하여 개발 프로세스에서 각각의 구성요소에만 집중해서 개발할 수 있어 재사용성과 확장성이 높다는 장점이 있고, 애플리케이션이 복잡해질수록 모델과 뷰 간의 관계가 복잡해진다는 단점이 있다.

 

• 모델(Model) : 애플리케이션의 데이터인 DB, 상수, 변수 등을 의미 (뷰에서 데이터를 생성하거나 수정하면 컨트롤러를 통해 모델을 생성하거나 갱신)
• 뷰(View) : inputbox, checkbox, textarea 등의 사용자 인터페이스 요소, 즉 모델을 기반으로 사용자가 시각적으로 볼 수 있는 화면을 의미 (데이터의 변경이 일어나면 컨트롤러에게 전달)
• 컨트롤러(Controller) : 1개 이상의 모델과 1개 이상의 뷰를 이어주는 다리 역할을 하고, 이벤트 등 메인 로직을 담당, 모델과 뷰의 생명주기를 관리 ex) 스프링 프레임워크

9. MVP 패턴

MVP 패턴은 MVC 패턴으로부터 파생되었으며 MVC에서 C에 해당하는 컨트롤러가 프레젠터로 교체된 패턴이다.

 

뷰와 프레젠터는 1:1 관계이기 때문에 MVC패턴보다 더 강한 결합을 지닌 디자인 패턴이라고 할 수 있다.

 

10. MVVM 패턴

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

 

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

• 커맨드 : 여러가지 요소에 대한 처리를 하나의 액션으로 처리할 수 있게 하는 기법
• 데이터 바인딩 : 화면에 보이는 데이터와 웹 브라우저의 메모리 데이터를 일치시키는 기법으로, 뷰 모델을 변경하면 뷰가 변경됨

 

뷰와 뷰모델 사이의 양방향 데이터 바인딩을 지원하며 UI를 별도의 코드 수정 없이 재사용할 수 있고, 단위 테스팅하기 쉽다는 장점이 있다.

 

MVVM 패턴의 예 : Vue.js

Vue.js는 반응형이 특징인 프레임워크로, watch와 computed 등으로 쉽게 반응형적인 값들을 구축할 수 있다.

 

함수를 사용하지 않고 값 대입만으로 변수가 변경되고 양방향 바인딩, html을 토대로 컴포넌트를 구축할 수 있다는 점이 특징이다. 또한 재사용 가능한 컴포넌트 기반으로 UI를 구축할 수 있다.