[CS] 디자인 패턴

눈치없어·2025년 4월 22일
CS

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


싱글톤 패턴

싱글톤 패턴(singleton pattern)

  • 하나의 클래스에 단 하나의 인스턴스만 존재하도록 제한하는 디자인 패턴
  • 주로 DB 연결 모듈 등, 인스턴스 생성 비용이 큰 곳에 사용됨
  • 장점: 메모리 절약, 인스턴스 생성 비용 감소
  • 단점: 높은 의존성, 테스트 어려움(TDD에 불리함)

JavaScript 싱글톤 패턴

class Singleton {
  constructor() {
    if (!Singleton.instance) {
      Singleton.instance = this
    }
    return Singleton.instance
  }
}

객체를 한 번만 생성하고, 이후에는 같은 인스턴스를 리턴


DB 연결 예시(MongoDB)

class DB {
  constructor(url) {
    if (!DB.instance) {
      DB.instance = connectToDB(url)
    }
    return DB.instance
  }
}

DB 연결은 비용이 크기 때문에, 싱글톤으로 관리해 재사용함


Java 싱글톤 패턴

class Singleton {
  private static class Holder {
    private static final Singleton INSTANCE = new Singleton();
  }
  public static Singleton getInstance() {
    return Holder.INSTANCE;
  }
}

중첩 클래스를 활용한 방식
스레드 안전하며, lazy loading 구현 가능


Node.js에서의 활용

mongoose.connect(), MySQL 모듈 등에서도 싱글톤 패턴이 사용됨


싱글톤 패턴의 단점(문제점)

테스트 어려움
TDD(Test Driven Development)를 할 때 걸림돌이 됨
TDD를 할 때 단위 테스트를 주로 하는데, 단위 테스트는 테스트가 서로 독립적이어야 하며 테스트를 어떤 순서로든 실행할 수 있어야 함
하지만 싱글톤 패턴은 미리 생성된 하나의 인스턴스를 기반으로 구현하는 패턴이므로 각 테스트마다 '독립적인' 인스턴스를 만들기가 어려움

해결책으로 의존성 주입 ↓


의존성 주입

의존성(DI)

  • 상위 모듈이 하위 모듈에 직접 의존하지 않고, 중간 주입자를 통해 의존성을 전달
  • 결과적으로 모듈 간 결합도 감소(디커플링)
  • 장점: 테스트 용이, 교체 및 확장 쉬움, 구조 예측 가능
  • 단점: 클래스 수 증가, 설계 복잡도 상승, 런타임 오버헤드 가능

의존성 주입 원칙
"상위 모듈과 하위 모듈은 추상화에만 의존해야 하며, 세부 구현에는 의존하지 않아야 한다."


팩토리 패턴

팩토리 패턴(factory pattern)

  • 객체 생성을 상위 클래스에서 분리하여 하위 클래스가 결정하게 하는 디자인 패턴
  • 객체 생성 로직을 캡슐화하여 유지보수성과 유연성을 확보함
  • 상위 클래스는 객체 생성 방식 몰라도 됨
  • 장점: 유지보수 용이, 느슨한 결합(디커플링), 테스트 쉬움
  • 단점: 클래스 수 증가, 코드 구조가 복잡해질 수 있음

라떼 레시피와 아메리카노 레시피, 우유 레시피라는 구체적인 내용이 들어 있는 하위 클래스가 컨베이어 벨트를 통해 전달되고, 상위 클래스인 바리스타 공정에서 이 레시피들을 토대로 우유 등을 생산하는 생산 공정을 생각하면 됨


JavaScript 팩토리 패턴

class Latte { constructor() { this.name = "latte" } }
class Espresso { constructor() { this.name = "Espresso" } }

class LatteFactory {
  static createCoffee() { return new Latte() }
}
class EspressoFactory {
  static createCoffee() { return new Espresso() }
}

class CoffeeFactory {
  static createCoffee(type) {
    return factoryList[type].createCoffee()
  }
}
  • CoffeeFactory: 상위 뼈대
  • LatteFactory, EspressoFactory: 하위에서 구체 인스턴스 생성
  • static 메서드 사용 → 메모리 효율 + 인스턴스 없이 호출 가능
  • 의존성 주입의 형태도 띔

Java 팩토리 패턴

abstract class Coffee { public abstract int getPrice(); }

class Latte extends Coffee { ... }
class Americano extends Coffee { ... }

