[ 면접을 위한 cs 전공지식 노트 정리 ] 1. 디자인 패턴과 프로그래밍 패러다임 : 디자인 패턴

(출처 : https://www.inflearn.com/course/%EA%B0%9C%EB%B0%9C%EC%9E%90-%EB%A9%B4%EC%A0%91-cs-%ED%8A%B9%EA%B0%95)

디자인 패턴이란 ?

 

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

 

* 라이브러리와 프레임워크

 

1) 라이브러리

• 공통으로 사용할 수 있는 특정한 기능들을 모듈화한 것, 폴더명이나 파일명에 대한 규칙이 없고 프레임워크에 비해 자유롭다.
• 무언가를 자를 때 '도구'인 '가위'를 사용해서 '내'가 직접 컨트롤하여 자르는 것과 비슷하다.

2) 프레임워크

• 공통으로 사용할 수 있는 특정한 기능들을 모듈화한 것, 폴더명이나 파일명에 대한 규칙이 있으며 라이브러리에 비해 엄격하다.
• 다른 곳으로 이동할 때 '도구'인 비행기를 타고 이동하지만 '비행기'가 컨트롤하고 나는 가만히 있어야하는 것과 비슷하다.

     

1.1 디자인 패턴

1.1.1 싱글톤 패턴
1.1.2 팩토리 패턴
1.1.3 전략 패턴
1.1.4 옵저버 패턴
1.1.5 프록시 패턴과 프록시 서버
1.1.6 이터레이터 패턴
1.1.7 노출모듈 패턴
1.1.8 MVC 패턴
1.1.9 MVP 패턴
1.1.10 MVVM 패턴

---

1.1 디자인 패턴

 

1.1.1 싱글톤 패턴 (singletone pattern)

 

• 싱글톤 패턴의 정의

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

• 싱글톤 패턴의 장점

• 하나의 인스턴스를 만들어 놓고 해당 인스턴스를 다른 모듈들이 공유하며 사용하기 때문에 인스턴스를 생성할 때 드는 비용이 줄어든다.

• 싱글톤 패턴의 단점

• 의존성이 높아진다.
• TDD(Test Driven Development)를 할 때 걸림돌이 된다. 단위 테스트는 테스트가 서로 독립적이어야 하고 테스트의 실행방향이 어디든 가능해야 한다. 하지만 싱글톤 패턴은 미리 생성된 하나의 인스턴스를 기반으로 구현하는 패턴이기 때문에 각 테스트마다 독립적인 인스턴스를 만들기가 어렵다.
• 모듈간의 결합을 강하게 만들 수 있다. 👉 의존성 주입으로 모듈간의 결합을 느슨하게 만들어 해결 가능

• 의존성 주입
  
  의존성이란 종속성이라고도 하며, 코드에서 두 모듈(클래스) 간의 연결 혹은 관계를 말한다.
  메인 모듈(main module)이 직접 하위모듈에 대해 의존성을 주기보다는 중간에 의존성 주입자(dependency injector)가 이 부분을 가로채 메인 모듈이 간접적으로 의존성을 주입하는 방식이다.
  이를 통해 메인 모듈(상위모듈)은 하위 모듈에 대한 의존성이 떨어지게 되며 이것을 '디커플링이 된다'라고도 한다.

• 의존성 주입의 장점
  모듈들을 쉽게 교체할 수 있는 구조가 되어 테스팅하기 쉽고 마이그레이션하기도 수월하다.
  구현할 때 추상화 레이어를 넣고 이를 기반으로 구현체를 넣어 주기 때문에 애플리케이션 의존성 방향이 일관되고, 애플리케이션을 쉽게 추론할 수 있으며 모듈 간의 관계들이 조금 더 명확해진다.
  
  
• 의존성 주입의 단점
  모듈들이 더욱더 분리되므로 클래스 수가 늘어나 복잡성이 증가될 수 있으며 약간의 런타임 패널티가 생기기도 한다.
