ssung_끄적끄적/CS지식_끄적

이터레이터 패턴, 노출모듈 패턴, MVC 패턴, MVP 패턴, MVVM 패턴

ssungcohol 2023. 8. 27. 23:26

이터레이터 (Iterator pattern)

 - 이터레이터 (iterator)를 사용하여 컬렉션 (collection)의 요소들에 접근하는 패턴

 - 순회할 수 있는 여러 가지 자료형의 구조와는 상관없이 이터레이터 하나의 인터페이스로 순회 가능


노출모듈 패턴 (revealing module pattern)

 - 노출모듈 패턴은 즉시 실행 함수를 통해 private, public 같은 접근 제어자를 만드는 패턴

 - 자바와 달리 자바스크립트는 private, public 같은 접근 제어자가 존재하지 않고 전역 범위에서 스크립트가 실행

 - 따라서, 노출모듈 패턴을 위와 같은 접근 제어자를 구현 (Ex - CJS (CommonJS) 모듈)


MVC 패턴 (Model, View, Controller)

 - 모델 (Model), 뷰 (View), 컨트롤러 (Cotroller)로 이루어진 디자인 패턴

 - 애플리케이션의 구성 요소를 세 가지 역할로 구분하여 개발 프로세스에서 각각의 구성 요소에만 집중해서 개발 가능

 - 장점 : 재사용성과 확장성이 용이

 - 단점 : 애플리케이션이 복잡해질수록 모델과 뷰의 관계가 복잡해짐

  • 모델 (Model)
    • 모델은 애플리케이션의 데이터인 데이터베이스, 상수, 변수 등을 말함
    • 뷰에서 데이터를 생성하거나 수정하면 컨트롤러를 통해 모델을 생성 또는 갱신
    • Ex - 사각형 박스에 글자가 있다면, 박스의 위치 정보, 글자 내용, 글자 위치 등 모든 정보를 가지고 있어야 함
  • 뷰 (View)
    • inputbox, checkbox, textarea 등 사용자 인터페이스 요소를 나타냄
    • 즉, 모델 기반으로 사용자가 볼 수 있는 화면을 말함
    • 모델이 가지고 있는 정보를 따로 저장하지 않아야 하며 단순히 화면에 표시하는 정보만 가지고 있어야 함
    • 변경이 일어날 시에는 컨트롤러에 이를 전달해야 함
  • 컨트롤러 (Controller)
    • 하나 이상의 모델과 하나 이상의 뷰를 이어주는 다리 역할로 메인 로직을 담당
    • 모델과 뷰의 생명주기 관리와 모델과 뷰의 변경 통지를 받으면 각각의 구성 요소에 해당하는 내용을 알려줌

MVP패턴

 - MVP 패턴은 MVC 패턴으로부터 파생되어 MVC의 C에 해당하는 컨트롤러가 P (presenter)로 교체된 패턴

 - 뷰와 프레젠터는 일대일 관계이기 때문에 MVC 패턴보다 더 강한 결합을 지닌 패턴


MVVM패턴

 - MVC의 C에 해당하는 컨트롤러가 뷰모델 (view model)로 바뀐 패턴

 - 뷰모델은 뷰를 더 추상화한 계층이며 MVC와는 다르게 커맨드와 데이터바인딩을 가지는 것이 특징

(커멘드 : 여러 가지 요소에 대한 처리를 하나의 액션으로 처리할 수 있게 하는 기법
데이터 바인딩 : 화면에 보이는 데이터와 웹 브라우저의 메모리 데이터를 일치시키는 기법으로, 뷰모델을 변경하면 뷰가 변경된다.)

 - 뷰와 뷰모델 사이의 양방향 데이터 바인딩을 지원하며 UI를 별도로 수정하지 않고 재사용이 가능하고 단위 테스팅이 쉽다는 장점이 있음

 - 함수를 사용하지 않고 값 대입만으로 변수가 변경되며 양방향 바인딩, html을 토대로 컴포넌트 구축 가능

(재사용 가능한 컴포넌트 기반으로 UI를 구축 가능)

728x90