Add 1.1.6 Iterator pattern ~ 1.1.10 MVVM pattern

Computer_Science_Note/1장_디자인_패턴과_프로그래밍_패러다임.md

@@ -206,36 +206,127 @@ console.log(p.name); // Hello World!
 
 - `127.0.0.1`(loopback IP): 본인 PC 서버의 IP로 DNS를 거치지 않고 바로 본인 PC 서버로 연결된다.
 
-### 1.1.6 이터레이터 패턴
+### 1.1.6 이터레이터 패턴(Iterator pattern)
 
-```js
+- 이터레이터를 사용하여 컬렉션(collection)의 요소들에 접근하는 디자인 패턴
 
-```
+- 순회할 수 있는 여러 가지 자료형의 구조와는 상관없이 이터레이터라는 하나의 인터페이스로 순회가 가능하다.
 
-### 1.1.7 노출모듈 패턴
+|                     |                                           |
+| ------------------- | ----------------------------------------- |
+| 이터레이터 프로토콜 | 이터러블한 객체들을 순회할 때 쓰이는 규칙 |
+| 이터러블한 객체     | 반복 가능한 객체로 배열을 일반화한 객체   |
 
-```js
+### 1.1.7 노출모듈 패턴(Revealing module pattern)
 
-```
+- 즉시 실행 함수를 통해 접근 제어자(private, public 등)를 만드는 패턴
+
+  - 자바스크립트의 경우, 접근 제어자가 존재하지 않으므로 전역 범위에서 스크립트가 실행된다.
+
+- 노출모듈 패턴을 통해 private, public 접근 제어자를 구현하기도 한다.
+
+- CJS(CommonJS) 모듈 방식: 노출모듈 패턴 원리를 기반으로 만든 자바스크립트 모듈 방식
+
+|           | 클래스에 정의된 함수에서 접근 가능 유무 | 자식 클래스에서 접근 가능 유무 | 외부 클래스에서 접근 가능 유무 |
+| --------- | --------------------------------------- | ------------------------------ | ------------------------------ |
+| private   | O                                       | X                              | X                              |
+| protected | O                                       | O                              | X                              |
+| public    | O                                       | O                              | O                              |
+
+- 즉시 실행 함수: 함수를 정의하자마자 바로 호출하는 함수
+  - 초기화 코드, 라이브러리 내 전역 변수 충돌 방지 등에 사용한다.
 
 ### 1.1.8 MVC 패턴
 
-```js
+```mermaid
+flowchart LR
 
+A(Controller) --> |갱신|B(View)
+B --> |유저 이벤트|A
+
+A --> |갱신|C(Model)
+C --> |알림|A
 ```
 
+- 애플리케이션의 구성 요소를 세 가지 역할로 구분하여 개발 프로세스에서 각각의 구성 요소에만 집중하여 개발할 수 있다.
+
+- 재사용성, 확정성 용이 vs 애플리케이션이 복잡할수록 모델-뷰 관계가 복잡해진다.
+
+#### 모델
+
+- 애플리케이션의 데이터인 데이터베이스, 상수, 변수
+
+#### 뷰
+
+- 모델을 기반으로 사용자가 볼 수 있는 화면: inputbox, checkbox, textarea 등 사용자 인터페이스 요소
+
+- 모델이 가지고 있는 정보는 따로 저장하지 않고 단순히 사각형 모양 등 화면에 표시하는 정보만 가지고 있어야 한다.
+
+- 변경이 일어나면 컨트롤러에 이를 전해야 한다.
+
+#### 컨트롤러
+
+- 이벤트 등 메인 로직 담당: 하나 이상의 모델과 하나 이상의 뷰를 잇는 다리 역할
+
+- 모델과 뷰의 생명 주기를 관리한다.
+
+- 모델이나 뷰의 변경 통지를 받으면 이를 해석하여 각각의 구성 요소에 해당 내용에 대해 알려준다.
+
+#### MVC 패턴의 예: 리액트(React.js)
+
+- 유저 인터페이스를 구축하기 위한 라이브러리
+
+- 가상 DOM을 통해 실제 DOM을 조작하는 것을 추상화하여 성능을 높인다.
+
+- 불변성(immutable): state는 setState를 통해서만 수정 가능 + props를 기반으로 만들어지는 pureComponent 존재
+
+- 단방향 바인딩 적용 및 높은 자유도를 가진다.
+
 ### 1.1.9 MVP 패턴
 
-```js
+- MVC 패턴으로부터 파생되었다.
+
+```mermaid
+flowchart LR
+
+A(Presenter) --> |모델 갱신|B(Model)
+B --> |모델 변경|A
 
+A --> |UI 갱신|C(View)
+C --> |유저 이벤트|A
 ```
 
+- 뷰-프레젠터는 1:1 관계이므로 MVC 패턴보다 더 강한 결합을 지니고 있다.
+
 ### 1.1.10 MVVM 패턴
 
-```js
+```mermaid
+flowchart LR
+
+A(View) <--> |data binding, command|B(View Model: 뷰를 좀 더 추상화한 계층)
+B --> |알림: nofify|A
 
+B --> |갱신|C(Model)
+C --> |알림: nofify|B
 ```
 
+|              |                                                                                                         |
+| ------------ | ------------------------------------------------------------------------------------------------------- |
+| data binding | 화면에 보이는 데이터와 웹 브라우저의 메모리 데이터를 일치시키는 기법: 뷰 모델을 변경하면 뷰가 변경된다. |
+| command      | 여러 가지 요소에 대한 처리를 하나의 액션으로 처리할 수 있게 하는 기법                                   |
+
+- 뷰 - 뷰 모델 사이의 양방향 데이터 바인딩을 지원한다.
+- UI를 별도의 코드 수정없이 사용할 수 있다.
+- 단위 테스트하기 용이하다.
+
+#### MVVM 패턴의 예: 뷰(Vue.js)
+
+- watch, computed 등 반응형(reactivity)이 특징인 프론트엔드 프레임워크
+
+- 함수를 사용하지 않고 값 대입만으로도 변수가 변경된다.
+
+- 양방향 바인딩, html을 토대로 컴포넌트를, 재사용 가능한 컴포넌트 기반으로 UI를 구축할 수 있다.
+
 ## 1.2 프로그래밍 패러다임(Programming paradigm)
 
 - 프로그래머에게 프로그래밍의 관점을 갖게 해주는 개발 방법론