디자인 패턴

디자인 패턴

디자인 패턴이란?

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

1. 싱글톤 패턴 (Singleton pattern)

• 하나의 클래스에 오직 하나의 인스턴스만 가지는 패턴
• 주로 데이터베이스 연결에 사용
• 하나의 인스턴스를 다른 모듈들이 공유하면서 사용하기 때문에 생성 비용이 감소하지만 의존성이 높아짐

싱글톤 패턴의 단점

• TDD : 미리 생성된 하나의 인스턴스를 기반으로 구현하는 패턴 ⇒ 각 테스트마다 독립적인 인스턴스를 만들기 어려움
• 모듈간의 결합을 강하게 만든다 ⇒ 의존성 주입을 통해 해결 가능

의존성 주입 (Dependency Injection)

• 메인 모듈이 직접 다른 하위 모듈에 의존성을 주는것이 아니라 중간에 의존성 주입자가 이 부분을 가로채 메인 모듈이 간접적으로 의존성을 주입하는 방식
• 장점
  • 모듈들을 쉽게 교체할 수 있는 구조
  • 추상화 레이어를 넣고 이를 기반으로 구현체를 넣어주기 때문에 의존성 방향이 일관됨
  • 모듈간의 관계들이 명확해짐
• 단점
  • 모듈들이 분리되어 클래스 수가 늘어나 복잡성이 증가
  • 런타임 패널티
• 원칙
  • 상위 모듈은 하위 모듈에서 어떠한 것도 가져오지 않아야 한다
  • 둘 다 추상화에 의존해야 한다
  • 이때 추상화는 세부사항에 의존하지 말아야 한다

2. 팩토리 패턴 (Factory pattern)

팩토리 패턴이란?

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

장점

• 상위클래스와 하위클래스가 분리되기 때문에 느슨한 결함을 가짐
• 상위클래스에서 인스턴스 생성 방식에 대해 알 필요가 없어 더 많은 유연성

3. 전략 패턴 (Strategy pattern)

전략 패턴이란?

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

4. 옵저버 패턴 (Observer pattern)

옵저버 패턴이란?

• 주체가 어떤 객체의 상태 변화를 관찰하다가 상태 변화가 있을 때마다 메서드 등을 통해 옵저버 목록에 있는 옵저버들에게 변화를 알려주는 디자인 패턴
• 주체 : 객체의 상태 변화를 보고 있는 관찰자
• 옵저버 : 객체의 상태 변화에 따라 전달되는 메서드를 기반으로 추가 변화 사항이 생기는 객체
• ex) 트위터 - 어떤 사람인 주체를 ‘팔로우’ 했다면 주체가 포스팅을 올렸을 때 알림이 ‘팔로워’에게 전달됨

• 주로 이벤트 기반 시스템에 사용
• MVC 패턴에도 사용

자바 : 상속과 구현

• 상속 (extends)
  • 일반 클래스, abstract 클래스 기반 구현
  • 자식 클래스가 부모 클래스의 메서드 등을 상속받아 사용
  • 자식 클래스에서 추가 및 확장 가능
  • 재사용성, 중복성의 최소화
• 구현 (implements)
  • 인터페이스 기반 구현
  • 부모 인터페이스를 자식 클래스에서 재정의하여 구현
  • 반드시 부모 클래스의 메서드를 재정의하여 구현해야 함

5. 프록시 패턴과 프록시 서버 (proxy pattern)

프록시 객체 (proxy)

어떠한 대상의 기본적인 동작의 작업을 가로챌 수 있는 객체

프록시 패턴이란?

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

• 객체의 속성, 변환 등을 보완하며 보안, 데이터 검증, 캐싱, 로깅에 사용

프록시 서버란?

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

프록시 서버로 쓰는 nginx

• 비동기 이벤트 기반의 구조와 다수의 연결을 처리 가능한 웹 서버
• 주로 Node.js 서버 앞단의 프록시 서버로 활용해 익명 사용자의 직접적인 서버 접근을 차단하고 간접적으로 한 단계를 거쳐 보안성 강화
• 실제 포트를 숨길 수 있고, 메인 서버 앞단에서의 로깅을 할 수 있음

프록시 서버로 쓰는 CloudFlare

• 전 세계적으로 분산된 서버가 있고 이를 통해 시스템 콘텐츠 전달을 빠르게 할 수 있는 CDN 서비스
• CDN, DDOS 공격 방어, HTTPS 구축 → 웹 서버 앞단에 두어 프록시 서버로 쓰기 때문에 가능

