면접을 위한 CS 전공지식 노트 [CHAPTER 1] (2)

1.1.6 이터레이터 패턴

이터레이터 (Iterator pattern)패턴이란?

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

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

 

 

자바스크립트에서의 이터레이터 패턴

const mp = new Map();
mp.set('a', 1);
mp.set('b', 2);
mp.set('c', 3);

const st = new Set();
st.add(1)
st.add(2)
st.add(3)

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

• 다른 자료구조인 set, map 임에도 for ~ of ~ 로 순회 가능함.

 

 

 

1.1.7 노출모듈 패턴

노출모듈 패턴(revealing module pattern)이란?

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

- 자바스크립트는 (private.public)접근 제어자가 존재하지 않고, 전역 범위에서 스크립트가 실행된다.

❗️따라서 노출모듈 패턴을 통해 접근 제어자를 구현하기도 한다.  [CJS(CommonJS)] => 자바스크립트 모듈 방식.

 

 

 

1.1.8 MVC 패턴

MVC 패턴이란?

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

 

 

특징?

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

 

장점?

• 재사용성과 확장성이 용이하다.

 

단점?

• 애플리케이션이 복잡해질수록 뷰와 모델의 관계가 복잡해진다.

 

Model (모델)

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

 

View(뷰)

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

 

Controller(컨트롤러)

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

---

1.1.9 MVP 패턴

MVP 패턴이란?

- MVC 패턴에서 파생되었다.

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

 

 

 

 

1.1.10 MVVM 패턴

MVVP 패턴이란?

- 뷰모델은 뷰를 더 추상화한 계층이다.

- MVC 패턴과는 다르게 커맨드와 데이터 바인딩을 가진다.

- 뷰와 뷰 모델 사이의 양방향 데이터 바인딩을 지원한다.

- UI를 별도의 코드 수정없이 재사용할 수 있고 단위 테스팅하기 쉽다.

 

 

💡 MVVM 패턴의 예로는 뷰 (Vue.js)가 있다!

•