1. 디자인 패턴

1️⃣ 디자인패턴

• 객체 간의 상호 관계 등을 이용하여 해결할 수 있도록 하나의 '규약'형태로 만들어 놓음

1-1 싱글톤 패턴

• 하나의 클래스에 하나의 인스턴스만 가지는 패턴
• 데이터베이스 연결 모듈에 많이 사용함
• 하나의 인스턴를 다른 모듈들이 공유하며 사용해서 비용이 줄어들지만 의존성은 높음

✔ 단점

• TDD(test driven development)를 할 때 단위 테스트를 하는데 단위 테스트는 서로 독립적이어야 함
• 그러나 싱글톤패턴은 하나의 인스턴스를 기반으로 구현해서 테스트마다 독립적인 인스턴스 만들기 어려움
• 모듈 간의 결합이 강함

✔ 의존성 주입

• 싱글톤 패턴은 모듈간의 결합이 강하다는 단점은 의존성 주입을 통해 조금 더 느슨하게 만듦

• 의존성 주입자가 간적접으로 의존성을 주입
• 테스팅, 마이그레이션 수월함, 애플리케이션 의존성 방향이 일관되고 쉽게 추론 가능

✔ 의존성 주입의 단점

• 모듈들이 분리되어 클래스 수가 늘어나 복잡성이 증가
• 런타임 패널티

1-2 팩토리 패턴

• 객체 생성부분을 떼어내 추상화한 패턴으로 상속 관계에 있는 두 클래스에서 상위 클래스가 뼈대를 결정하고 하위클래스가 객체 생성에 관한 구체적인 내용 결정
• 상위클래스와 하위클래스로 분리되어 느슨한 결합을 가지고 유연성을 가짐
• 리팩토링하더라도 객체 생성 로직이 떨어져있어 한 곳만 고칠 수 있게 되니 유지보수성 증가

ex) CoffeFactory라는 상위클래스가 뼈대를 만들고 LatteFactory, EspressoFactory라는 하위클래스가 구체적인 내용 결정

1-3 전략 패턴

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

1-4 옵저버 패턴

• 주체가 어떤 객체의 상태 변화를 관찰하다가 상태 변화가 있을 때마다 옵저버들에게 변화를 알려주는 패턴

ex) 트위터, 유튜브

• 내가 주체를 팔로우 했다면 주체가 포스팅을 올렸을 때 알림이 팔로워에게 가야함

✔ 자바스크립트에서의 옵저버 패턴

• 프록시 객체를 통해 구현할 수도 있다.

✔ 프록시 객체

• 어떠한 대상의 기본적인 동작의 작업을 가로챌 수 있는 객체를 뜻하고 두 개의 매개변수를 가진다.
• target(프록시할 대상)
• handler(프록시 객체의 target 동작을 가로채서 정의할 동작들이 정해져있는 함수)

const handler = {
  get: function(target, name) {
    return name === 'name' ? `${target.a} ${target.b}` : target[name]
  }
}
const p = new Proxy({a: 'KUNDOL', b: 'IS AMUMU ZANGIN'}, handler)
console.log(p.name) // KUNDOL IS AMUMU ZANGIN

handler에 'name이라는 속성에 접근할 때는 a와 b를 합쳐서 문자열을 만들어라'로 구현함
따라서 p.name에 접근할 때 그 부분을 가로채서 문자열을 만드는 것을 볼 수 있다.

1-5 프록시 패턴과 프록시 서버

• 앞서 설명한 프록시 객체는 프록시 패턴이 녹아들어 있는 객체이다.

✔ 프록시 패턴

• 프록시 패턴은 대상 객체에 접근하기 전 접근에 대한 흐름을 가로채 인터페이스 역할을 하는 디자인 패턴
• 보안, 데이터 검증, 캐싱, 로깅에 사용
• 프록시 서버로도 활용

✔ 프록시 서버

• 프록시서버는 서버와 클라이언트 사이에서 클라이언트가 자신을 통해 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해주는 컴퓨터 시스템이나 응용프로그램을 가르킴
• nginx
• node.js의 버퍼 오버플로우 취약점을 예방하기 위해 nginx를 프록시 서버로 앞단에 놓고 node.js를 뒤쪽에 놓음
• 익명 사용자의 직접적인 서버 접근은 차단하고 간접적으로 한 단계를 거침으로써 보안성을 더욱 강화

✔ 프록시 서버로 쓰는 CloudFlare

• 장점: DDOS 공격 방어, HTTPS 구축

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

• 프론트엔드에서는 3000으로 테스팅하는데 백엔드 서버는 2010이라면 포트번호가 다르기 때문에 CORS 에러가 나타난다.
• 이때 프록시 서버를 둬서 프론트엔드 서버에서 요청되는 origin을 2010으로 바꾼다.

1-6 이터레이터 패턴

• 이터레이터를 사용하여 컬렉션의 요소들에 접근하는 패턴
• 이터레이터라는 하나의 인터페이스로 순회 가능

1-7 노출모듈 패턴

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

✔ 자바스크립트에서의 노출모듈패턴

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

• public: 자식클래스와 외부클래스에서 접근 가능한 범위
• protected: 자식클래스에서 접근 가능하지만 외부클래스에서 접근 불가능
• private: 자식 클래스와 외부클래스에서 접근 불가능

1-8 MVC 패턴

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

• 재사용성과 확정성이 용이하지만 애플리케이션 규모가 커지면 모델과 뷰의 관계가 복잡해짐

✔ MVC 패턴의 React

1-9 MVP 패턴

• MVC 패턴에서 파생된 것으로 C가 presenter로 교체된 패턴

• 뷰와 프레젠터는 일대일 관계이므로 MVC 패턴보다 더 강한 결합을 지님

1-10 MVVM 패턴

• C가 view model로 바뀐 패턴

• 뷰모델은 뷰를 더 추상화한 게층으로 MVC패턴과 다르게 커멘드와 데이터 바인딩을 가짐
• 뷰와 뷰모델 사이의 양방향 데이터 바인딩을 지원하고 UI를 별도의 코드 수정 없이 재사용하며 단위 테스팅이 쉬움

✔ MVVM 패턴의 Vue