[면접을 위한 CS 전공지식 노트] 1.1 디자인 패턴

[ 면접을 위한 CS 전공지식 노트 ] 플래너
1일차	2일차	3일차	4일차	5일차
1.1	1.2	1장 예상질문	2.1	2.2
6일차	7일차	8일차	9일차	10일차
1장, 2장 복습	3.1	3.2	3.3	3.4
11일차	12일차	13일차	14일차	15일차
4.3	4.4	4.5	4.6	4.7

https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=292815727 

면접을 위한 CS 전공지식 노트

해당 교재를 공부하며 아카이브합니다!

---

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 디자인 패턴

프로그램을 설계할 때 발생했던 문제점들을 해결하는 방법을 하나의 '규약' 형태로 만들어 놓은 것

 

싱글톤 패턴

• 하나의 클래스가 오직 하나의 인스턴스만 가지고, 해당 인스턴스를 다른 모듈들이 공유하며 사용하는 패턴

➕ 인스턴스 생성할 때 드는 비용이 줄어든다

➖ 의존성이 높아진다

    ❕ 높은 의존성은 코드를 복잡하게 만들고 유지보수를 어렵게 만들 뿐만 아니라 모듈의 재사용성을 낮춘다  

➖ TDD(Test Driven Development)이 어렵다. 

    ❕ 미리 생성된 하나의 인스턴스를 기반으로 구현하는 패턴이기 때문에 각각의 독립적인 테스트마다 독립적인 인스턴스를 만들기 어렵다

• 데이터베이스 연결 모듈에 많이 사용된다
  • Node.js에서 MongoDB를 연결할 때 사용하는 mongoose 모듈
  • Node.js에서 MySQL을 연결할 때 사용

하나의 인스턴스(DB.instance)를 기반으로 객체 a, b를 생성해 사용하기 때문에 인스턴스 생성 비용을 아낄 수 있다. 위 코드에서 a, b는 하나의 공통된 인스턴스를 가리키고 있기 때문에 line 17에서의 a===b의 결과는 true이다

 

• 의존성 주입

싱글톤 패턴은 모듈 간의 결합을 강하게 만든다는 단점을 가지고 있는데, 의존성 주입을 통해 모듈 간 결합도를 낮출 수 있다. 메인 모듈과 하위 모듈 사이에 의존성 주입자가 개입해 하위 모듈들에게 간접적으로 의존성을 주입하는 방식인데, 이를 통해 하위 모듈에 대한 메인 모듈의 의존성이 떨어진다. (= decoupling이 된다) 

➕ 모듈을 교체하기 쉬운 구조가 되기 때문에 테스트와 마이그레이션이 쉬워진다

      모듈 간의 관계가 명확해진다

➖ 모듈들이 더 분리되어 클래스 수가 늘어나기 때문에 복잡성이 증가한다

      런타임 페널티가 생긴다

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

 

팩토리 패턴

• 객체 생성 부분을 상위 클래스와 하위 클래스로 분리해서 상위 클래스에서는 객체의 중요한 뼈대를 결정하고, 하위 클래스에서는 객체 생성에 관한 구체적인 내용을 결정하는 패턴

➕ 결합도가 낮아지고 유연성이 높아진다

      객체 생성 로직이 따로 떨어져 있기 때문에 유지 보수성이 증가된다

 

전략 패턴

• 객체의 행위를 바꾸고 싶을 때, 컨텍스트 안에서 전략을 바꿔주면서 상호 교체가 가능하게 만드는 패턴
• passport : 전략 패턴을 활용한 미들웨어 라이브러리. Node.js에서 인증 모듈 구현할 때 사용 
  
  • LocalStrategy 전략 : 서비스 내의 회원가입된 아이디와 비밀번호 기반으로 인증
  • OAuth 전략 : 외부의 다른 서비스를 기반으로 인증

 

옵저버 패턴

• 주체가 객체의 상태 변화를 관찰하다가 상태 변화가 있을 때마다 옵저버들에게 변화를 알려주는 패턴
• 트위터에서 활용 : 유저를 팔로우하면 유저가 포스팅을 올릴 때마다 팔로워에게 알림이 전송됨
• 이벤트 기반 시스템, MVC 패턴에 사용됨

❕ 자바: 상속과 구현

