Proxy Pattern

대상 객체에 대한 인터렉션 가로채기 및 제어.

Proxy 객체를 사용하면 특정 객체와의 상호작용에 대해 더 많은 제어를 가질 수 있다. Proxy 객체는 값 가져오기나 값 설정과 같은 객체와의 상호작용 시 동작을 결정할 수 있다.

일반적으로 Proxy란 다른 사람을 대신하는 역할을 말한다. 직접 해당 사람과 대화하는 대신, 해당 사람을 대신하여 대화할 프록시 사람과 대화하게 된다. JavaScript에서도 동일한 원리가 적용된다. 대상 객체와 직접 상호작용하는 대신 프록시 객체와 상호작용한다.

const person = {
	name: "John Doe",
	age: 42,
	nationality: "American",
};

우리는 이 객체와 직접 상호작용하는 대신 프록시 객체와 상호작용하고 싶다. JavaScript에서는 Proxy의 새로운 인스턴스를 생성하여 쉽게 새로운 프록시를 만들 수 있다.

const person = {
	name: "John Doe",
	age: 42,
	nationality: "American",
};

const personProxy = new Proxy(person, {});

Proxy의 두 번째 인자는 핸들러(handler)를 나타내는 객체이다. 핸들러 객체에서는 상호작용의 유형에 따라 특정 동작을 정의할 수 있다. Proxy 핸들러에 추가할 수 있는 다양한 메서드가 있지만, 가장 일반적인 것을 get과 set이다.

• get: 속성에 access하려고 할 때 호출.
• set: 속성에 modify하려고 할 때 호출

실제로 발생하는 동작은 다음과 같다.

jspat-51_xvbob9.webm

사람 객체와 직접 상호 작용하는 대신 personProxy와 상호작용하게 된다.

personProxy Proxy에 핸들러를 추가해보겠다. 속성을 수정하려고 할 때, 즉 Proxy의 set 메서드를 호출할 때, 프록시는 해당 속성의 이전 값과 새 값에 대한 로그를 남기고 싶다. 속성에 접근하려고 할 때, 즉 Proxy의 get 메서드를 호출할 때, 프록시는 해당 속성의 키와 값이 포함된 더 읽기 쉬운 문장을 로그로 남기도록 하고 싶다.