class CoffeeFactory {
  public static Coffee getCoffee(String type, int price) {
    if("Latte".equalsIgnoreCase(type)) return new Latte(price);
    if("Americano".equalsIgnoreCase(type)) return new Americano(price);
    return new DefaultCoffee();
  }
}
  • CoffeeFactory.getCoffee(...) → 타입에 따라 객체 생성
  • Latte, Americano는 Coffee 클래스를 상속
  • 유지보수할 때 getCoffee()만 수정하면 되니 구조가 깔끔해짐
  • 커피팩토리 밑에 커피 클래스를 놓고 해당 클래스를 상속하는 라떼, 에스프레소 클래스를 기반으로 구현한 모습

Enum
미리 정의된 상수 집합을 의미하는 자료형


전략 패턴

전략 패턴(strategy pattern)

  • 객체의 행위를 변경할 때, 직접 코드를 수정하지 않고
    '전략 객체'를 바꿔 끼우는 방식으로 행위를 유연하게 변경하는 패턴
  • 알고리즘을 캡슐화해서 상황(Context)에 따라 교체 가능하게 함

네이버페이, 카카오페이처럼 결제 전략만 교체하여 사용 가능

Context: 전략이 사용되는 곳 (ex. 쇼핑카트)
Strategy 인터페이스: 공통된 행동 메서드 정의 (ex. pay())
Concrete Strategy: 전략별 구현체 (ex. KAKAOCard, LUNACard)


Java 전략 패턴

// 전략 인터페이스
interface PaymentStrategy {
    void pay(int amount);
}

// 구체 전략 1
class KAKAOCardStrategy implements PaymentStrategy {
    public void pay(int amount) {
        System.out.println(amount + " paid using KAKAOCard.");
    }
}

// 구체 전략 2
class LUNACardStrategy implements PaymentStrategy {
    public void pay(int amount) {
        System.out.println(amount + " paid using LUNACard.");
    }
}

// Context
class ShoppingCart {
    List<Item> items = new ArrayList<>();
    void addItem(Item item) { items.add(item); }
    int calculateTotal() { return items.stream().mapToInt(Item::getPrice).sum(); }
    void pay(PaymentStrategy strategy) {
        strategy.pay(calculateTotal());
    }
}
  • ShoppingCart는 전략 객체(PaymentStrategy)만 알면 됨
  • 새로운 결제 수단이 생겨도 기존 코드를 건드리지 않고 전략만 추가하면 됨

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


passport 전략 패턴

  • Node.js 인증 미들웨어 라이브러리
  • 다양한 로그인 방식(전략)을 플러그인 형태로 지원
  • 전략만 바꿔서 인증 방식 교체 가능
  • Local Strategy, OAuth, JWT 등 지원
const passport = require('passport')
const LocalStrategy = require('passport-local').Strategy;

passport.use(new LocalStrategy(
  function (username, password, done) {
    User.findOne({ username: username }, function (err, user) {
      if (err) return done(err);
      if (!user) return done(null, false, { message: 'Incorrect username.' });
      if (!user.validPassword(password)) return done(null, false, { message: 'Incorrect password.' });
      return done(null, user);
    });
  }
));
  • passport.use(...) 함수에 전략 객체를 주입
  • 이 전략(LocalStrategy)만 바꾸면, 구글, 네이버, 페이스북 인증도 쉽게 교체 가능
// 전략만 바꾸면 됨
passport.use(new GoogleStrategy(...))
passport.use(new NaverStrategy(...))

옵저버 패턴

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

  • 주체(Subject): 상태 변화가 발생하는 객체
  • 옵저버(Observer): 그 변화를 감지하고 반응하는 객체
  • 예: 트위터 팔로우 → 글을 올리면 팔로워에게 알림 전파

Java 옵저버 패턴

interface Subject {
    void register(Observer o);
    void notifyObservers();
}
interface Observer {
    void update(String msg);
}

class Topic implements Subject {
    private List<Observer> observers = new ArrayList<>();
    private String msg;
    
    public void register(Observer o) { observers.add(o); }
    public void notifyObservers() {
        for (Observer o : observers) o.update(msg);
    }
    public void post(String m) {
        this.msg = m;
        notifyObservers();
    }
}

class Subscriber implements Observer {
    private String name;
    public Subscriber(String name) { this.name = name; }
    public void update(String msg) {
        System.out.println(name + " received: " + msg);
    }
}

public class HelloWorld {
    public static void main(String[] args) {
        Topic topic = new Topic();
        topic.register(new Subscriber("a"));
        topic.register(new Subscriber("b"));
        topic.post("옵저버 패턴 발동");
    }
}
  • Topic이 주체, Subscriber들이 옵저버
  • 메시지 게시 시, 모두에게 알림 전달

