[CS] 1-1. 디자인 패턴

📃 싱글톤 패턴 : 생성자 패턴

✅ 개념

• 하나의 클래스에 오직 하나의 인스턴스만 가지는 패턴
• 하나의 클래스를 기반으로 단 하나의 인스턴스를 만들어 이를 기반으로 로직을 만드는데 사용
• 보통 데이터베이스 연결 모듈에 많이 사용

✅ 장단점

• 장점 : 인스턴스를 만들어두고 다른 모듈들이 공유하여 사용하기 때문에 생성 비용이 줄어듦
• 단점 : 의존성이 높아짐 (모듈 간의 결합을 강하게 만듦)

✅ 구조

1. 하나의 인스턴스
2. 스태틱 함수로 객체 접근

• 메서드를 통해서만 인스턴스 접근이 가능함

✅ 예시코드

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

const a = new Singleton();
const b = new Singleton();
console.log(a===b); // true

---

📃 팩토리 패턴 : 생성 패턴

✅ 개념

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

✅ 특징

• 생성 패턴 중 가장 기본이 되는 패턴
• 상위 /하위 클래스가 분리되기 때문에 느슨한 결합을 가짐
• 유지 보수성이 증가
• 클래스 객체 생성 처리를 팩토리 인터페이스, 클래스를 통해 위임처리
• 조건 로직이 필요 (어떤 객체를 생성할지)
• 클래스간 의존도가 낮음
  • 확장이 쉽고
  • 유지보수가 용이

---

📃 전략 패턴 : 행위 패턴

✅ 개념

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

---

📃 옵저버 패턴 : 행위 패턴

✅ 개념

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

✅ 특징

• 주로 이벤트 기반 시스템에서 사용
• MVC(Model - View - Controller) 패턴에도 사용
• 자바스크립트에서의 옵저버 패턴은 프록시 객체를 통해 구현할 수 있음
  • 프록시 객체 : 어떠한 대상의 기본적인 동작의 작업을 가로챌 수 있는 객체
  • 프록시 객체는 2개의 파라미터를 가짐
    • target : 프록시할 대상
    • handler : target 동작을 가로채고 어떠한 동작을 할 것인지가 설정되어 있는 함수

---

📃 프록시 패턴과 프록시 서버

✅ 프록시 패턴 개념

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

✅ 프록시 패턴 적용 사례

• Access Control / Validation
• Caching / Loggine
• Debit / Check card

✅ 프록시 서버

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

✅ 프록시 서버 예시

• nginx : Node.js 서버 앞단의 프록시 서버로 사용
  • "Node.js의 버퍼 오버플로우 취약점을 예방하기 위해서는 nginx를 프록시 서버로 앞단에 놓고 Node.js를 뒤쪽에 놓는 것이 좋다." by 라이언 달(Node.js 창시자)
• CloudFlare : 웹 서버 앞단에 프록시 서버로 두어 DDOS 공격 방어나 HTTPS 구축에 사용
• CORS와 프론트엔드 프록시 서버
  • CORS : 서버가 웹 브라우저에 리소스를 로드할 때 다른 오리진을 통해 로드하지 못하게 하는 HTTP 헤더 기반의 메커니즘
  • 프론트엔드 개발 시 프론트엔드 서버를 만들어 백엔드 서버와 통신할 때 주로 발생
  • 프록시 서버를 통해서 프론트엔드 서버에서 요청되는 오리진을 백엔드 서버 포트 번호로 변경

---

📃 이터레이터 패턴

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

---

📃 노출모듈 패턴

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

---

📃 MVC 패턴

• 모델, 뷰, 컨트롤러로 이루어진 디자인 패턴
• 재사용성과 확장성이 용이하다는 장점
• 복잡해질수록 모델과 뷰의 관계가 복잡해지는 단점
• 대표적인 프레임워크로 자바 플랫폼을 위한 오픈 소스 애플리케이션인 스프링이 있음

✔️ 모델

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

✔️ 뷰

• 사용자 인터페이스 요소 즉, 모델을 기반으로 사용자가 볼 수 있는 화면을 뜻함
• 화면에 표시하는 정보만 가지고 있음
• 변경이 일어나면 컨트롤러에 이를 전달해야 함

✔️ 컨트롤러

• 모델과 뷰를 잇는 다리 역할을 하며 이벤트 등 메인 로직을 담당
• 모델과 뷰의 생명주기도 관리

---

📃 MVP 패턴

• MVC에서 C에 해당하는 컨트롤러가 프레젠터로 교체된 패턴
• 뷰와 프레젠터는 1:1 관계이기 때문에 MVC패턴보다 더 강한 결합을 지닌 디자인 패턴---

---

📃 MVVM 패턴

• MVC에서 C에 해당하는 컨트롤러 뷰모델로 바뀐 패턴
• 대표적인 프레임워크로 뷰(Vue.js)가 있음

✔️ 뷰모델

• 뷰를 더 추상화한 패턴
• 커맨드와 데이터 바인딩을 가지는 것이 특징
• 뷰와 뷰 모델 사이의 양방향 데이터 바인딩을 지원
• UI를 별도의 코드 수정 없이 재사용할 수 있고, 단위 테스팅하기 쉬움