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


1. 싱글톤 패턴

하나의 클래스에 오직 하나의 인스턴스만 가지는 패턴. 보통 데이터베이스 연결 모듈에 많이 사용된다.

하나의 인스턴스를 만들어 놓고 해당 인스턴스를 다른 모듈들이 공유하며 사용한다.

  • 장점: 인스턴스 생성 비용↓, 사용하기 쉽고 실용적
  • 단점: 의존성↑, 모듈 간 결합↑
    • 미리 생성된 하나의 인스턴스 기반으로 구현하므로 테스트마다 독립적인 인스턴스를 만들기 어려움 → TDD(Test Driven Development) 개발의 단위 테스트 시 좋지 않다.

단위테스트는 테스트가 서로 독립적이어야 하며, 테스트를 어떤 순서로든 실행할 수 있어야 한다.


❓ 의존성 주입(DI, Dependency Injection)

의존성이 있다는 것은 B의 변경 사항에 대해 A 또한 변경해야 하는 것을 의미한다. 의존성 주입을 통해 모듈 간 결합을 조금 더 느슨하게 만들어 높은 의존성을 해결할 수 있다.

의존성 주입 원칙
상위 모듈은 하위 모듈에서 어떠한 것도 가져오지 않아야 한다.
둘 다 추상화에 의존해야 하며, 이 때 추상화는 세부 사항에 의존하지 말아야 한다.

메인 모듈에서 하위 모듈로 ‘직접’ 의존성을 주는 방식에서 중간에 의존성 주입자를 추가하여, 의존성 주입자가 이 부분을 가로채 메인 모듈이 ‘간접’적으로 의존성을 주입하는 방식이다.(메인 모듈 → 의존성 주입자 → 하위 모듈)

  • 장점

    • 모듈을 쉽게 교체할 수 있는 구조
    • 테스팅 하기 쉬워짐
    • 마이그레이션하기 수월
    • 애플리케이션 의존성 방향 일관되어짐
    • 모듈 간 관계 명확해짐

  • 단점: 모듈 분리 → 복잡성↑, 약간의 런타임 페널티


2. 팩토리 패턴

  • 객체를 사용하는 코드에서 객체 생성 부분을 떼어내 추상화한 패턴
  • 상속 관계에 있는 두 클래스에서 상위 클래스가 중요한 뼈대를 결정하고, 하위 클래스에서 객체 생성에 관한 구체적 내용을 결정하는 패턴 → 상위/하위 클래스 분리 → 느슨한 결합
  • 객체 생성 로직 분리 → 유지보수성↑

3. 전략(정책) 패턴

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

ex) 결제/인증 수단 → 전략

컨텍스트: 프로그래밍에서 상황, 맥락, 문맥을 의미. 개발자가 어떠한 작업을 완료하는데 필요한 모든 관련 정보를 말한다.


4. 옵저버 패턴

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

  • 주체: 객체의 상태 변화를 보고있는 관찰자

  • 옵저버: 객체의 상태 변화에 따라 전달되는 메서드 등을 기반으로 ‘추가 변화 사항’이 생기는 객체들

옵저버 패턴은 상태 변화가 있을 때 변화를 알려주는 방식이기 때문에 주로 이벤트 기반 시스템에 사용되며, MVC(Model-View-Controller) 패턴에도 사용된다.

자바스크립트에서의 경우 프록시 객체를 써서 프록시 객체를 통해 객체의 속성이나 메서드 변화 등을 감지하고 → 설정해놓은 옵저버들에게 전달하는 방법으로 구현한다.


5. 프록시 패턴

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

  • 객체의 속성, 변환 등을 보완
  • 보안, 데이터, 검증, 캐싱, 로깅
  • 프록시 서버

프록시 서버

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

  • 서버 앞단에 둬서 캐싱, 로깅, 데이터 분석을 서버보다 먼저 하는 서버
  • 포트 번호를 바꿔 사용자의 실제 서버 포트 접근을 막음
  • 공격자의 DDOS 공격 차단
  • CDN을 프록시 서버로 캐싱
  • nginx를 이용해 Node.js로 이루어진 서버 앞단에 두어 버퍼 오버플로우 해결 가능

