📚 Reference

• 공식 문서 1

📜 Chapter

Reflect

‣

Vue.js

Vue 3

Proxy

• Proxy
• 프록시
• Proxy는 객체를 생성할 때 사용되는 특별한 객체로, 다른 객체(타겟 객체)에 대한 작업을 가로채고 재정의(intercept and customize) 하는 역할을 한다.
• 이를 통해 객체의 동작을 변경하거나 새로운 기능을 추가할 수 있다.
• 예를 들어, 객체의 속성 접근(get), 할당(set), 함수 호출 등을 가로채서 유효성 검사, 로깅, 접근 제어 등 다양한 작업을 수행할 수 있다.

사용법

• Proxy 객체는 new Proxy(target, handler) 구문으로 생성한다.
  • target
    • 프록시될 대상 객체이다.
  • handler
    • 프록시가 가로챌 작업을 정의하는 객체이다.
    • 이 객체는 get, set, apply 등 다양한 트랩(trap) 메소드를 포함할 수 있다.

예시

const user = {
  name: "Jane Doe",
  age: 30
};

const handler = {
  // 'get' 트랩: 속성 읽기 작업 가로채기
  get: function(target, prop, receiver) {
    console.log(`Getting property: ${prop}`);
    return target[prop];
  },

  // 'set' 트랩: 속성 할당 작업 가로채기
  set: function(target, prop, value) {
    if (prop === 'age' && typeof value !== 'number') {
      throw new TypeError("Age must be a number!");
    }
    console.log(`Setting property: ${prop} to ${value}`);
    target[prop] = value;
    return true; // 성공적으로 할당했음을 나타냄
  }
};

const userProxy = new Proxy(user, handler);

console.log(userProxy.name); // "Getting property: name" 출력 후 "Jane Doe" 반환
userProxy.age = 31; // "Setting property: age to 31" 출력
// userProxy.age = "thirty-two"; // TypeError 발생