diff --git "a/\354\261\225\355\204\260_8/\354\230\244\355\230\234\354\204\261.md" "b/\354\261\225\355\204\260_8/\354\230\244\355\230\234\354\204\261.md" new file mode 100644 index 0000000..67d65b6 --- /dev/null +++ "b/\354\261\225\355\204\260_8/\354\230\244\355\230\234\354\204\261.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 패턴이라고 주장함 +- 리액트는 이 패턴들로 볼 수 없음 + +## 마치며 + +- 개별 컴포넌트를 구성할 때 뷰모델이나 모델의 개념을 적용해 컴포넌트의 뷰를 구성하는 데에 도움이 될 수 있음