소프트웨어 설계와 Vue.js의 프록시 패턴

소프트웨어 디자인 패턴의 프록시 패턴

Proxy pattern은 디자인 패턴 중 Structural 패턴 중 하나이다.
가장 기본적인 골자는 "대신 요청을 처리해주는" 패턴 이라는 것이다.
누구 대신 요청을 처리하냐면, 실제 객체 대신 요청을 처리한다.
(요청의 주체는 누구든 될 수 있지만
 일반적으로 프로그램 런타임에서 메모리에 생성되는 객체이다.
 네트워크 관련 객체가 될 수도 있고, 상주하는 객체가 될 수도 있음.)



a라는 기능을 본래는 A객체에서 처리하는 것이 맞지만
a라는 기능으로 인해 다른 객체에 의도하지 않은 접근을 허용할 수 있다.
(A class 내에서 구현한 기능이든, 함수든)


따라서,
다른 객체에 대해 접근을 제어하기 위해
본 객체와 다른 대리인 역할을 하는 객체를 제공한다.




본 객체 = Real subject
대리인 = Proxy
는 공통 Interface를 구현함으로서 접근 제어를 구현한다.


본 객체는 비즈니스 로직을 수행한다.
대리인 객체는 요청이 본 객체에 도달하기 전에
구현된 작업을 수행해서 직접 도달하지 않게 접근을 제어하거나
기타 로직들을 수행한다.
(접근 제어, 지연 로딩, 로깅, 캐싱, 원격 프록시 등)
( **원격 프록시 = 다른 네트워크의 머신에서 돌아가고있는 객체를 대표한다. )


요청을 보내는 클라이언트 입장에서는
실제 객체 대신 대리인 객체와 소통하고 있는 것이다.

Vue의 프록시 패턴

vue.js에서는
JS의 내장 Proxy객체를 활용하여 데이터를 관찰하고
데이터가 변하면 이를 변경사항에 적용한다. => 반응성, Reactive

vue3에서는 객체를 반응성 상태로 만들 때

reactive() 함수를 사용하는데
이렇게 만들어진 프록시 객체는
실제 객체에 대한 모든 접근을 가로챈다.
(속성 값 변경, 생성, 삭제 등)


Vue에서는 JS의 Proxy 객체를 이용하여
본 객체에 요청이 도달하기 전에 요청을 가로채서

반응성을 위한 로직을 수행한다.
(본 객체에 의존하는 다른 객체에 대한 의존성 추적을 실행하는 등)