• 의존성 주입 원칙
  상위 모듈은 하위 모듈에서 어떠한 것도 가져오지 않아야 한다.
  둘 다 추상화에 의존해야 하며, 이 때 추상화는 세부 사항에 의존하지 말아야 한다.

• 싱글톤 사용 예시
  Node.js에서 MongoDB 데이터베이스를 연결할 때 쓰는 mongoose 모듈에서 볼 수 있다.

class Singleton {
    private static class singleInstanceHolder {
        private static final Singleton INSTANCE = new Singleton();
    }

    public static Singleton getInstance() {
        return singleInstanceHolder.INSTANCE;
    }
}

public class Main {
        public static void main(String[] args) {

            Singleton a = Singleton.getInstance();
            Singleton b = Singleton.getInstance();

            System.out.println(a.hashCode());
            System.out.println(b.hashCode());

            if (a == b) {
                System.out.println(true);
            }
        }
}


/*
1523554304
1523554304
true
*/

 

 

1.1.2 팩토리 패턴 (factory pattern)

• 팩토리 패턴의 정의

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

• 팩토리 패턴의 장점

• 상위 클래스와 하위 클래스가 분리되기 때문에 느슨한 결합을 가지며 상위 클래스에서는 인스턴스 생성 방식에 대해 알 필요가 없기 때문에 더 많은 유연성을 갖게 된다.
• 객체 생성 로직이 따로 떼어져 있기 때문에 코드를 리팩터링하더라도 한 곳만 고칠 수 있게되어 유지 보수성이 증가된다.

abstract class Coffee {
    public abstract int getPrice();

    @Override
    public String toString() {
        return "Hi this coffee is " + this.getPrice();
    }
}

class CoffeeFactory {
    public static Coffee getCoffee(String type, int price) {
    	// Enum 또는 Map을 이용하여 if문을 쓰지 않고 매핑하여 할 수도 있음
        if ("Latte".equalsIgnoreCase(type)) return new Latte(price);
        else if ("Americano".equalsIgnoreCase(type)) return new Americano(price);
        else {
            return new DefaultCoffee();
        }
    }
}

class DefaultCoffee extends Coffee {
    private int price;

    public DefaultCoffee() {
        this.price = -1;
    }

    @Override
    public int getPrice() {
        return this.price;
    }
}

class Latte extends Coffee {
    private int price;

    public Latte(int price) {
        this.price = price;
    }

    @Override
    public int getPrice() {
        return this.price;
    }    
}

class Americano extends Coffee {
    private int price;

    public Americano(int price) {
        this.price = price;
    }

    @Override
    public int getPrice() {
        return this.price;
    }    
}

public class Main {
        public static void main(String[] args) {

            Coffee latte = CoffeeFactory.getCoffee("Latte", 4000);
            Coffee ame = CoffeeFactory.getCoffee("Americano", 3000);    
            
            System.out.println("Factory latte ::" + latte);
            System.out.println("Factory ame ::" + ame);
        }
}

 

 

1.1.3 전략 패턴 (sttrategy pattern) 

• 전략 패턴의 정의

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

• 전략 패턴 사용 예시

• 결제 시 카카오페이, 네이버페이 등을 사용하듯이 결제방식의 전략만 바꿔서 결제하는 것을 예시로 들 수 있으며, 아래는 쇼핑카드에 아이템을 담에 LUNACard 또는 KAKAOCard 라는 두 개의 전략으로 결제하는 자바 예시 코드이다.

import java.text.DecimalFormat;
import java.util.ArrayList;
import java.util.List;
interface PaymentStrategy { 
    public void pay(int amount);
} 

class KAKAOCardStrategy implements PaymentStrategy {
    private String name;
    private String cardNumber;
    private String cvv;
    private String dateOfExpiry;
    
