디자인패턴 MVC MVP MVVM FLUX

면접 준비용이라서 그냥 줄줄줄 자료 보고 쓰는...

 

• 디자인 패턴이란
  • SW 설계에서 자주 발생하는 문제를 해결하기 위해 검증된 재사용 가능한 설계 템플릿
  • 문제를 효율적으로 해결할 수 있도록 설계 원칙과 구체적인 구현 방법을 제시
  • 코드의 재사용성과 유지보수성을 높이는 데 도움을 줌
• 싱글톤 패턴
  • 하나의 클래스에 오직 하나의 인스턴스만 생성하도록 보장
• MVC
  • 모델 뷰 컨트롤러
  • 모델 - 데이터 관리 - 옵저버블
  • 뷰 - 화면 그려주기 - 옵저버
  • 컨트롤러 - 뷰와 모델의 중개자 - 이벤트 리스너
  • 모델에서 변경사항이 생기면 뷰에 알려주고, 이를 기반으로 컨트롤러 작동
  • 장단점
    • 장점
      • 동시 다발적 개발 가능
      • 높은 응집도
      • 개발 용이성
    • 단점
      • 컨트롤러가 다수의 뷰를 선택할 수 있음. 하는 일 너무 많아짐.
      • 코드 일관성 유지에 노력 필요
      • 뷰와 모델 사이 의존성 높음. 유지보수 어려울 수 있음.
• MVP
  • 사용자 입력은 view를 통해 입력하게 됨
  • input이 들어오면 view는 프레젠터에 알려줌. 프레젠터는 로직 처리함.
  • 화면과 로직을 분리
  • 프리젠터는 컨트롤러와 비슷하지만, view에 직접 연결되어 1:1 매칭이 되는 점이 다르다
  • 장단점
    • 장점
      • 모델, 뷰 사이 결합도를 낮추면 새로 추가 및 수정에 대해 해당 부분만 코드 수정하면 되어 확장성 굿.
      • 유닛 테스트 시 테스트 코드 작성하기 편리해짐.
      • UI, Data 각각 파트가 나눠져 동시에 쉽고 빠른 코딩 가능
    • 단점
      • 애플리케이션 복잡해질수록 뷰와 프리젠터 사이 의존성 강해짐
      • 일대일 매칭이라 뷰가 많아지면 프리젠터도 많아짐
•  MVVM
  • 모든 데이터를 서버에서 처리하기에는 매우 많은 서버 비용과 부담 
  • 모델 - 도메인 특화 데이터 처리
  • 뷰 - UI (html css xml)
  • 뷰모델 - 상태와 연산 view의 실제 논리 및 데이터 흐름을 담당. 상태 데이터를 변경하면 뷰에 반영.
    • 뷰와 모델을 중재하며, 데이터를 변환해 뷰에 제공
    • 뷰와 뷰모델 간에 데이터 바인딩이 이루어짐
    • 뷰모델은 모델에서 데이터를 가져오거나 변환해 뷰에 제공하고, 뷰의 상태를 모델에 전달
  • 장단점
    • 장점
      • 뷰와 모델 사이 의존성이 없음.
      • 코맨트 패턴과 데이터 바인딩을 사용해 뷰와 뷰모델 사이 의존성도 없앰
    • 단점
      • 뷰모델의 설계가 쉽지 않음
• flux 패턴
  • mvc 모델의 단점을 보완하기 위해 페이스북에서 발표한 아키텍쳐
    • mvc는 양방향 데이터 흐름.
    • 컨트롤러가 모델을 조회하거나 업데이트하고, 모델이 업데이트되면 뷰에 반영함
    • 뷰도 모델을 업데이트할 수 있어서, 모델이 업데이트되면 다시 업데이트 된 뷰가 또다른 모델을 업데이트
    • 복잡한 어플리케이션에서는 구조가 어려워져서 관리하기 힘듦
  • 단방향 패턴
    
    • 액션 - 디스패쳐 - 스토어 - 뷰 - 액션 - 디스패쳐 - 스토어 - 뷰
    • 디스패쳐 - 플럭스의 모든 데이터 흐름 관리하는 허브 역할.
      • 액션이 발생하면, 디스패쳔은 전달된 액션 확인하고 등록된 콜백함수 실행해 스토어로 전달.
      • 디스패쳐는 전체 어플리케이션에서 한 개의 인스턴스에만 사용됨
    • 스토어
      • 어플리케이션의 모든 상태 변경은 스토어에서 결정이 됨
      • 디스패쳐로부터 수신받기 위해서 디스패쳐에 콜백함수 등록해야 함
      • 스토어가 변경되면 뷰에 변경되었다는 사실 알려줌
    • 뷰
      • 화면에 나타나는 것 뿐 아니라, 자식 뷰로 데이터 흘러보내는 뷰 컨트롤러 역할도 함
    • 액션
      • 디스패쳐에서 콜백 함수가 실행되면 스토어가 업데이트 되어야 함
      • 콜백 함수를 실행할 때 데이터가 담겨 있는 객체가 인수로 전달되어야 함
      • 전달되는 객체를 액션이라고 하며, 대체로 액션 생성자에서 만들어짐

 

• 리덕스
  • view: 사용자가 버튼 클릭 입력 등 이벤트 발생
  • 디스패치: 이벤트에 따라 액션 객체 생성하고, store.dispatch(action)을 호출
  • 리듀서: 디스패치된 액션과 현재상태를 기반으로 새로운 상태를 생성
  • 스토어 업데이트: 리듀서가 반환한 새로운 상태를 스토어에 저장
  • 스토어 전달: 변경된 상태를 구독하고 있는 컴포넌트에 전달해 UI 업데이트