Proxy

💻 Proxy란?

Proxy는 객체를 감싸 객체에 대한 기본 작업을 가로채고 재정의하는 객체입니다.
가로채진 작업은 위의 왼쪽과 그림과 같이 원래 객체가 처리하도록 그대로 전달 되거나, 오른쪽 그림과 같이 Proxy 객체 자체에서 처리되기도 합니다.

Proxy를 활용한 대표적인 프레임워크는 Vue3로, reactivity를 구현하기위해 Proxy를 사용했습니다.

💻 Proxy 생성

const proxiedObject = new Proxy(target, handler);

위 예시처럼 두 개의 매개변수를 사용하여 Proxy 객체를 선언합니다.

• target: 프록시할 (감싸게될) 원본 객체로, 함수를 포함한 모든 객체가 가능합니다.
• handler: 가로채는 작업과 그 작업을 재정의(trap)한 것들을 모아놓은 객체입니다.

Proxy 객체에 작업이 가해졌을 때, handler에 그와 상응하는 작업(trap)이 있으면 Proxy 객체가 작업을 처리하게되고 없다면 원본객체 (target)가 해당 작업을 수행하게 됩니다.

const target: Record<string, any> = {};

const proxiedObject = new Proxy(target, {});

proxiedObject.message1 = "Hello";

console.log(target.message1); // Hello

console.log(target.message1); // Hello

위 예시 볼 수 있듯이 ProxiedObject에 message1 프로퍼티를 추가한 작업이, target에도 적용되었음을 볼 수 있습니다.
이는 Proxy 객체에 빈 handler가 전달되었음으로, Proxy객체에 가해진 작업들은 모두 원본객체로 전달되었기 때문입니다.

💻 Handler Methods

Proxy객체의 trap은 객체의 내부 매서드 호출을 가로챕니다. Proxy가 가로채는 내부 메서드 리스트는 아래와 같습니다.

Internal Method	Handler Method	동작 시점
[[GetPrototypeOf]]	getPrototypeOf	Object.getPrototypeOf 호출 시
[[SetPrototypeOf]]	setPrototypeOf	Object.setPrototypeOf 호출 시
[[isExtensible]]	isExtensible	Object.isExtensible 호출 시
[[preventExtension]]	preventExtensions	Object.preventExtensions 호출 시
[[GetOwnProperty]]	getOwnPropertyDescriptor	Object.getOwnPropertyDescriptor for..in Object.[keys | values | entries] 호출 시
[[DefineOwnProperty]]	defineProperty	Object.defineProperty 호출 시
[[HasProperty]]	has	in 연산자 사용시
[[Get]]	get	프로퍼티를 읽을 때
[[Set]]	set	프로퍼티를 쓸 때
[[Delete]]	deleteProperty	delete 연산자 사용 시
[[OwnPropertyKeys]]	ownKeys	Object.getOwnPropertyNames, Object.getOwnPropertySymbols, for..in Object.[keys | values | entries] 호출 시
[[Call]]	apply	함수를 호출할 때
[[Constructor]]	constructor	new 연산자가 사용 시

💻 [[Get]]

가장 흔하게 사용되는 Proxy handler의 트랩으로 프로퍼티를 읽을 때 사용됩니다.
get 트랩을 사용하기 위해서는 handler에 get 메소드가 있어야 합니다.

function get(target: T, property: string | symbol, receiver: any): any;

• target: 동작을 전달한 대상객체 (원본객체) 입니다.
• property: 가져올 프로퍼티의 이름또는 Symbol 입니다.
• receiver: Proxy 또는 Proxy에서 상속되는 객체로 get이 동작할 때 this를 의미합니다. 보통 Proxy객체가 this가 되지만, 만약 Proxy객체를 상속받은 객체가 있다면 해당 객체가 this가 됩니다.

예시를 통해 get trap을 사용해보겠습니다.

