[DesignPattern] 프록시 / MVP / MVVM

프록시 패턴

• 대상 객체에 접근하기 전 그 접근에 대한 흐름을 가로채 대상 객체 앞단의 인터페이스 역할을 하는 디자인 패턴

 

프록시 서버

• 서버와 클라이언트 사이에서 클라이언트가 자신을 통해 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해줌

 

Nginx

• 비동기 이벤트 기반의 구조와 다수의 연결을 효과적으로 처리 가능한 웹 서버
• Node.js 서버 앞단의 프록시 서버로 활용

 

CloudeFlare

• 전 세계적으로 분산된 서버가 있고 이를 통해 어떠한 시스템의 콘텐츠 전달을 빠르게 할 수 있는 CDN 서비스
• CDN (Content Delivery Network) : 지리적으로 분산된 서버들을 연결한 네트워크
• 웹 서버 앞단에 프록시 서버로 두어 DDOS 공격 방어나 HTTPS 구축에 쓰임

 

CORS (Cross-Origin Resource Sharing)와 프론트엔드의 프록시 서버

• 서버가 웹 브라우저에서 리소스를 로드할 때 다른 오리진을 통해 로드하지 못하게 하는 HTTP 헤더 기반 메커니즘
• 프론트엔드 개발 시 프론트엔드 서버를 앞단에 만들어서 벡엔드 서버와 통신할 때 주로 CORS 에러를 마주치는데,
  이를 해결하기 위해 프록시 서버를 만들기도 함

 

 

MVP (Model + View + Presenter) 패턴

• MVC 패턴으로부터 파생되었으며 MVC에서 C에 해당하는 컨트롤러가 프레젠터로 교체된 패턴

 

 

MVVM (Model + View + View Model) 패턴

• MVC의 C에 해당하는 컨트롤러가 뷰모델로 바뀐 패턴
• 뷰모델
  • 뷰를 더 추상화한 계층
• 커맨드와 데이터 바인딩을 가짐
• 뷰와 뷰모델 사이의 양방향 데이터 바인딩을 지원
• UI를 별도의 코드 수정 없이 재사용 가능
• 단위 테스팅이 쉬움
• ex) Vue.js

 

한 번의 글로 이해하는 소프트웨어 아키텍처 패턴 ( MVC, MVP, MVVM )