    public KAKAOCardStrategy(String nm, String ccNum, String cvv, String expiryDate){
        this.name=nm;
        this.cardNumber=ccNum;
        this.cvv=cvv;
        this.dateOfExpiry=expiryDate;
    }

    @Override
    public void pay(int amount) {
        System.out.println(amount +" paid using KAKAOCard.");
    }
} 

class LUNACardStrategy implements PaymentStrategy {
    private String emailId;
    private String password;
    
    public LUNACardStrategy(String email, String pwd){
        this.emailId=email;
        this.password=pwd;
    }
    
    @Override
    public void pay(int amount) {
        System.out.println(amount + " paid using LUNACard.");
    }
} 

class Item { 
    private String name;
    private int price; 
    public Item(String name, int cost){
        this.name=name;
        this.price=cost;
    }

    public String getName() {
        return name;
    }

    public int getPrice() {
        return price;
    }
} 

class ShoppingCart { 
    List<Item> items;
    
    public ShoppingCart(){
        this.items=new ArrayList<Item>();
    }
    
    public void addItem(Item item){
        this.items.add(item);
    }
    
    public void removeItem(Item item){
        this.items.remove(item);
    }
    
    public int calculateTotal(){
        int sum = 0;
        for(Item item : items){
            sum += item.getPrice();
        }
        return sum;
    }
    
    public void pay(PaymentStrategy paymentMethod){
        int amount = calculateTotal();
        paymentMethod.pay(amount);
    }
}  

public class HelloWorld{
    public static void main(String []args){
        ShoppingCart cart = new ShoppingCart();
        
        Item A = new Item("kundolA",100);
        Item B = new Item("kundolB",300);
        
        cart.addItem(A);
        cart.addItem(B);
        
        // pay by LUNACard
        cart.pay(new LUNACardStrategy("kundol@example.com", "pukubababo"));
        // pay by KAKAOBank
        cart.pay(new KAKAOCardStrategy("Ju hongchul", "123456789", "123", "12/01"));
    }
}
/*
400 paid using LUNACard.
400 paid using KAKAOCard.
*/

• 전략 패턴 사용 예시
  
  passport  : Node.js에서 인증 모듈을 구현할 때 쓰는 미들웨어 라이브러리로 페이스북, 네이버 등 여러가지 전략을 기반으로 인증할 수 있는 전략패턴을 이용한 라이브러리이다.

 

1.1.4 옵저버 패턴 (observer pattern)

• 옵저버 패턴의 정의

• 주체가 어떤 객체(subject)의 상태 변화를 관찰하다가 상태변화가 있을 때마다 메서드 등을 통해 옵저버 목록에 있는 옵저버들에게 변화를 알려주는 디자인 패턴이다.
• 주체란 객체의 상태 변화를 보고 있는 관찰자이며, 옵저버들이란 이 객체의 상태 변화에 따라 전달되는 메서드 등을 기반으로 '추가 변화 사항'이 생기는 객체들을 의미한다.
• 주체와 객체를 따로 두지 않고 상태가 변경되는 객체를 기반으로 구성하기도 한다.

• 옵저버 패턴 사용 예시

• 트위터
  어떤 사람이 주체를 팔로우 했을 경우 주체가 포스팅을 올려 상태변화가 생기면 팔로워에게 알람이 가는 형식이다.
• 주로 이벤트 기반 시스템에 사용하며, 주체라고 볼 수 있는 모델에서 변경 사항이 생겨 update() 메소드로 옵저버인 뷰에 알려주고 이를 기반으로 컨트롤러 등이 작동하는 방식으로 MVC 패턴에도 사용된다.

import java.util.ArrayList;
import java.util.List;

interface Subject {
    public void register(Observer obj);
    public void unregister(Observer obj);
    public void notifyObservers();
    public Object getUpdate(Observer obj);
}

interface Observer {
    public void update(); 
}

class Topic implements Subject {
    private List<Observer> observers;
    private String message; 

    public Topic() {
        this.observers = new ArrayList<>();
        this.message = "";
    }

