From 4bea1ead3dde0b5308a04ce77c33664c971a1fd1 Mon Sep 17 00:00:00 2001 From: SangBeom Park Date: Sun, 17 Nov 2024 22:26:02 +0900 Subject: [PATCH] =?UTF-8?q?Update=20=EC=83=81=EB=B2=94.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../\354\203\201\353\262\224.md" | 52 ++++++++++++------- 1 file changed, 32 insertions(+), 20 deletions(-) diff --git "a/\354\261\225\355\204\260_8/\354\203\201\353\262\224.md" "b/\354\261\225\355\204\260_8/\354\203\201\353\262\224.md" index c9c6ee8..86f8436 100644 --- "a/\354\261\225\355\204\260_8/\354\203\201\353\262\224.md" +++ "b/\354\261\225\355\204\260_8/\354\203\201\353\262\224.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] ? `${placeholders[i]}` : ''}`) + .join(''); +}; + +const food1 = '과학'; +const food2 = '수학'; + +console.log(highlightValues`자신있는 과목은 ${food1} 그리고 ${food2}입니다.`); +// 자신있는 과목은 과학 그리고 수학입니다. +``` + ## MVP -> 프레젠터는 뷰에 대한 UI 비즈니스 로직을 담당 -> 프레젠터는 뷰와 분리되어 있으며, 인터페이스를 통해 뷰와 통신함 +프레젠터는 뷰에 대한 UI 비즈니스 로직을 담당 +프레젠터는 뷰와 분리되어 있으며, 인터페이스를 통해 뷰와 통신함 ## MVVM (model-view-viewModel) 선언적 데이터 바인딩을 활용하여 뷰에 대한 작업을 다른 계층과 분리할 수 있도록 도와줌 -#### 선언적 데이터 바인딩? - -> vanila javascript +> ## 선언적 데이터 바인딩이 뭔데? +> 바닐라 자바스크립트 예시 > ```js >
> @@ -44,7 +61,7 @@ > > > ``` -> 선언적 데이터 바인딩 +> 선언적 데이터 바인딩 적용한 예시 > - 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 ( >
-> value={message} -> onChange={handleChange} -> /> ->

{message}

+> +>

{register.value}

>
> ); > } @@ -101,8 +115,6 @@ vue.js는 공식적으로 뷰모델을 사용하는 MVVM 패턴이라고 주장함 > 양방향 바인딩 때문에 -> 책에서 리액트를 예시로 들면서 모델 => 비동기 데이터, 뷰 => 컴포넌트, 컨트롤러 => 훅 으로 이해하는게 도움될 수 이지만 비유일 뿐 엄밀한 뜻은 아니라고 함 -> 컨트롤러 좀 헷갈림