JavaScript 옵저버 패턴 (프록시 객체 활용)

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

프록시 객체

  • taget: 프록시할 대상
  • handler: target 동작을 가로채고 어떠한 동작을 할것인지가 설정되어 있는 함수
function observe(target, callback) {
  return new Proxy(target, {
    set(obj, key, val) {
      if (obj[key] !== val) {
        const prev = obj[key]
        obj[key] = val
        callback(`${key}: [${prev}] → [${val}]`)
      }
      return true
    }
  })
}

const state = { status: "솔로" }
const reactive = observe(state, console.log)

reactive.status = "커플"  // status: [솔로] → [커플]
  • set() 핸들러가 속성 변경 감지
  • 변경 시, 콜백(console.log) 실행됨

Vue.js 3.0 옵저버 패턴

Vue 3.0의 ref, reactive는 프록시 기반 옵저버 패턴을 활용해
데이터 변화 시, 자동으로 UI를 동기화해주는 반응형 시스템을 만듬

import { ref } from 'vue'

const count = ref(0)
count.value++  // 값이 변경되면, 화면도 자동으로 업데이트됨
  • ref(0)을 호출하면 Vue는 Proxy를 이용해 count를 감시
  • count.value++로 값이 바뀌면, 자동으로 연결된 DOM이나 컴포넌트가 리렌더링
  • 이것이 옵저버 패턴의 핵심 동작과 동일

DOM(Document Object Model)
문서 객체 모델을 말하며, 웹 브라우저상의 화면을 이루고 있는 요소들을 지칭


프록시 패턴과 프록시 서버

앞서 설명한 프록시 객체는 사실 디자인 패턴 중 하나인 프록시 패턴이 녹아들어 있는 객체임


프록시 패턴

프록시 패턴(proxy pattern)
대상 객체(subject)에 접근하기 전 그 접근에 대한 흐름을 가로채 해당 접근을 필터링하거나 수정하는 등의 역할을 하는 계층이 있는 디자인 패턴

  • 객체의 속성, 변환 등을 보완하며 보안, 데이터 검증, 캐싱, 로깅에 사용
  • 앞서 설명한 프록시 객체로 쓰이기도 하지만 프록시 서버로도 활용됨

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


프록시 서버

프록시 서버(proxy server)
서버와 클라이언트 사이에 위치해 요청을 중계하는 서버


프록시 서버로 쓰는 Nginx

nginx는 비동기 이벤트 기반의 구조와 다수의 연결을 효과적으로 처리 가능한 웹 서버이며, 주로 Node.js 서버 앞단의 프록시 서버로 활용됨

nginx를 프록시 서버로 둬서 실제 포트를 숨길 수 있고 정적 자원을 gzip 압축하거나, 메인 서버 앞단에서의 로깅을 할 수도 있음

버퍼 오버플로우
버퍼는 보통 데이터가 저장되는 메모리 공간으로, 메모리 공간을 벗어나는 경우를 말함
이때 사용되지 않아야 할 영역에 데이터가 덮어씌워져 주소, 값을 바꾸는 공격이 발생하기도 함

gzip 압축
LZ77과 Huffman 코딩의 조합인 DEFLATE 알고리즘을 기반으로 한 압축 기술
gzip 압축을 하면 데이터 전송량을 줄일 수 있지만, 압축을 해제했을 때 서버에서의 CPU 오버헤드도 생각해서 gzip 압축 사용 유무를 결정해야 함


프록시 서버로 쓰는 CloudFlare

CloudFlare는 전 세계적으로 분산된 서버가 있고 이를 통해 어떠한 시스템의 콘텐츠 전달을 빠르게 할 수 있는 CDN 서비스

  • 웹 서버 앞단에 프록시 서버로 두어 DDOS 공격 방어나 HTTPS 구축에 쓰임
  • 의심스러운 트래픽인지를 먼저 판단해 CAPTCHA 기반으로 이를 일정부분 막아줌

CDN(Content Delivery Network)
각 사용자가 인터넷에 접속하는 곳과 가까운 곳에서 콘텐츠를 캐싱 또는 배포하는 서버 네트워크
이를 통해 사용자가 웹 서버로부터 콘텐츠를 다운로드하는 시간을 줄일 수 있음


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

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

  • 프론트와 백엔드 오리진이 달라 발생하는 CORS 에러 회피
  • 요청을 중계하면서 오리진을 통일시켜줌

오리진
프로토콜과 호스트 이름, 포트의 조합
https://kundol.com:12010/test 주소에 오리진은 https://kundol.com:12010


