Frontend 개발자에게 잘 알려주지 않는 Component 개발로 보는 Client Application의 구조와 패턴

https://ko.wikipedia.org/wiki/%EB%AA%A8%EB%8D%B8-%EB%B7%B0-%EC%BB%A8%ED%8A%B8%EB%A1%A4%EB%9F%AC

MVC를 구현하기 위해선 Model이 변경되었을 때 이를 View에 업데이트 하기 위한 로직을 구현해야 하며 사용자 상호작용에 대한 이벤트로 비즈니스 로직을 수행하기 위해 Controller에 이벤트를 전달해야 합니다.
이전엔 웹 개발시 주로 Backend에서 View까지 개발하던 시기에 많이 사용되었던 MVC Pattern은 Ajax의 영향으로 대부분의 로직이 Client App으로 넘어가면서 이벤트 기반의 프로그래밍(Event-driven programming)을 대부분에 걸쳐 Client App에 적용하면서 파생된 MVP Pattern이 있습니다.

MVC & MVP(http://www.g-widgets.com/2016/01/19/introduction-to-the-mvp-pattern-in-gwt/)

MVP의 경우 View에서 사용자 상호 작용에 따라 Presenter에서의 비즈니스 로직 후 Model의 변경사항을 다시 View에 반영합니다.
MVP에서 Model에 대한 변경사항에 대해서 구독하고 있는 Presenter는 View에도 반영을 시켜야 하며 View에 따른 사용자 상호작용도 비즈니스 로직을 수행 후 Model에 반영해야 함에 따라 View 인터페이스와 Model에 모두 Observe Pattern을 적용한 MVVM Pattern이 있습니다.

MVVM Pattern은 Model의 변경사항을 구독한 ViewModel은 View에 반영하고 View와의 상호작용을 구독한 이벤트를 반영하여 Model도 변경시킵니다. 비즈니스 로직에 집중하고 View와 Model을 분리시켜 View가 어느 특정한 Model에 종속되지 않도록 해줍니다.

MVVM(https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel)

재사용성(Reusable)을 위한 Component
Component의 예로 Vuejs SFC(Single File Component)로 생성한 Login Component의구조를 살펴봅시다.

https://codesandbox.io/s/vuejs-login-component-forked-5urox?file=/src/components/Login.vue

과