TIL: 2023-06-08 Proxy Pattern

⚙️ 오늘 학습한 내용

Proxy Pattern

🗝 키워드

Proxy Pattern, Reflect

🗣 스스로에게 설명

앱 전체에서 하나의 전역 인스턴스를 공유하는 방식
여기까지는 SIngleton Pattern과 유사하지만 Proxy Pattern은 Proxy 객체가 추가된다는 차이가 있다. 

앱 전체에서 공유 중인 객체에 접근하려고 할 때 객체에 직접 접근하지 않고 proxy 객체로 우회하는 방식이다.

JavaScript의 Proxy 객체 이용하기

const person = {
  name: "Park",
  age: 24,
  nationality: "Korean"
}

자바스크립트에 내장된 Proxy 객체를 이용해 위 객체로의 직접적인 접근을 우회할 수 있다.

Proxy - JavaScript | MDN

const person = {
  name: "Park",
  age: 24,
  nationality: "Korean"
}

const personProxy = new Proxy(person, {})

Proxy 객체는 new 연산자로 생성할 수 있으며 첫 번째 인자는 target, 두 번째 인자는 handler를 받는다.
가장 많이 쓰는 두 메소드는 `get`과 `set`이다.

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

personProxy.name // The value of name is Park
personProxy.age = 25 // Changed age from 24 to 25

값에 접근하게 되면 handler에 정의해뒀던 get 메소드가 실행되며, 값을 수정하게 되면 set 메소드가 실행되는 것을 볼 수 있다.

유효성 검사

Proxy Pattern은 유효성 검사에 유용하게 쓰일 수 있다.
사용자가 객체에 존재하지 않는 프로퍼티에 접근하려 하거나, 부적절한 타입으로 값을 바꾸려고 할 경우를 방지할 수 있다.

const personProxy = new Proxy(person, {
  get: (obj, prop) => {
    if (!obj[prop]) {
      console.log(`This property doesn't exist on the target object`)
    } else {
      console.log(`The value of ${prop} is ${obj[prop]}`)
    }
  },
  set: (obj, prop, value) => {
    if (prop === 'age' && typeof value !== 'number') {
      console.log(`you can only pass numeric values for age`)
    } else {
      console.log(`Changed ${prop} from ${obj[prop]} to ${value}`)
      obj[prop] = value;
    }
  }
});

Reflect

자바스크립트에서 기본적으로 제공하는 내장 객체
프록시의 사용을 더 쉽게 해준다

Reflect - JavaScript | MDN

Reflect는 프록시 객체 내부에서 obj[prop] = value 형식으로 객체에 접근하지 않고도 값을 수정할 수 있도록 해준다.

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}`)
    Reflect.set(obj, prop, value);
  }
});

프록시는 이외에도 디버깅, 알림 등에도 사용될 수 있다.
프록시를 남용하게 되면 핸들러 함수 작동 과정에서 성능이 낮아질 수 있기 때문에 성능이 중요한 코드에는 프록시를 쓰지 않는 것이 권장된다.