디자인 패턴(3/3)

이 포스팅은 '면접을 위한 CS 전공지식 노트'를 읽고 제 나름대로 정리를 해본 것입니다. 사족도 붙여 가며 정리하였는데, 만약 문제가 된다면 포스팅 내리겠습니다.

=> 개인적으로 이번 포스팅에서 소개된 디자인 패턴이 프론트엔드 개발자에게는 중요하다고 생각한다. 일단 책을 기반으로 정리해두고 보충하면 좋을 것 같다! // TODO

8. MVC 패턴

• 모델(Model), 뷰(View), 컨트롤러(Controller)로 이루어진 디자인 패턴
• 각각의 역할로 구분하여, 개발 프로세스에서 각각의 구성 요소에만 집중해서 개발할 수 있음
• 재사용성과 확장성이 용이하다는 장점이 있으나, 애플리케이션이 복잡해질수록 모델과 뷰의 관계가 복잡해진다는 단점이 있다.
• 모델
  • 애플리케이션의 데이터인 데이터베이스, 상수, 변수 등을 뜻함
  • 뷰에서 데이터를 생성하거나 수정하면, 컨트롤러를 통해 모델을 생성하거나 갱신함
• 뷰
  • 사용자 인터페이스 요소. 즉, 모델을 기반으로 사용자가 볼 수 있는 화면을 뜻함
  • 모델이 가지고 있는 정보를 따로 저장하지 않아야 하며, 단순히 사각형 모양 등 화면에 표시하는 정보만 가지고 있어야 함
  • 변경이 일어나면 컨트롤러에 이를 전달
• 컨트롤러
  • 하나 이상의 모델과 하나 이상의 뷰를 잇는 다리 역할
  • 이벤트 등 메인 로직을 담당
  • 모델과 뷰의 생명주기도 관리하며, 모델이나 뷰의 변경 통지를 받으면 이를 해석하여 각각의 구성 요소에 해당 내용에 대해 알려줌

9. MVP 패턴

• MVC에서 C가 프레젠터(presenter)로 교체된 것
• 뷰-프레젠터는 1:1 관계 => MVC 패턴보다 더 강한 결합을 지님
• // todo: 장단점 보충

10. MVVM 패턴

• MVC에서 C가 뷰모델(view model)로 교체된 것
  • 뷰모델? 뷰를 더 추상화한 계층
• 커맨드와 데이터 바인딩을 가지는 것이 특징
  • 커맨드? 여러 가지 요소에 대한 처리를 하나의 액션으로 처리할 수 있게 하는 기법
  • 데이터 바인딩? 화면에 보이는 데이터와 웹 브라우저의 메모리 데이터를 일치시키는 기법. 뷰모델을 변경하면 뷰가 바뀜
• 뷰-뷰모델 사이의 양방향 데이터 바인딩을 지원
• UI를 별도의 코드 수정 없이 재사용할 수 있고 단위 테스팅하기 쉽다는 장점이 있다. // todo 단점 보충하기
• 대표적으로는 Vue.js가 해당 패턴을 사용함