이터레이터 패턴

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


자바스크립트 이터레이터 패턴

const mp = new Map() 
mp.set('a', 1)
mp.set('b', 2)
mp.set('cccc', 3) 
const st = new Set() 
st.add(1)
st.add(2)
st.add(3) 
const a = []
for(let i = 0; i < 10; i++)a.push(i)

for(let aa of a) console.log(aa)
for(let a of mp) console.log(a)
for(let a of st) console.log(a) 
/* 
a, b, c 
[ 'a', 1 ]
[ 'b', 2 ]
[ 'c', 3 ]
1
2
3
*/

다른 자료 구조인 set과 map임에도 똑같은 for a of b라는 이터레이터 프로토콜을 통해 순회

이터레이터 프로토콜: 이터러블한 객체들을 순회할 때 쓰이는 규칙
이터러블한 객체: 반복 가능한 객체로 배열을 일반화한 객체


노출모듈 패턴

노출모듈 패턴(revealing module pattern)
즉시 실행 함수를 통해 private, public 같은 접근 제어자를 만드는 패턴

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

const pukuba = (() => {
    const a = 1
    const b = () => 2
    const public = {
        c : 2, 
        d : () => 3
    }
    return public 
})() 
console.log(pukuba)
console.log(pukuba.a)
// { c: 2, d: [Function: d] }
// undefined

MVC 패턴

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


모델

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

뷰에서 데이터를 생성하거나 수정하면 컨트롤러를 통해 모델을 생성하거나 갱신


뷰

inputbox, checkbox, textarea 등 사용자 인터페이스 요소를 나타냄

즉, 모델을 기반으로 사용자가 볼 수 있는 화면을 뜻함
모델이 가지고 있는 정보를 따로 저장하지 않아야 하며 단순히 사각형 모양 등 화면에 표시하는 정보만 가지고 있어야 함

또한, 변경이 일어나면 컨트롤러에 이를 전달해야 함


컨트롤러

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

모델과 뷰의 생명주기 관리
모델이나 뷰의 변경 통지를 받으면 이를 해석하여 각각의 구성 요소에 해당 내용에 대해 알려줌


MVC 패턴의 예 Spring

Spring: MVC 패턴을 이용한 대표적인 프레임워크. 자바 플랫폼을 위한 오픈 소스 애플리케이션

  • @RequestHeader, @PathVariable 등의 애너테이션을 기반으로 사용자의 요청 값들을 쉽게 분석할 수 있음
  • 사용자의 어떠한 요청이 유효한 요청인지를 쉽게 거를 수 있음
  • 재사용 가능한 코드, 테스트, 쉽게 리디렉션할 수 있게 하는 등 여러 기능이 있음

MVP 패턴

MVC에서 C에 해당하는 컨트롤러가 프레젠터(presenter)로 교체된 패턴

뷰와 프레젠터는 일대일 관계이기 때문에 MVC 패턴보다 더 강함 결합을 지닌 디자인 패턴이라고 볼 수 있음


MVVM 패턴

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

뷰모델은 뷰를 더 추상화한 계층

  • MVC 패턴과는 다르게 커맨드와 데이터 바인딩을 가짐
  • 뷰와 뷰모델 사이의 양방향 데이터 바인딩을 지원
  • UI를 별도로 코드 수정없이 재사용할 수 있음
  • 단위 테스트팅하기 쉬움

MVVM 패턴의 예: 뷰

뷰(Vue.js): MVVM 패턴을 가진 대표적인 프레임워크

Vue.js는 반응형(reactivity)이 특징인 프론트엔드 프레임워크

  • 예: watch와 computed 등으로 쉽게 반응형적인 값들을 구축할 수 있음
  • 함수를 사용하지 않고 값 대입만으로도 변수가 변경되며 양방향 바인딩, html을 토대로 컴포넌트를 구축할 수 있음
  • 재사용 가능한 컴포넌트 기반으로 UI를 구축할 수 있으며 BMW, 구글, 루이비통 등에서 사용

커맨드
여러 가지 요소에 대한 처리를 하나의 액션으로 처리할 수 있게 하는 기법

데이터 바인딩
화면에 보이는 데이터와 웹 브라우저의 메모리 데이터를 일치시키는 기법
뷰모델을 변경하면 뷰가 변경 됨



참고: 북스터디 - 면접을 위한 CS 전공지식 노트 (Chapter 1-1)

profile
눈치없어
dock 사이즈 다르잖아
이전 포스트

[CS] NoSQL

다음 포스트

[CS] 프로그래밍 패러다임

0개의 댓글