-
MVC 패턴Vanilla js 2021. 9. 18. 00:27
[ M ( Model ) ]
모델은 화면과 상관없는 데이터의 집합체 이다.
서버와 연동되어 있다면 서버에 API 요청을 보냈을 때 받은 응답들을 모델이라 할 수 있다.
대부분 DB에 들어가 있는 테이블의 레코드 이거나 이를 조합한 데이터
주로 class를 모델이라고 본다.
[ V ( View ) ]
화면에 표시하는 컴포넌트
데이터 없이 화면만 표시할 수도 있고,
모델을 인자로 받아서 화면에 표시하기도 한다.뷰에서 이벤트를 받기는 하지만, 이를 처리하는 비즈니스 로직은 포함하지 않는다.
이벤트 리스너에 이벤트를 전달하는 역할만 한다.비즈니스 로직이 필요하다면 컨트롤러에서 담당한다.
뷰에서는 모델을 사용하지만 변경은 하지 않는다.
변경은 컨트롤러에서 이루어져야하며, 변경된 모델은 컨트롤러에서 다시 뷰로 전달한다.[ C ( Controller ) ]
컨트롤러는 뷰와 모델을 연결하며, 뷰에서 발생한 이벤트를 처리하는 비즈니스 로직이 필요한 경우 컨트롤러에서 구현한다.
장점
- 뷰를 작성한 컴포넌트는 사용자 비즈니스 로직을 포함하고 있지 않기 때문에, 컴포넌트 본연의 동작만 잘 구현하면 되며, 재사용성이 높아진다.
- 모델이 뷰와 분리되어 있기 때문에, 뷰에서 원하는 모델 타입과 서버에서 받은 모델 타입이 다른 경우에는 컨트롤러에서 모델만 뷰에서 원하는 타입으로 변경해서 전달하면 된다.
[ 코드 ] https://github.com/jin-Pro/Design-Pattern/tree/master/MVC-Pattern
'Vanilla js' 카테고리의 다른 글
innerHTML , innerText , appendChild (0) 2021.09.19 Observer 패턴 (0) 2021.09.18 Vanilla Javascript로 가상돔(VirtualDOM) 만들기 (0) 2021.09.18 Vanilla Javascript로 상태관리 시스템 만들기 (0) 2021.09.18 Vanilla Javascript로 웹 컴포넌트 만들기 (0) 2021.09.18