const numbers = [0, 1, 2];

const proxiedNumbers = new Proxy(numbers, {
  get(target, property) {
    if (property in target) {
      return target[Number(property)];
    } else {
      return 0;
    }
  },
});

console.log(numbers[3]); // undefined

console.log(proxiedNumbers[1]); // 1
console.log(proxiedNumbers[3]); // 0

위 코드는 존재하지 않는 원소 접근 시 0을, 존재하는 원소 접근 시 해당 원소를 리턴하는 Proxy 객체입니다.

🖊 주의할 점

Proxy 객체를 사용할 때, 원본객체 (타깃객체)를 참조하는 것을 지양해야합니다.

💻 [[Set]]

set 트랩은 프로퍼티에 값을 쓸 때, 사용하는 Proxy handler 입니다.

function set(
  target: T,
  property: string | symbol,
  newValue: any,
  receiver: any
): boolean;

• target: 동작을 전달한 대상객체 (원본객체) 입니다.
• property: 설정할 프로퍼티의 이름또는 Symbol 입니다.
• newValue: 설정할 프로퍼티의 새 값 입니다.
• receiver: get 트랩과 유사하게 동작하는 객체입니다.

🖊 주의할 점

값을 쓰는것이 완료되면 true, 그렇지 않은 경우는 반드시 false를 반환해야 합니다.

const numbers: number[] = [];

const proxiedNumbers = new Proxy(numbers, {
  set(target, property, newValue) {
    if (typeof newValue === "number") {
      target[Number(property)] = newValue;
      return true;
    } else {
      return false;
    }
  },
});

proxiedNumbers.push(1);
proxiedNumbers.push(2);
console.log(proxiedNumbers.length); // 2

proxiedNumbers.push("a"); // 'set' on proxy: trap returned falsish for property

위 예시는 배열에 숫자원소만 추가할 수 있게끔 set 트랩으로 값을 검증하는 코드입니다.
숫자일 경우 true를 반환해 정상적으로 추가 되었음을 알리고, 그렇지 않을 경우 false를 반환해 에러를 발생 시킵니다.

💻 [[OwnPropertyKeys]], [[GetOwnProperty]]

객체 프로퍼티를 순환할 때의 작업을 가로채기 위해서는 ownKeys 트랩을 사용하면 됩니다.
for..in, Object.keys, Object.values, Object.entries, Object.getOwnPropertyNames, Object.getOwnPropertySymbol 와 같은 프로퍼티 순환 메서드를 호출할 때 내부 메서드 [[OwnPropertyKeys]]를 호출하여 프로퍼티 목록을 가져오게 됩니다.

function ownKeys(target: T): ArrayLike(string | symbol)

• target: 동작을 전달한 대상객체 (원본객체) 입니다.

🖊 for...in vs Object.[keys|values|entries] vs getOwnPropertyNames vs getOwnPropertySymbols

위의 메서드는 모두 객체의 프로퍼티를 순회하는 메서드이지만 차이가 존재합니다.

• getOwnPropertyNames
Symbol을 제외한 객체의 모든 속성(열거할 수 없는 속성 포함)들을 배열로 반환합니다.

const obj = {};

Object.defineProperties(obj, {
  one: { enumerable: true, value: 1 },
  two: { enumerable: false, value: 2 },
});

console.log(Object.getOwnPropertyNames(obj)); // ['one', 'two']

• getOwnPropertySymbols
  객체에서 찾은 모든 Symbol 프로퍼티들을 배열로 반환합니다.

• for...in
  상속된 열거 가능한 프로퍼티들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 프로퍼티에 대해 반복하는 연산자 입니다.
  Symbol 키는 무시합니다.

const obj = {};

Object.defineProperties(obj, {
  one: { enumerable: true, value: 1 },
  two: { enumerable: false, value: 2 },
  three: { enumerable: true, value: 3 },
});

for (const key in obj) {
  console.log(key); // one -> three
}