6. 이터레이터 패턴 (Iterator pattern)

이터레이터 패턴이란?

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

7. 노출모듈 패턴 (Revealing module pattern)

노출 모듈 패턴이란?

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

8. MVC 패턴

MVC 패턴이란?

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

• 애플리케이션의 구성 요소를 세 가지 역할로 구분하여 개발 프로세스에서 각각의 구성 요소에만 집중해서 개발 가능
• 재사용성과 확장성이 용이
• 애플리케이션이 복잡해질수록 모델과 뷰의 관계가 복잡해짐

모델(model)

• 애플리케이션의 데이터인 데이터베이스, 상수, 변수 등
• 뷰에서 데이터를 생성하거나 수정하면 컨트롤러를 통해 모델을 생성하거나 갱신

뷰(View)

• 사용자 인터페이스 요소(inputbox, checkbox, textarea, ..)
• 모델을 기반으로 사용자가 볼 수 있는 화면
• 모델이 가지고 있는 정보 저장 X
• 단순히 화면에 표시하는 정보만 O
• 변경이 일어나면 컨트롤러에 전달

컨트롤러(Controller)

• 하나 이상의 모델과 하나 이상의 뷰를 잇는 다리 역할
• 이벤트 등 메인 로직 담당
• 모델이나 뷰의 생명주기 관리, 모델이나 뷰의 변경 통지를 받으면 이를 해석하여 각각의 구성요소에 해당 내용에 대해 알림

9. MVP 패턴

MVP 패턴이란?

• MVC 패턴에서 컨트롤러가 프레젠터(presenter)로 교체된 패턴
• 뷰와 프레젠터는 일대일 관계로 MVC 패턴보다 강한 결합을 지님

10. MVVM 패턴

MVVM 패턴이란?

• MVC의 C에 해당하는 컨트롤러가 뷰모델로 바뀐 패턴

• 뷰 모델 : 뷰를 더 추상화한 계층
• 뷰와 뷰 모델 사이의 양방향 데이터 바인딩 지원
• UI를 별도의 코드 수정 없이 재사용 가능
• 단위 테스트가 쉬워짐

정리

• 디자인 패턴 프로그램을 설계할 때 발생했던 문제점들을 객체 간의 상호 관계 등을 이용하여 해결할 수 있도록 하나의 ‘규약’ 형태로 만들어놓은 것
• 싱글톤 패턴 하나의 클래스에 오직 하나의 인스턴스만 가지는 패턴
• 팩토리 패턴 객체를 사용하는 코드에서 객체 생성 부분을 떼어내 추상화한 패턴
• 전략 패턴 객체의 행위를 바꾸고 싶은 경우 직접 수정하지 않고 전략이라 부르는 ‘캡슐화된 알고리즘’을 컨텍스트 안에서 바꿔주면서 상호 교체가 가능하게 만드는 패턴
• 옵저버 패턴 주체가 어떤 객체의 상태 변화를 관찰하다가 상태 변화가 있을 때마다 메서드 등을 통해 옵저버 목록에 있는 옵저버들에게 변화를 알려주는 디자인 패턴
• 프록시 패턴 대상 객체에 접근하기 전 그 접근에 대한 흐름을 가로채 대상 객체 앞단의 인터페이스 역할을 하는 디자인 패턴
• 프록시 서버 서버와 클라이언트 사이에서 클라이언트가 자신을 통해 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해주는 컴퓨터 시스템이나 응용 프로그램 (NginX, CloudFlare)
• 이터레이터 패턴 이터레이터를 사용하여 컬렉션의 요소들에 접근하는 디자인 패턴
• 노출모듈 패턴 즉시 실행 함수를 통해 private, public 같은 접근 제어자를 만드는 패턴
• MVC패턴 모델(Model), 뷰(View), 컨트롤러(Controller)로 이루어진 디자인 패턴 (React DOM구조)
• MVP패턴 모델(Model), 뷰(View), 프레젠터(Presenter)로 이루어진 디자인 패턴
• MVVM패턴 모델(Model), 뷰(View), 뷰 모델(ViewModel)로 이루어진 디자인 패턴 (Vue.js)

Ref

• 면접을 위한 CS 전공지식 노트, 주홍철 지음, 길벗 출판사