[디자인 패턴-patters.dev] 2. 프록시 패턴

이 포스트는 patterns.dev 사이트의 pattern에 대한 글들을 읽고 중요하다고 생각되는 부분만 추출해서 정리합니다.

프록시

일반적으로 프록시는 다른 사람을 대신하는것을 의미합니다.
자바스크립트에서의 프록시는 대상과 직접 소통하는것이 아니라 프록시 개체와 상호 작용합니다.

유효성 검사

프록시는 유효성 검사를 추가하는데에 유용하게 사용하는것이 가능합니다.

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

const personProxy = new Proxy(person, {
  get: (obj, prop) => {
    if (!obj[prop]) {
      console.log(`Hmm.. this property doesn't seem to exist`);
    } else {
      console.log(`The value of ${prop} is ${obj[prop]}`);
    }
  },
  set: (obj, prop, value) => {
    if (prop === "age" && typeof value !== "number") {
      console.log(`Sorry, you can only pass numeric values for age.`);
    } else if (prop === "name" && value.length < 2) {
      console.log(`You need to provide a valid name.`);
    } else {
      console.log(`Changed ${prop} from ${obj[prop]} to ${value}.`);
      obj[prop] = value;
    }
    return true;
  }
});

personProxy.nonExistentProperty;
personProxy.age = "44";
personProxy.name = "";

Reflect

자바스크립트는 빌트인으로 Reflect를 제공합니다.
Reflect 개체를 사용하면 Reflect.get()과 Reflect.set()을 사용해 프로퍼티를 변경하거나 접근하는것이 가능합니다.

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

const personProxy = new Proxy(person, {
  get: (obj, prop) => {
    console.log(`The value of ${prop} is ${Reflect.get(obj, prop)}`);
  },
  set: (obj, prop, value) => {
    console.log(`Changed ${prop} from ${obj[prop]} to ${value}`);
    return Reflect.set(obj, prop, value);
  }
});

personProxy.name;
personProxy.age = 43;
personProxy.name = "Jane Doe";

장단점

프록시를 사용하면 유효성 검사, 서식 지정, 알림 혹은 디버깅에 용이합니다.
다만 과도하게 사용하거나 Proxy 메서드 호출에서 과도한 작업을 수행하는 경우 앱 성능에 부정적인 영향을 미칠 수 있어 성능이 중요한 코드에는 프록시를 사용하지 않는것이 좋습니다.