[CS] 디자인 패턴과 프로그래밍 패러다임2

디자인 패턴

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

ㅁ 이터레이터 패턴

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

const mp = new Map() 
mp.set('a', 1)
mp.set('b', 2)
mp.set('cccc', 3) 
const st = new Set() 
st.add(1)
st.add(2)
st.add(3) 
const a = []
for(let i = 0; i < 10; i++)a.push(i)

for(let aa of a) console.log(aa)
for(let a of mp) console.log(a)
for(let a of st) console.log(a) 
/* 
a, b, c 
[ 'a', 1 ]
[ 'b', 2 ]
[ 'c', 3 ]
1
2
3
*/

다른 자료 구조인 set, map임에도 똑같은 for a of b 라는 이터레이터 프로토콜을 통해 순회한다.

ㅁ 노출모듈 패턴

즉시 실행 함수를 통해 private, public 같은 접근 제어자를 만드는 패턴. 접근 제어자가 존재하지 않는 JS는 전역 범위에서 스크립트가 실행되기에, 노출모듈 패턴을 통해 접근 제어자를 구현한다.

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

c,d는 다른 모듈에서 사용할 수 있는 public의 범위를 가진다.

ㅁ MVC 패턴

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

각각의 구성 요소에만 집중해 개발할 수 있고, 재사용성과 확장성이 용이하다는 장점이 있다. 다만 애플리케이션이 복잡해질수록 모델과 뷰의 관계가 복잡해지는 단점이 있다.

MVC 패턴 > 모델

애플리케이션의 데이터인 데이터베이스, 상수, 변수 등을 뜻한다. 뷰에서 데이터를 생성하거나 수정하면 컨트롤러를 통해 모델을 생성하거나 갱신한다.

MVC 패턴 > 뷰

input, checkbox, textarea 등 사용자 인터페이스 요소를 나타낸다. 모델을 기반으로 사용자가 볼 수 있는 화면을 뜻하며 모델이 가지고 있는 정보를 따로 저장하지 않아야 하고 화면에 표시되는 정보만 가지고 있어야 한다. 변경이 일어나면 컨트롤러에 이를 전달해야 한다.

MVC 패턴 > 컨트롤러

하나 이상의 모델과 하나 이상의 뷰를 잇는 다리 역할을 하며 이벤트 등 메인 로직을 담당한다. 모델과 뷰의 생명 주기도 관리하고 변경 통지를 받으면 이를 해석해 각각의 구성 요소에 해당 내용을 알려준다.

MVP 패턴

MVC패턴에서 파생되었으며 C에 해당하는 컨트롤러가 프레젠터(presenter)로 교체된 패턴이다.

뷰와 프레젠터는 일대일 관계이기 때문에 MVC패턴보다 더 강한 결합을 지닌 패턴이다.

MVVM 패턴

MVC의 C에 해당하는 컨트롤러가 뷰모델(view model)로 바뀐 패턴이다.

뷰모델은 뷰를 더 추상화한 계층. MVC패턴과는 다르게 커맨드* 와 데이터 바인딩*을 가지는 것이 특징이다. 뷰와 뷰모델 사이의 양방향 데이터 바인딩을 지원하며 UI를 별도의 코드 수정 없이 재사용할 수 있고 단위 테스팅이 용이하다.

---

용어 정리

ㅁ 오리진
프로토콜과 호스트 이름, 포트의 조합. https://dtwogud.github.io/etc/cs/ 에서 오리진은 https://dtwogud.github.io 이다.

ㅁ 이터러블한 객체
반복 가능한 객체로 배열을 일반화한 객체

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

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

ㅁ 커맨드
여러가지 요소에 대한 처리를 하나의 액션으로 처리할 수 있게 하는 기법

ㅁ 데이터 바인딩
화면에 보이는 데이터와 웹 브라우저의 메모리 데이터를 일치시키는 기법. 뷰모델을 변경하면 뷰가 변경된다.