[오혜성] 챕터 8: 자바스크립트 MV* 패턴

챕터_8/오혜성.md

@@ -0,0 +1,55 @@
+# 자바스크립트 MV* 패턴
+
+## MVC 패턴
+
+- 애플리케이션의 구조를 개선하기 위해 관심사의 분리를 활용하는 아키텍처 디자인 패턴
+
+> 대충 장고나 RoR 같은 도구를 썻엇어 가지고 느낌으로만 알고 있음
+> 근데 다 읽고 나서도 느낌적으로만 아는 느낌?
+
+```js
+// 태그된 템플릿 리터럴 문법을 이제 앎
+
+function taggedTemplateLiterals(...arg) {
+  console.log('arg is: ',arg);
+  const [str, ...values] = arg;
+  console.log('str is: ',str);
+  console.log('values is: ',values);
+}
+
+taggedTemplateLiterals`Hello ${'world'}!`;
+
+// arg is:  [ [ 'Hello ', '!' ], 'world' ]
+// str is:  [ 'Hello ', '!' ]
+// values is:  [ 'world' ]
+```
+
+## MVP
+
+- MVC 패턴의 변형
+> 이라지만 다른 점을 잘 모르겠음, 알고 싶지도 않은 느낌?
+> 초면이라 그런가
+
+## MVVM
+
+- MVC와 MVP를 기반으로 하는 아키텍처 패턴
+- 애플리케이션의 UI 개발 부분과 비즈니스 로직, 동작을 명확하게 분리
+
+- 다른 것들과 달리 뷰가 능동적
+  - 데이터 바인딩, 이벤트, 동작들을 포함하고 있어 뷰모델에 대한 이해를 필요로 하기 때문
+  - 상태를 관리할 책임이 없음. 뷰는 뷰모델과 정보 또는 상태를 항상 동기화된 상태로 유지함
+
+- 뷰모델
+  - 모델과 뷰모델의 속성은 양방향 데이터 바인딩을 통해 동기화되고 업데이트됨
+
+- MVC와는 다르게 전체 모델을 뷰에 노출하지 않음
+  - 이는 애플리케이션의 복잡도에 따라 보안 및 성능에 문제를 일으킬 수 있음
+
+## 최신
+
+- Vue.js는 공식적으로 뷰모델을 사용하는 MVVM 패턴이라고 주장함
+- 리액트는 이 패턴들로 볼 수 없음
+
+## 마치며
+
+- 개별 컴포넌트를 구성할 때 뷰모델이나 모델의 개념을 적용해 컴포넌트의 뷰를 구성하는 데에 도움이 될 수 있음