캐시 안에 정보를 담아두고, 캐시 안에 있는 정보를 요구하는 요청에 대해 멀리 있는 원격 서버에 다시 요청하지 않고 캐시 안에 있는 데이터를 활용하는 것을 말한다. 이를 통해 불필요하게 외부와 연결하지 않기 때문에 트래픽을 줄일 수 있다는 장점이 있다.


CORS와 프론트엔드의 프록시 서버

CORS(Cross-Origin Resource Sharing)는 서버가 웹 브라우저에서 리소스를 로드할 때 다른 오리진을 통해 로드하지 못하게 하는 HTTP 헤더 기반 메커니즘이다.

프론트엔드 개발 시, 프론트엔드 서버를 만들어서 백엔드 서버와 통신할 때 주로 CORS 에러를 마주치는데, 이를 해결하기 위해 프론트엔드에서 프록시 서버를 만들기도 한다.

ex)

  • 프론트엔드 서버: 127.0.0.1:3000
  • 백엔드 서버: 127.0.0.1:12010

이 경우 포트 번호가 다르기 때문에 CORS 에러가 발생하게 된다. 이 때 프록시 서버를 만들어서 프론트 서버에서 요청되는 오리진을 127.0.0.1:12010으로 바꿔주는 것이다.


6. 이터레이션 패턴

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

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

ex) for a of b


7. 노출모듈 패턴

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

자바스크립트의 경우에는 접근 제어자가 존재하지 않고, 전역 범위에서 스크립트가 실행된다.

즉시 실행 함수: 함수를 정의하자마자 바로 호출하는 함수. 초기화 코드, 라이브러리 내 전역 변수의 충돌 방지 등에 사용한다.


8. MVC 패턴

Model, View, Controller 로 이루어진 디자인 패턴

  • 애플리케이션의 구성 요소를 3가지 역할로 구분하여 각 구성요소에만 집중해서 개발할 수 있다.
  • 장점: 재사용성과 확장성이 용이하다
  • 단점: 복잡해질수록 모델과 뷰의 관계가 복잡해진다
  • ex) spring

Model

애플리케이션의 데이터인 데이터베이스, 상수, 변수 등을 뜻한다.

View

inputbox, checkbox, textarea 등 사용자 인터페이스 요소를 나타낸다. 즉, 모델을 기반으로 사용자가 볼 수 있는 화면을 의미한다.

모델이 가지고 있는 정보를 따로 저장하지 않고, 화면에 표시하는 정보만 가지고 있다. 변경이 일어나면 컨트롤러에게 이를 전달한다.

Controller

하나 이상의 모델과 하나 이상의 뷰를 잇는 다리 역할이며, 이벤트 등 메인 로직을 담당한다.

또한 모델과 뷰의 생명주기도 관리하며, 모델/뷰의 변경 사항을 전달 받으면 이를 해석하여 각각의 구성요소에 해당 내용을 알려준다.


Controller (갱신)→ View / Model

View (유저이벤트)→ Controller

Model (알림)→ Controller


9. MVP 패턴

Model, View, Presenter. MVC 패턴으로부터 파생되었으며, Controller가 Presenter로 교체된 패턴.

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


Presenter (모델갱신)↔️(모델 변경) Model

Presenter (UI갱신)↔️(유저이벤트) View


10. MVVM 패턴

Model, View, View Model. MVC 패턴의 Controller가 View Model로 교체된 패턴.

  • 뷰모델은 뷰를 더 추상화한 계층
  • MVC 패턴과 달리 커맨드와 데이터 바인딩을 가지는 것이 특징
  • 뷰-뷰모델 사이의 양방향 데이터 바인딩 지원
  • 별도 코드 수정 없이 UI 재사용 가능
  • 단위 테스팅하기 쉬움
  • ex) Vue.js
    • 함수를 사용하지 않고 값 대입만으로 변수가 변경
    • 양방향 바인딩
    • HTML을 토대로 컴포넌트 구축 가능
    • 재사용 가능한 컴포넌트 기반으로 UI 구축 가능

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


View (커맨드/데이터바인딩)↔️(커맨드/데이터바인딩, 알림) View Model (갱신)↔️(알림) Model

Copy