Update 상범.md

챕터_8/상범.md

@@ -13,16 +13,33 @@
 >    - 근데 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 비즈니스 로직을 담당   
-> 프레젠터는 뷰와 분리되어 있으며, 인터페이스를 통해 뷰와 통신함   
+프레젠터는 뷰에 대한 UI 비즈니스 로직을 담당   
+프레젠터는 뷰와 분리되어 있으며, 인터페이스를 통해 뷰와 통신함   
 
 ## MVVM (model-view-viewModel)
 선언적 데이터 바인딩을 활용하여 뷰에 대한 작업을 다른 계층과 분리할 수 있도록 도와줌
 
-#### 선언적 데이터 바인딩?
-
-> vanila javascript
+> ## 선언적 데이터 바인딩이 뭔데?
+> 바닐라 자바스크립트 예시
 > ```js
 > <div>
 >   <input id="input" type="text" />
@@ -44,7 +61,7 @@
 > </script>
 > 
 > ```
-> 선언적 데이터 바인딩
+> 선언적 데이터 바인딩 적용한 예시
 > - react에서 state와 props를 통해 선언적으로 데이터와 UI를 연결하는거나
 > - `{{value}}` 같은 치환문법 또는 `v-bind="value"`와 같은 뷰 양방향 데이터 바인딩을 말하는거 같음
 > ```js
@@ -63,29 +80,26 @@
 > }
 > ```
 
-근데 위 코드에서 setState()가 viewModel 역할을 하는게 아닌가 생각이 들었고, view 와 viewModel을 명시적으로 분리하면 mvvm 아닌가 생각이 들었음
+> 근데 위 코드에서 setState()가 viewModel 역할을 하는게 아닌가 생각이 들었고, view 와 viewModel을 명시적으로 분리하면 mvvm이 되지 않을까 생각이 들었음
 
 > ```js
-> const useMessageViewModel = () => {
->   const [message, setMessage] = React.useState("");
+> const useInput = () => {
+>   const [value, setValue] = React.useState("");
 > 
->   const handleChange = (e) => {
->     setMessage(e.target.value);
+>   const onChange = (e) => {
+>     setValue(e.target.value);
 >   };
 > 
->   return { message, handleChange };
+>   return { value, onChange };
 > }
 > 
 > const App = () => {
->   const { message, handleChange } = useMessageViewModel();
+>   const register = useInput();
 > 
 >   return (
 >     <div>
->       <input 
->         value={message} 
->         onChange={handleChange} 
->       />
->       <p>{message}</p>
+>       <input {...register} />
+>       <p>{register.value}</p>
 >     </div>
 >   );
 > }
@@ -101,8 +115,6 @@
 vue.js는 공식적으로 뷰모델을 사용하는 MVVM 패턴이라고 주장함
 > 양방향 바인딩 때문에
 
-> 책에서 리액트를 예시로 들면서 모델 => 비동기 데이터, 뷰 => 컴포넌트, 컨트롤러 => 훅 으로 이해하는게 도움될 수 이지만 비유일 뿐 엄밀한 뜻은 아니라고 함   
-> 컨트롤러 좀 헷갈림