• Object.[keys|values|entries]
  열거가능한 프로퍼티들에 대하여, Symbol형이 아닌 키나 Symbol형이 아닌 값 전체를 배열로 반환합니다.

console.log(Object.keys(obj)); // ['one', 'three']
console.log(Object.values(obj)); // [1, 3]
console.log(Object.entires(obj)); // [['one', 1], ['three', 3]]

const monster = {
  name: "monster",
  eyeCount: 4,
  _age: 111,
};

const proxiedMonster = new Proxy(monster, {
  ownKeys(target) {
    return Object.keys(target).filter((key) => !key.startsWith("_"));
  },
});

for (const key in proxiedMonster) {
  console.log(key); // name -> eyeCount
}

console.log(Object.getOwnPropertyNames(proxiedMonster)); // ['name', 'eyeCount']
console.log(Object.keys(proxiedMonster)); // ['name', 'eyeCount']
console.log(Object.values(proxiedMonster)); // ['monster', 4]
console.log(Object.entries(proxiedMonster)); // [['name', 'monster'], ['eyeCount', 4]]

위 예시는 ownKeys 트랩을 사용하여 _로 시작하는 프로퍼티를 순환대상에서 제외하는 코드입니다.

만약 아래 예시처럼 객체내에 존재하지 않는 프로퍼티의 목록을 ownKeys 트랩에서 반환하려고 하면 어떻게 될까요?

const obj = {};

const proxiedObj = new Proxy(obj, {
  ownKeys(target) {
    return ["one", "two", "three"];
  },
});

console.log(Object.getOwnPropertyNames(proxiedObj)); // ['one', 'two', 'three']
console.log(Object.keys(proxiedObj)); // []

Object.getOwnPropertyNames와 Object.keys를 사용했을 때 결과값이 달라지는 것을 볼 수 있습니다.
이는 ownKeys 트랩이 반환하는 배열이 열거 가능한 속성이 아니여서 Object.[keys|values|entries]로 순회가 불가능 하기 때문입니다.
Object.keys와 같은 메서드는 프로퍼티가 열거 가능한지의 여부를 판단하기 위해 [[GetOwnProperty]] 내부 메서드를 호출해 모든 프로퍼티의 descriptor를 확인합니다.

위 예시의 경우 ownKeys 트랩이 반환하는 프로퍼티들의 descriptor가 정의되지 않았습니다. 따라서 Object.keys 와 같은 메서드로 순회하기 위해서는 getOwnPropertyDescriptor 트랩을 사용해 descriptor를 정의해 주어야 합니다.

function getOwnPropertyDescriptor(
  target: any,
  property: string | symbol
): PropertyDescriptor | undefined;

const obj = {};

const proxiedObj = new Proxy(obj, {
  ownKeys(target) {
    return ["one", "two", "three"];
  },

  getOwnPropertyDescriptor(target, property) {
    return {
      enumerable: true,
      configurable: true,
    };
  },
});

console.log(Object.keys(proxiedObj)); // ["one", "two", "three"]

위 예시에서 getOwnPropertyDescriptor 트랩은 모든 프로퍼티를 대상으로 실행이 됩니다. getOwnPropertyDescriptor 트랩에 property를 콘솔로 출력해보면 ownKeys에서 반환한 프로퍼티들이 순차적으로 출력되는 것을 확인할 수 있습니다.

💻 [[Delete]]

deleteProperty 트랩은 프로퍼티에 값을 지울 때, 사용하는 Proxy handler 입니다.

function deleteProperty(target: T, property: string | symbol): boolean;

🖊 주의할 점

값을 지우는것이 완료되면 true, 그렇지 않은 경우는 반드시 false를 반환해야 합니다.

const monster = {
  name: "monster",
  eyeCount: 4,
  _age: 111,
};

