[박상범] 챕터 8: 자바스크립트 MV* 패턴

챕터_8/상범.md

@@ -0,0 +1,121 @@
+# 자바스크립트 MV* 패턴
+
+## MVC 패턴
+
+비즈니스 데이터(모델)과 UI(뷰)를 분리하고 구성요소(컨트롤러)가 로직과 사용자 입력을 관리하는 구조
+
+## 자바스크립트의 MVC (model-view-controller)
+
+> - view: html, css로 만들어진 결과물
+> - model: 객체 or 서버 api로 받는 데이터 or db 데이터 or etc.. 아키텍처에 따라 범주가 달라질듯
+> - controller: model의 데이터를 받아서 화면에 그리고, 화면으로 부터 사용자 동작을 받아서 model 변경하고.. 이런 model과 view 사이에 중간자 역할 하는게 controller   
+>    - jquery가 이벤트 핸들링, 사용자 입력 처리같은 사용자 액션 감지하고 처리하는 역할도 하니까 controller 라고 생각했음
+>    - 근데 jquery는 DOM 조작이나 스타일 변경도 하니까 UI 업데이트 측면에선 view 역할도 함 => MVC 아키텍처를 명확히 지원 안하니까 controller, view 역할 섞이고 스파게티됨 => 유지보수 저하   
+>    - 그래서 Backbone.js 같은 라이브러리 사용하면 jquery 사용하면서 mvc 패턴을 명확히 나눠서 사용할 수 있게 도와준다고 함(안써봐서 모름)   
+
+## 템플릿
+태그 함수를 유용하게 사용할 수 있는 예시들이 [mdn](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates)에도 많았음 ㄷ ㄷ 이게 가능한지는 몰랐음
+
+아래처럼 사용할 수 있는데 알아두면 유용하게 쓰일듯?!
+```js
+const highlightValues = (strings, ...placeholders) => {
+    return strings
+    .map((string, i) => `${string}${placeholders[i] ? `<b>${placeholders[i]}</b>` : ''}`)
+    .join('');
+};
+
+const food1 = '과학';
+const food2 = '수학';
+
+console.log(highlightValues`자신있는 과목은 ${food1} 그리고 ${food2}입니다.`);
+// 자신있는 과목은 <b>과학</b> 그리고 <b>수학</b>입니다.
+```
+
+## MVP
+프레젠터는 뷰에 대한 UI 비즈니스 로직을 담당   
+프레젠터는 뷰와 분리되어 있으며, 인터페이스를 통해 뷰와 통신함   
+
+## MVVM (model-view-viewModel)
+선언적 데이터 바인딩을 활용하여 뷰에 대한 작업을 다른 계층과 분리할 수 있도록 도와줌
+
+> ## 선언적 데이터 바인딩이 뭔데?
+> 바닐라 자바스크립트 예시
+> ```js
+> <div>
+>   <input id="input" type="text" />
+>   <p id="message">hello, world</p>
+> </div>
+> 
+> <script>
+>   let message = "";
+> 
+>   const input = document.getElementById("input");
+>   const messageElement = document.getElementById("message");
+> 
+>   input.value = message;
+> 
+>   input.onchange = (event) => {
+>     message = event.target.value;
+>     messageElement.textContent = event.target.value;
+>   };
+> </script>
+> 
+> ```
+> 선언적 데이터 바인딩 적용한 예시
+> - react에서 state와 props를 통해 선언적으로 데이터와 UI를 연결하는거나
+> - `{{value}}` 같은 치환문법 또는 `v-bind="value"`와 같은 뷰 양방향 데이터 바인딩을 말하는거 같음
+> ```js
+> function App() {
+>   const [message, setMessage] = React.useState("");
+> 
+>   return (
+>     <div>
+>       <input 
+>         value={message} 
+>         onChange={(e) => setMessage(e.target.value)} 
+>       />
+>       <p>{message}</p>
+>     </div>
+>   );
+> }
+> ```
+
+> 근데 위 코드에서 setState()가 viewModel 역할을 하는게 아닌가 생각이 들었고, view 와 viewModel을 명시적으로 분리하면 mvvm이 되지 않을까 생각이 들었음
+
+> ```js
+> const useInput = () => {
+>   const [value, setValue] = React.useState("");
+> 
+>   const onChange = (e) => {
+>     setValue(e.target.value);
+>   };
+> 
+>   return { value, onChange };
+> }
+> 
+> const App = () => {
+>   const register = useInput();
+> 
+>   return (
+>     <div>
+>       <input {...register} />
+>       <p>{register.value}</p>
+>     </div>
+>   );
+> }
+> ```
+
+
+
+## mv* 패턴과 리액트
+
+리액트는 뷰 계층을 원하는대로 구성하게 해주는 렌더링 라이브러리 일분이다.  
+기존 MVC와 같이 중앙 제어 역할을 하는 컨트롤러 혹은 라우터 기능이 포함되어 있지 않다.  
+
+vue.js는 공식적으로 뷰모델을 사용하는 MVVM 패턴이라고 주장함
+> 양방향 바인딩 때문에
+
+
+
+
+