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

1. 1. 4 옵저버 패턴

옵저버 패턴이란 ?

주체가 어떤 객체의 상태 변화를 관찰하다가 상태 변화가 있을 때마다 메서드 등을 통해 옵저버 목록에 있는

옵저버들에게 변화를 알려주는 디자인 패턴

• 주체 : 객체의 상태 변화를 보고 있는 관찰자
• 옵저버 : 객체의 상태 변화에 따라 전달되는 메서드 등을 기반으로 추가 변화 사항이 생기는 객체

* 주체와 객체를 따로 두지 않고 상태가 변경되는 객체를 기반으로 구축하기도 함

 

# 옵저버 패턴을 활용한 서비스 _ 트위터

트위터의 옵저버 패턴

어떠한 주체를 팔로우했을 때 그 주체가 포스팅을 올리게 되면 옵저버들에게 새로운 트윗이 알람이 가게 된다.

 

옵저버 패턴은 주로 이벤트 기반 시스템에 사용하며 MVC (Model - View - Controller) 패턴에도 사용된다.

옵저버 패턴 구조

위의 사진을 예시로 들면, 주체라고 볼 수 있는 모델에 변경 사항이 생겨 update() 메서드로 옵저버인 뷰에

알려주고 이를 기반으로 컨트롤러가 작동하게 되는 것이다.

 

프론트엔드에서 많이 쓰는 프레임워크 Vue.js에서 ref나 reactive로 정의하면 해당 값이 변경되었을 때 자동으로 DOM에 있는 값이 변경되는데, 이는 프록시 객체를 이용한 옵저버 패턴을 이용하여 구현한 것이다.

• DOM : Document Object Model
             문서 객체 모델 (웹 브라우저상의 화면을 이루고 있는 요소들)
• 프록시 객체 : 어떠한 대상의 기본적인 동작의 작업을 가로챌 수 있는 객체
                        (기본적인 동작 - 속성 접근, 할당, 순회, 열거, 함수 호출 등)

 

---

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

프록시 패턴

프록시 패턴이란 ?

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

프록시 패턴

이를 통해 객체의 속성, 변환 등을 보완하고 보안, 데이터 검증, 캐싱, 로깅에 사용한다.

* 프록시 객체로 쓰이기도 하지만 프록시 서버로도 활용된다.

 

프록시 서버

프록시 서버란 ?

서버와 클라이언트 사이에서 클라이언트가 자신을 통해 다른 네트워크 서비스에 간접적으로 접속할 수 있게

해주는 컴퓨터 시스템이나 응용 프로그램을 가리킨다.

 

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

CORS란?

서버가 웹 브라우저에서 리소스를 로드할 때 다른 오리진을 통해 로드하지 못하게 하는 HTTP 헤더 기반

메커니즘

프록시 서버 이용하기 전                                                                             프록시 서버 이용 후

프론트엔드 개발 시 프론트엔드 서버를 만들어서 백엔드 서버와 통신할 때 서버의 포트 번호가 달라 주로 CORS 에러를 마주치는데, 이를 해결하기 위해서 프론트엔드에서 프록시 서버를 만들기도 한다.

프록시 서버를 이용하면 서버 앞단에 프록시 서버를 두어 CORS 에러도 해결되고 다양한 API 서버와의 통신도

매끄럽게 할 수 있다.

 

---

1. 1. 6 이터레이터 패턴

이터레이터 패턴이란 ?

이터레이터를 사용하여 컬렉션의 요소들에 접근하는 디자인 패턴

순회할 수 있는 여러가지 자료형의 구조와는 상관없이 이터레이터라는 하나의 인터페이스로 순회가 가능하다.

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

 

---

1. 1. 7 노출모듈 패턴

노출모듈 패턴이란 ?

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

JavaScript의 경우 접근 제어자가 존재하지 않고 전역 범위에서 스크립트가 실행된다. 그렇기에 노출모듈 패턴을 통해 접근 제어자를 구현하기도 한다.

• public : 클래스에 정의된 함수에서 접근 가능하며 자식 클래스와 외부 클래스에서 접근 가능한 범위
• protected : 클래스에 정의된 함수에서 접근 가능하고 자식 클래스에서는 접근 가능하지만
                    외부 클래스에서는 접근 불가능한 범위
• private : 클래스에 정의된 함수에서 접근 가능하지만 자식 클래스와 외부 클래스에서 접근 불가능한 범위
• 즉시 실행 함수 : 함수를 정의하자마자 바로 호출되는 함수
                             초기화 코드, 라이브러리 내 전역 변수의 충돌 방지 등에 사용

 

---

1. 1. 8 MVC 패턴

MVC 패턴이란 ?

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

대표적인 라이브러리 > React.js

MVC 패턴

모델

어플리케이션의 데이터인 데이터베이스, 상수, 변수 등을 뜻한다.

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

 

뷰

inputbox, textarea 등 사용자 인터페이스 요소를 나타낸다. (모델을 기반으로 사용자가 볼 수 있는 화면)

모델이 가지고 있는 정보를 따로 저장하지 않고 단순히 화면에 표시하는 정보만 가지고 있어야 한다.

변경이 일어나면 컨트롤러에 전달해야 한다.

 

컨트롤러

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

모델과 뷰의 생명주기도 관리하고, 모델이나 뷰의 변경 통지를 받으면 이를 해석해서 각각의 구성 요소에 해당

내용에 대해 알려준다.

 

---

1. 1. 9 MVP 패턴

MVP 패턴이란 ?

Model (모델) | View (뷰) | Presenter (프레젠터) 로 이루어진 디자인 패턴

MVP 패턴

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

 

---

1. 1. 10 MVVM 패턴

MVVM 패턴이란 ?

Model (모델) | View (뷰) | View Model (뷰 모델) 로 이루어진 디자인 패턴

MVVM 패턴

뷰와 뷰 모델 사이의 양방향 데이터 바인딩을 지원하고 UI를 별도의 코드 수정 없이 재사용할 수 있고 단위

테스팅하기 쉽다.

• 뷰 모델 : 뷰를 더 추상화한 계층
• 데이터 바인딩 : 화면에 보이는 데이터와 웹 브라우저의 메모리 데이터를 일치시키는 기법
                            뷰 모델을 변경하면 뷰가 변경된다.
• 커맨드 : 여러 가지 요소에 대한 처리를 하나의 액션으로 처리할 수 있게 하는 기법