const proxiedMonsters = new Proxy<Record<string | symbol, any>>(monster, {
  get(target, property) {
    if (typeof property === "string") {
      if (property.startsWith("_")) {
        throw new Error(`cannot get ${property}`);
      }
    }

    const value = target[property];
    return typeof value === "function" ? value.bind(target) : value;
  },

  // set 생략

  deleteProperty(target, property) {
    if (typeof property === "string") {
      if (property.startsWith("_")) {
        throw new Error(`cannot delete ${property}`);
      }
    }

    delete target[property];
    return true;
  },
});

try {
  const monsterAge = proxiedMonster._age;
} catch (error) {
  console.log(error); // cannot get _age
}

try {
  delete proxiedMonster._age;
} catch (error) {
  console.log(error); // cannot delete _age
}

위 예시는 _로 시작하는 프로퍼티의 접근(get), 값의 재설정(set), 삭제(delete)를 막는 코드 입니다.

🖊 value.bind(this)

위 코드의 get 트랩에서 반환하는 코드를 보면 value === "function" ? value(this) : value와 같이 되어있는것을 확인할 수 있습니다. 해당 코드의 의미는 프로퍼티에 해당하는 원본 객체의 값이 함수이면 원본 객체에 bind 하라는 의미입니다.
아래의 예시에서 원본 객체의 함수에서 자기 자신을 가르키는 this가 있다면, 이 값은 Proxy 객체에서는 Proxy 객체를 가르키게 됩니다.

const originObj = {
  getMe() {
    return this;
  },
};

console.log(originObj.getMe() === originObj); // true

const proxiedObj = new Proxy(originObj, {});

console.log(proxiedObj.getMe() === proxiedObj); // true

delete 트랩에서 보았던 monster 객체에서 _age을 반환하는 함수가 있다고 가정해보겠습니다. 만약 value.bind를 해서 반환하지 않는다면 this는 proxiedMonster를 의미하게되고, get 트랩이 동작해 오류가 발생할 것입니다.

const monster = {
  // 생략
  getAge() {
    return this._age;
  },
};

const proxiedMonster = new Proxy<Record<string | symbol, any>>(monster, {
  get(target, property) {
    if (typeof property === "string") {
      if (property.startsWith("_")) {
        throw new Error(`cannot get ${property}`);
      }
    }

    return target[property];
  },
});

proxiedMonster.getAge(); // cannot get _age

💻 [[HasProperty]]

has 트랩은 in 연산자를 사용할 때, 작업을 가로채기 위해 사용하는 Proxy handler 입니다.

function has(target: T, property: string | symbol): boolean;

• target: 동작을 전달한 대상객체 (원본객체) 입니다.
• property: 설정할 프로퍼티의 이름또는 Symbol 입니다.

const ageRange = {
  min: 10,
  max: 50,
};

const proxiedAgeRange = new Proxy(ageRange, {
  has(target, property) {
    if (typeof property === "string" && !Number.isNaN(parseInt(property))) {
      return (
        parseInt(property) >= target.min && parseInt(property) <= target.max
      );
    }
    return property in target;
  },
});

console.log(10 in proxiedAgeRange); // true

💻 [[Call]]

[[Call]] 내부 메서드는 함수 호출을 할때 호출되는 내부 메서드로, apply 트랩을 통해 작업을 가로챌 수 있습니다.

function apply(target: T, thisArg: any, argArray: any[]): any;

• target: 동작을 전달한 대상객체 (원본객체) 입니다.
• thisArg: 함수 호출에 대한 this 값입니다.
• argArray: 함수 호출에 대한 파라미터 목록입니다.

const proxiedFunction = new Proxy(function () {}, {
  apply(target, thisArg, argumentsList) {
    console.log(`called: ${argumentsList}`);
    return argumentsList[0] + argumentsList[1] + argumentsList[2];
  },
});

console.log(proxiedFunction(1, 2, 3)); // "called: 1,2,3", 6