new Proxy란..?

javascript에서의 Proxy란 .. ?

자바스크립트에는 Proxy라는 내장 프록시 객체가 있습니다!

해당 프록시 객체는 어떠한 대상의 기본적인 동작 ( 속성 접근, 할당, 순회, 열거 등)의 작업을 인터셉트 할 수 있는 객체를 뜻하고, 이 프록시 객체는 2개의 매개 변수를 가집니다.

각각의 매개변수를 먼저 살펴보겠습니다.

• target : 프록시할 대상입니다.
• handler : 프록시 객체의 target 동작을 인터셉트해서 처리할 로직들이 담겨있는 함수 입니다.

여기서 간단한 proxy의 구조를 미리 보자면 다음과 같습니다.

const target = {};
const handler = {
  get:(obj,props)=>{
    console.log(`${props}가 호출되었습니다.`);
    return obj[props];
  }
}

const proxy = new Proxy(target, handler);

위와 같은 방식으로 get 에다가 특정 로직을 작성할 경우 해당 객체가 불러와 질때 마다 해당 로직이 실행됩니다.

예를 들면

proxy.a = 10; // 해당로직은 set 로직이기 때문에 기본 동작합니다.

const b = proxy.a; // 이부분에서 proxy.a를 get 했기 때문에 handler의 get이 인터셉트 해서 로직을 수행후 proxy.a의 값을 return받아 옵니다.

new Proxy를 활용한 간단한 옵저버 패턴

옵저버 패턴 (observer pattern)은 주체가 어떤 객체의 상태 변화를 관찰하다가 상태 변화가 있을 때 마다 메서드 등을 통해 옵저버 목록에 있는 옵저버들에게 변화를 알려주는 디자인 패턴입니다.

new Proxy를 이용해 간단하게 callback에 log를 전달하는 방식의 옵저버를 구현해 보겠습니다.

먼저 observer라는 observer 기능을 하는 함수를 만들어 보겠습니다.

매개변수로는 초기값이자 observe 할 객체와 콜백 함수를 받아야 할 거 같습니다.!

const observer = (target, callback) =>
  new Proxy(target, {
    set: (obj, props, value) => {
      if (obj[props] !== value) {
        callback(`${props} : ${obj[props]} => ${value} 로 변경되었습니다!`);
        obj[props] = value;
      }
      return true;
    },
  });

위 observer의 로직을 간단하게 다시 확인하면 다음과 같습니다.

• 1. target의 setter 가 호출될 경우 이를 인터셉트해서 Proxy 내부에 있는 로직을 수행합니다.
• 2.1. 만약 값의 변화가 없다면 ( 이전 값과 동일하다면 ) true를 리턴합니다.
• 2.2. 만약 값의 변화가 있다면 if문 내부에 있는 로직을 수행합니다.

이를 바탕으로 코드를 작성하고 확인해 보면 다음과 같습니다.

const count = observer({ current: 1 }, console.log);

count.current = 1; // 기존 값과 변화가 없기 때문에 if문 에서 필터링 됩니다.

count.current = 2; // 값이 변화가 있고 set의 동작을 수행하기 때문에 인터셉트 됩니다.
// console.log : current : 1 => 2 로 변경되었습니다!