프록시 개체는 JavaScript에서 어떻게 작동합니까?
JavaScript 프록시 개체를 사용하면 원본을 수정하지 않고도 다른 개체의 동작을 가로채고 사용자 지정할 수 있습니다.
프록시 개체를 사용하여 데이터의 유효성을 검사하고 추가 기능을 제공하며 속성 및 기능에 대한 액세스를 제어할 수 있습니다.
프록시 개체의 사용과 JavaScript에서 프록시 개체를 생성하는 방법에 대해 모두 알아보세요.
프록시 개체 만들기
JavaScript에서는 프록시 생성자 를 사용하여 프록시 개체를 만들 수 있습니다 . 이 생성자는 프록시를 둘러싸는 대상 개체와 작업을 수행할 때 속성이 프록시의 동작을 정의 하는 처리기 개체의 두 가지 인수를 사용합니다.
이러한 인수를 사용하여 대상 개체 대신 사용할 수 있는 개체를 만듭니다. 이 생성된 개체는 속성 가져오기, 설정 및 정의와 같은 핵심 작업을 재정의할 수 있습니다. 또한 이러한 프록시 개체를 사용하여 속성 액세스를 기록하고 입력을 유효성 검사, 형식 지정 또는 정리할 수 있습니다.
예를 들어:
const originalObject = {
foo: "bar"
}
const handler = {
get: function(target, property) {
return target[property];
},
set: function(target, property, value) {
target[property] = value;
}
};
const proxy = new Proxy(originalObject, handler)
이 코드 는 단일 속성 foo 와 핸들러 객체 handler 를 사용하여 대상 객체 originalObject 를 생성합니다 . 핸들러 객체에는 get 및 set 이라는 두 가지 속성이 포함되어 있습니다 . 이러한 속성을 트랩이라고 합니다.
프록시 개체 트랩은 프록시 개체에 대해 지정된 작업을 수행할 때마다 호출되는 기능입니다. 트랩을 사용하면 프록시 개체의 동작을 가로채고 사용자 지정할 수 있습니다. 프록시 개체에서 속성에 액세스하면 get 트랩이 호출되고 프록시 개체에서 속성을 수정하거나 조작하면 set 트랩이 호출됩니다.
마지막으로 이 코드는 Proxy 생성자 를 사용하여 프록시 개체를 만듭니다 . 각각 대상 객체와 핸들러로 originalObject 와 handler 를 전달 합니다.
프록시 개체 사용
프록시 개체는 JavaScript에서 여러 용도로 사용되며 그 중 일부는 다음과 같습니다.
개체에 기능 추가
프록시 개체를 사용하여 기존 개체를 래핑하고 원래 개체를 수정하지 않고도 로깅 또는 오류 처리와 같은 새 기능을 추가할 수 있습니다.
새 기능을 추가하려면 프록시 생성자를 사용하고 가로채려는 작업에 대해 하나 이상의 트랩을 정의해야 합니다.
예를 들어:
const userObject = {
firstName: "Kennedy",
lastName: "Martins",
age: 20,
};
const handler = {
get: function (target, property) {
console.log(`Getting property "${property}"`);
return target[property];
},
set: function (target, property, value) {
console.log(`Setting property "${property}"to value "${value}"`);
target[property] = value;
},
};
const proxy = new Proxy(userObject, handler);
console.log(proxy.firstName); // Getting property "firstName"Kennedy
console.log(proxy.lastName); // Getting property "lastName"Martins
proxy.age = 23; // Setting property "age" to value "23"
이 코드 블록은 프록시 트랩 get 및 set 을 통해 기능을 추가합니다 . 이제 userObject 의 속성에 액세스하거나 수정하려고 하면 프록시 개체는 속성에 액세스하거나 수정하기 전에 먼저 작업을 콘솔에 기록합니다.
데이터를 개체에 설정하기 전에 유효성 검사
프록시 개체를 사용하여 데이터의 유효성을 검사하고 개체에 설정하기 전에 특정 기준을 충족하는지 확인할 수 있습니다. 처리기 개체 의 집합 트랩에서 유효성 검사 논리를 정의하여 그렇게 할 수 있습니다 .
예를 들어:
const userObject = {
firstName: "Kennedy",
lastName: "Martins",
age: 20,
};
const handler = {
get: function (target, property) {
console.log(`Getting property "${property}"`);
return target[property];
},
set: function (target, property, value) {
if (
property === "age" &&
typeof value == "number" &&
value > 0 &&
value < 120
) {
console.log(`Setting property "${property}"to value "${value}"`);
target[property] = value;
} else {
throw new Error("Invalid parameter. Please review and correct.");
}
},
};
const proxy = new Proxy(userObject, handler);
proxy.age = 21;
이 코드 블록은 세트 트랩 에 유효성 검사 규칙을 추가합니다 . userObject 인스턴스 의 age 속성에 값을 할당할 수 있습니다 . 그러나 추가된 유효성 검사 규칙을 사용하면 0보다 크고 120보다 작은 숫자인 경우에만 age 속성에 새 값을 할당할 수 있습니다 . 필요한 기준을 충족하지 않는 age 속성에 설정하려는 모든 값 오류를 트리거하고 오류 메시지를 인쇄합니다.
개체 속성에 대한 액세스 제어
프록시 개체를 사용하여 개체의 특정 속성을 숨길 수 있습니다. 액세스를 제어하려는 속성에 대한 트랩 가져오기 에서 제한 논리를 정의하여 그렇게 합니다.
예를 들어:
const userObject = {
firstName: "Kennedy",
lastName: "Martins",
age: 20,
phone: 1234567890,
email: "foo@bar.com",
};
const handler = {
get: function (target, property) {
if (property === "phone" || property === "email") {
throw new Error("Access to info denied");
} else {
console.log(`Getting property "${property}"`);
return target[property];
}
},
set: function (target, property, value) {
console.log(`Setting property "${property}"to value "${value}"`);
target[property] = value;
},
};
const proxy = new Proxy(userObject, handler);
console.log(proxy.firstName); // Getting property "firstName"Kennedy
console.log(proxy.email); // Throws error
위의 코드 블록은 get 트랩 에 특정 제한을 추가합니다 . 처음에는 userObject 에서 사용 가능한 모든 속성에 액세스할 수 있습니다 . 추가된 규칙은 사용자의 이메일이나 전화와 같은 민감한 정보에 대한 액세스를 방지합니다. 이러한 속성 중 하나에 액세스하려고 하면 오류가 발생합니다.
기타 프록시 트랩
get 및 set 트랩 이 가장 일반적이고 유용하지만 11개의 다른 JavaScript 프록시 트랩이 있습니다. 그들은:
- 적용 : 적용 트랩은 프록시 개체에서 함수를 호출할 때 실행됩니다.
- 구성 : 구성 트랩은 new 연산자를 사용하여 프록시 개체에서 개체를 만들 때 실행됩니다.
- deleteProperty : deleteProperty 트랩은 삭제 연산자를 사용하여 프록시 개체에서 속성을 제거할 때 실행됩니다.
- has – 프록시 개체에 속성이 있는지 확인하기 위해 in 연산자를 사용할 때 has 트랩이 실행됩니다.
- ownKeys – ownKeys 트랩은 프록시 객체에서 Object.getOwnPropertyNames 또는 Object.getOwnPropertySymbols 함수를 호출할 때 실행됩니다.
- getOwnPropertyDescriptor – 프록시 개체에서 Object.getOwnPropertyDescriptor 함수 를 호출하면 getOwnPropertyDescriptor 트랩이 실행됩니다 .
- defineProperty – 프록시 객체에서 Object.defineProperty 함수 를 호출하면 defineProperty 트랩이 실행됩니다.
- preventExtensions – preventExtensions 트랩은 프록시 개체에서 Object.preventExtensions 함수를 호출할 때 실행됩니다.
- isExtensible – 프록시 개체에서 Object.isExtensible 함수 를 호출하면 isExtensible 트랩이 실행됩니다.
- getPrototypeOf – 프록시 개체에서 Object.getPrototypeOf 함수 를 호출하면 getPrototypeOf 트랩이 실행됩니다.
- setPrototypeOf – 프록시 개체에서 Object.setPrototypeOf 함수 를 호출하면 setPrototypeOf 트랩이 실행됩니다.
설정 및 가져오기 트랩과 마찬가지로 이러한 트랩을 사용하여 원본을 수정하지 않고도 개체에 기능, 유효성 검사 및 제어의 새로운 계층을 추가할 수 있습니다.
프록시 개체의 단점
프록시 개체는 개체에 사용자 지정 기능 또는 유효성 검사를 추가하기 위한 강력한 도구가 될 수 있습니다. 그러나 잠재적인 단점도 있습니다. 이러한 단점 중 하나는 뒤에서 무슨 일이 일어나고 있는지 확인하기 어려울 수 있으므로 디버깅이 어렵다는 것입니다.
프록시 개체는 특히 익숙하지 않은 경우 사용하기 어려울 수 있습니다. 코드에서 프록시 개체를 사용하기 전에 이러한 단점을 신중하게 고려해야 합니다.
답글 남기기