    @Override
    public void register(Observer obj) {
        if (!observers.contains(obj)) observers.add(obj); 
    }

    @Override
    public void unregister(Observer obj) {
        observers.remove(obj); 
    }

    @Override
    public void notifyObservers() {   
        this.observers.forEach(Observer::update); 
    }

    @Override
    public Object getUpdate(Observer obj) {
        return this.message;
    } 
    
    public void postMessage(String msg) {
        System.out.println("Message sended to Topic: " + msg);
        this.message = msg; 
        notifyObservers();
    }
}

class TopicSubscriber implements Observer {
    private String name;
    private Subject topic;

    public TopicSubscriber(String name, Subject topic) {
        this.name = name;
        this.topic = topic;
    }

    @Override
    public void update() {
        String msg = (String) topic.getUpdate(this); 
        System.out.println(name + ":: got message >> " + msg); 
    } 
}

public class HelloWorld { 
    public static void main(String[] args) {
        Topic topic = new Topic(); 
        Observer a = new TopicSubscriber("a", topic);
        Observer b = new TopicSubscriber("b", topic);
        Observer c = new TopicSubscriber("c", topic);
        topic.register(a);
        topic.register(b);
        topic.register(c); 
   
        topic.postMessage("amumu is op champion!!"); 
    }
}
/*
Message sended to Topic: amumu is op champion!!
a:: got message >> amumu is op champion!!
b:: got message >> amumu is op champion!!
c:: got message >> amumu is op champion!!
*/

 

1.1.5 프록시 패턴(proxy pattern)과 프록시 서버(proxy server)

• 프록시 패턴의 정의

• 프록시 패턴은 대상 객체(subject)에 접근하기 전 그 접근에 대한 흐름을 가로채 대상 객체 앞단의 인터페이스 역할을 하는 디자인 패턴이다.
• 이를 통해 객체의 속성, 변환 등을 보완하며 보안, 데이터 검증, 캐싱, 로깅에 사용한다.
  
  * 프록시 서버에서의 캐싱
  캐시 안에 정보를 담아두고 캐시 안에 있는 정보를 요구하는 요청에 대해 다시 멀리 있는 원격서버에 요청하지 않고 캐시 안에 있는 데이터를 활용하는 것을 말한다. 불필요하게 외부와 연결하지 않기 때문에 트래픽을 줄일 수 있다는 장점이 있다.

• 프록시 서버의 정의