• 상속 : 자식 클래스가 부모 클래스를 상속받아 추가 및 확장해 사용하는 것. 재사용성 향상, 중복성 최소화
• 구현 : 부모 인터페이스를 자식 클래스에서 재정의해 사용. 반드시 부모 클래스의 메서드를 재정의해 구현해야 한다
• 상속은 일반 클래스와 abstract 클래스를 기반으로 구현하고, 구현은 인터페이스를 기반으로 구현한다

❕ 자바스크립트: 프록시 객체

• 프록시 객체 : 대상의 기본적인 동작의 작업을 가로챌 수 있는 객체. 두 개의 매개변수를 가진다
  
  • target : 프록시할 대상
  • handler : 프록시 객체의 target 동작을 가로챗서 정의할 동작들이 정해져 있는 함수
• 프록시 객체를 통해 옵저버 패턴을 구현할 수 있다
  • get() : 속성과 함수에 대한 접근 가로챔
  • has() : in 연산자의 사용 가로챔
  • set() : 속성에 대한 접근 가로챔

 

프록시 패턴과 프록시 서버

• 대상 객체에 접근하기 전 그 접근에 대한 흐름을 가로채 대상 객체 앞단의 인터페이스 역할을 하는 패턴
• 객체의 속성, 변환을 보완하고 보안, 데이터 검증, 캐싱, 로깅에 사용한다
• 프록시 서버 : 서버와 클라이언트 사이에서 클라이언트가 자신을 통해 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해주는 컴퓨터 시스템이나 응용 프로그램
  • nginx : 비동기 이벤트 기반의 웹 서버. Node.js 서버 앞단의 프록시 서버로 활용된다
                실제 포트를 숨기거나 정적 자원을 gzip 압축하거나 메인 서버 앞단에서의 로깅을 할 수 있다
  • CloudFlare : 전 세계적으로 분산된 서버를 통해 시스템의 콘텐츠 전달을 빠르게 할 수 있는 CDN 서비스
                          소규모 DDOS 공격을 쉽게 막아낼 수 있고, 별도의 인증서 설치 없이 HTTPS를 구축할 수 있다 

 

이터레이터 패턴

• 이터레이터(iterator)를 사용하여 컬렉션의 요소들에 접근하는 패턴
• 자료형의 구조와 상관없이 하나의 이터레이터 프로토콜로 순회할 수 있다
  • 이터레이터 프로토콜 : 이터러블한 객체들을 순회할 때 쓰이는 규칙
  • 이터러블한 객체 : 반복 가능한 객체로 배열을 일반화한 객체

 

노출모듈 패턴

• revealing module pattern
• 즉시 실행 함수를 통해 접근 제어자를 만드는 패턴
• 자바스크립트는 접근 제어자 없이 전역 범위에서 스크립트를 실행하기 때문에 노출모듈 패턴을 통해 private와 public 접근 제어자를 구현하기도 한다
  • CJS(CommonJS) : 노출모듈 패턴을 기반으로 만든 자바스크립트 모듈 방식

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

 

 

MVC 패턴

• Model, View, Controller로 이루어진 디자인 패턴
• React.js : MVC 패턴을 이용해 유저 인터페이스를 구축하는 라이브러리

➕ 재사용성과 확장성이 용이하다

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

 

• 모델(Model)
  • 애플리케이션의 데이터인 데이터베이스, 상수, 변수
• 뷰(View)
  
  • 모델을 기반으로 사용자가 볼 수 있는 화면
  • 모델이 가진 정보를 따로 저장하지 않고 단순히 화면 표시 정보만 가지고 있어야 한다
  • 변경 사항이 생기면 컨트롤러에 전달해야 한다
• 컨트롤러(Controller)
  • 모델과 뷰를 잇는 다리 역할을 하고, 메인 로직을 담당한다
  • 모델과 뷰의 생명주기를 관리한다

 

MVP 패턴

• MVC 패턴에서 파생되어, Controller가 Presenter로 교체된 패턴
• View와 Presenter가 일대일 관계이기 때문에 결합이 더 강하다

 

MVVM 패턴

• MVC 패턴에서 파생되어, Controller가 View Model로 교체된 패턴
• View Model
  • View를 더 추상화한 계층
  • 뷰와 뷰모델 사이의 양방향 데이터 바인딩을 지원
  • UI를 별도의 코드 수정 없이 재사용할 수 있고, 단위 테스트가 쉽다
• Vue.js
  • MVVM 패턴을 가진 프레임워크
  • 반응형 프론트엔드 프레임워크