[CS] 2. 디자인 패턴

Bomin·2022년 12월 27일
0

[CS] 

목록 보기
2/5
post-thumbnail

6. 이터레이터 패턴

Iterator pattern

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

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

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 의 이터레이터 프로토콜을 통해 순회 가능

*이터레이터 프로토콜 : 이터러블한 객체들을 순회할 때 쓰이는 규칙

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

7. 노출모듈 패턴

Revealing module pattern

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

자바스크립트는 전역 범위에서 스크립트가 실행 → 노출모듈 패턴을 통해 private, public 접근 제어자 구현

노출모듈 패턴 원리 기반의 자바스크립트 모듈 방식으로는 CJS(CommonJS) 모듈 방식이 있다.

const pukuba = (() => {
  const a = 1;
  const b = () => 2;
  const public = {
    c: 2,
    d: () => 3,
  };
  return public;
})();
console.log(pukuba);
console.log(pukuba.a);
// { c: 2, d: [Function: d] }
// undefined
  • a,b → 다른 모듈에서 사용할 수 없는 변수나 함수인 private 범위
  • c,d → 다른 모듈에서 사용할 수 있는 변수나 함수인 public 범위

8. MVC 패턴

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

애플리케이션의 구성 요소를 세 가지 역할로 구분하여 개발 프로세스에서 각각의 구성 요소에만 집중해서 개발할 수 있다.

장점 - 재사용성과 확장성이 용이

단점 - 애플리케이션이 복잡해질수록 모델과 뷰의 관계가 복잡

모델

  • 애플리케이션의 데이터 - 데이터베이스, 상수, 변수 등을 뜻함
  • 뷰에서 데이터 생성 or 수정 시 컨트롤러를 통해 모델 생성하거나 갱신

  • 모델을 기반으로 사용자가 볼 수 있는 화면 = 사용자 인터페이스 요소
  • 모델이 가지고 있는 정보를 따로 저장하지 않아야 하며 단순히 사각형 모양 등 화면에 표시하는 정보만!
  • 변경이 일어나면 컨트롤러에 전달

컨트롤러

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

MVC 패턴 - 리액트

MVC 패턴을 이용한 대표적인 라이브러리 → React.js

가상 DOM을 통해 실제 DOM을 조작하는 것을 추상화하여 성능 개선함

불변성(immutable)

  • state는 setState를 통해서만 수정이 가능
  • props를 기반으로 해서 만들어지는 컴포넌트인 pureComponent

단방향 바인딩의 적용과, 높은 자유도로 메타(페이스북)가 운영하고 있으며 넷플릭스, 트위터, 드롭박스, 우버, 페이팔, 마이크로소프트 등에서 사용하는 인기있는 FE 라이브러리이다.

9. MVP 패턴

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

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

10. MVVM 패턴

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

뷰모델 - 뷰를 더 추상화한 계층

MVC 패턴과는 다르게 커맨드와 데이터 바인딩을 가지는 것이 특징이다.

장점

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

MVVM 패턴 - 뷰

MVVM 패턴을 이용한 대표적인 프레임워크 → Vue.js

반응형(reactivity)이 특징인 프런트엔드 프레임워크

  • 함수를 사용하지 않고 값 대입만으로도 변수가 변경되며 양방향 바인딩, html을 토대로 컴포넌트를 구축할 수 있다.

재사용 가능한 컴포넌트 기반으로 UI를 구축할 수 있으며 BMW, 구글, 루이비통 등에서 사용한다.

*커맨드 : 여러 가지 요소에 대한 처리를 하나의 액션으로 처리 가능하게 하는 기법

*데이터 바인딩 : 화면에 보이는 데이터와 웹 브라우저의 메모리 데이터를 일치시키는 기법으로, 뷰모델을 변경하면 뷰가 변경

면접을 위한 CS 전공지식 노트 - 주홍철

profile
Frontend-developer

0개의 댓글