• 프록시 서버는 서버와 클라이언트 사이에서 클라이언트가 자신을 통해 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해주는 컴퓨터 시스템이나 응용 프로그램을 가리킨다.
  
  
• 프록시 서버의 사용 예시
  
  1. nginx
  nginx는 비동기 이벤트 기반의 구조와 다수의 연결을 효과적으로 처리 가능한 웹 서버이며, 주로 Node.js 서버 앞단의 프록시 서버로 활용된다. Node.js 서버를 구축할 때 앞단에 nginx를 두게 되면 익명 사용자의 직접적인 서버로의 접근을 차단하고 간접적인 단계를 한단계 더 거침으로써 보안성이 더 강화된다.
  
  2. CloudFlare
  CloudFlare는 전 세계적으로 분산된 서버가 있고 이를 통해 어떠한 시스템의 콘텐츠 전달을 빠르게 할 수 있는 CDN(*Contetn Delivery Network, 각 사용자가 인터넷에 접속하는 곳과 가까운 곳에서 콘텐츠를 캐싱 또는 배포하는 서버 네트워크, 이를 통해 사용자가 웹 서버로부터 콘텐츠를 다운로드하는 시간을 줄일 수 있음)서비스이다.
  또한 CloudFlare를 통해 누릴 수 있는 다른 이점도 있다.
  
  1) DDOS 공격 방어
  DDOS 공격은 짧은 기간 동안 네트워크에 많은 요청을 보내 네트워크를 마비시켜 웹 사이트의 가용성을 방해하는 사이버 유형이다.
  CloudFlare는 의심스러운 트래픽(사용자가 아닌 시스템을 통해 오는 트래픽)을 자동으로 차단한다.
  2) HTTPS 구축
  서버에서 HTTPS를 구축하기 위해서는 인증서를 기반으로 구축할 수도 있으나, CloudFlare를 사용하면 별도의 인증서 설치 없이 좀 더 손쉽게 구축할 수 있다.
  
  3. CORS와 프론트엔드의 프록시 서버
  
  CORS(Cross-Origin Resource Sharing)는 서버가 웹 브라우저에서 리소스를 로드할 때 다른 오리진(*프로토콜과 호스트 이름, 포트의 조합, 예를들어 https://kundo.com:12010/test의 주소에서 오리진은 https://kundo.com:12010임)을 통해 로드하지 못하게 하는 HTTP 헤더 기반 메커니즘이다.
  
  프론트엔드 개발 시 프론트엔드 서버를 만들어서 백엔드 서버와 통신할 때 주로 CORS 에러를 만나는데 이를 해결하기 위해 프론트엔드에서 프록시 서버를 만들기도 한다. 예를 들어 프론트 서버에서 요청되는 오리진을 본인 PC IP인 127.0.0.1:12010 (루프백 IP)로 변경하여 DNS를 타지 않고 바로 본인 PC로 연결되게 하는 것이다.

1.1.6 이터레이터 패턴 (itterator pattern)

 

• 이터레이터 패턴의 정의

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

 

1.1.7 노출모듈 패턴 (revealing module pattern)

 

• 노출모듈 패턴의 정의

• 노출모듈 패턴은 즉시 실행 함수(*함수를 정의하자마자 바로 호출 하는 함수, 초기화 코드나 라이브러리 내 전역 변수의 충돌 방지 등에 사용)를 통해 private, public 과 같은 접근 제어자를 만드는 패턴을 말한다.

1.1.8 MVC 패턴

 

• MVC 패턴의 정의

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

• MVC 패턴의 장점

• 애플리케이션의 구성 요소를 세 가지 역할로 구분하여 개발 프로세스에서 각각의 구성 요소에만 집중해서 개발할 수 있으며, 재사용성과 확장성이 용이하다.

• MVC 패턴의 단점

• 애플리케이션이 복잡해질수록 모델과 뷰의 관계가 복잡해진다.

• MVC

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

• MVC 패턴의 사용 예시

• 리액트 (React.js)
  리액트는 유저 인터페이스를 구축하기 위한 라이브러리로, '가상 DOM'을 통해 실제 DOM을 조작하는 것을 추상화해서 성능을 높였다.

 

1.1.9 MVP 패턴

• MVP패턴의 정의

• MVC패턴으로부터 파생되었으며 MVC의 C에 해당하는 컨트롤러가 프레젠터(presenter)로 교체된 패턴이다.
• 뷰와 프레젠터는 1:1관계이기 때문에 MVC 패턴보다 더 강한 결합을 지닌 디자인 패턴이다

1.1.9 MVVM 패턴

 

• MVVM패턴의 정의

• MVC의 C에 해당하는 컨트롤러가 뷰모델(view model)로 바뀐 패턴이다.
• 뷰모델은 뷰를 더 추상화한 계층이며, MVVM 패턴은 MVC 패턴과는 다르게 커맨드와 데이터 바인딩을 가지는 특징을 가지고 있다. 뷰와 뷰모델 사이의 양방향 데이터 바인딩을 지원하며 UI를 별도의 코드 수정 없이 재사용할 수 있고 단위 테스팅이 쉽다는 장점이 있다.

• MVVM 패턴의 사용 예시

• 뷰 (View.js)
  함수를 사용하지 않고 값 대입만으로도 변수가 변경되며 양방향 바인딩, html을 토대로 컴포넌트를 구축할 수 있다는 것이 특징이다.