JavaScript - 프록시: 초보자 가이드

안녕하세요, 야심勃勃한 프로그래머 여러분! 오늘 우리는 자바스크립트 프록시의 세계로 흥미로운 여정을 떠납니다. 프록시에 대해 들어본 적이 없어도 걱정하지 마세요 - 우리는 매우 기본적인 것부터 시작하여 차례대로 공부할 것입니다. 이 튜토리얼이 끝나면, 프록시를 마치 전문가처럼 사용할 수 있을 것입니다!

자바스크립트에서 프록시는 무엇인가요?

간단한 비유로 시작해보겠습니다. 당신이 유명인이된 상상해봅시다 (왜냐하면 큰 꿈을 꾸는 것이 좋잖아요?). 너무 유명해서 약속, 팬레터, 그리고 다른 일상적인 활동을 처리해야 하는 사람이 필요해요. 이这样的人은 실제 세계에서 프록시라고 부릅니다.

자바스크립트에서 프록시는 비슷한 방식으로 작동합니다. 프록시는 다른 객체(목표 객체라고 부를게요)를 감싸고 그 객체의 기본적인 연산을 가로채고 다시 정의할 수 있는 객체입니다. 멋지죠?

기본적인 예제를 통해 시작해보겠습니다:

let target = {
name: "John Doe",
age: 30
};

let handler = {
get: function(target, property) {
console.log(`Getting the ${property} property`);
return target[property];
}
};

let proxy = new Proxy(target, handler);

console.log(proxy.name);

이 코드를 실행하면 다음과 같은 출력을 볼 수 있습니다:

Getting the name property
John Doe

이를 분해해보겠습니다:

1. target 객체는 name과 age 프로퍼티를 가지고 있습니다.
2. handler 객체를 생성하고 get 트랩을 정의합니다 (트랩에 대해 더 이야기할게요).
3. proxy를 Proxy 생성자를 사용하여 target과 handler를 전달하여 생성합니다.
4. proxy.name에 접근하려고 할 때, get 트랩이 트리거되어 메시지를 로그한 후 실제 값을 반환합니다.

자바스크립트 프록시 핸들러

이제 우리가 물에 발을 담갔으니, 프록시 핸들러에 대해 좀 더 깊이 탐구해보겠습니다. 핸들러는 프록시의 트랩을 정의하는 객체입니다. 트랩은 프로퍼티 접근, 할당, 열거, 함수 호출 등을 제공하는 메서드입니다.

다음은 일부 일반적인 핸들러 트랩의 표입니다:

트랩	설명
get	프로퍼티 접근을 가로채기
set	프로퍼티 할당을 가로채기
has	in 연산자를 가로채기
deleteProperty	delete 연산자를 가로채기
apply	함수 호출을 가로채기
construct	new 연산자를 가로채기

여러 트랩을 사용하는 더 포괄적인 예제를 보겠습니다:

let target = {
name: "Alice",
age: 25
};

let handler = {
get: function(target, property) {
console.log(`Accessing the ${property} property`);
return target[property];
},
set: function(target, property, value) {
console.log(`Setting the ${property} property to ${value}`);
target[property] = value;
return true;
},
has: function(target, property) {
console.log(`Checking if ${property} exists`);
return property in target;
}
};

let proxy = new Proxy(target, handler);

console.log(proxy.name);  // get 트랩 트리거
proxy.job = "Developer";  // set 트랩 트리거
console.log("age" in proxy);  // has 트랩 트리거

이 코드를 실행하면 다음과 같은 출력을 볼 수 있습니다:

Accessing the name property
Alice
Setting the job property to Developer
Checking if age exists
true

이게 멋지죠? 우리의 프록시는 이제 프로퍼티 접근, 할당, 그리고 in 연산자를 가로채고 있습니다!

자바스크립트 프록시 객체의 사용 사례

이제 "이것은 멋지지만, 실제로 언제 사용할까요?"라고 고민할 수도 있습니다. 훌륭한 질문입니다! 프록시는 여러 가지 실용적인 용도로 사용됩니다:

1. 검증: 프록시를 사용하여 객체에 설정되기 전 데이터를 검증할 수 있습니다.

let user = {
name: "Bob",
age: 30
};

let validator = {
set: function(obj, prop, value) {
if (prop === "age") {
if (typeof value !== "number") {
throw new TypeError("Age must be a number");
}
if (value < 0 || value > 120) {
throw new RangeError("Age must be between 0 and 120");
}
}
obj[prop] = value;
return true;
}
};

let proxiedUser = new Proxy(user, validator);

proxiedUser.age = 25;  // This works
try {
proxiedUser.age = "thirty";  // This throws a TypeError
} catch (e) {
console.log(e.message);
}
try {
proxiedUser.age = 150;  // This throws a RangeError
} catch (e) {
console.log(e.message);
}

2. 로깅: 프록시를 사용하여 객체 프로퍼티에 대한 접근을 로그할 수 있습니다.

let target = {
name: "Charlie",
age: 35
};

let logger = {
get: function(target, property) {
console.log(`Property ${property} accessed at ${new Date()}`);
return target[property];
}
};

let proxiedTarget = new Proxy(target, logger);

console.log(proxiedTarget.name);
console.log(proxiedTarget.age);

3. 기본값: 프록시를 사용하여 존재하지 않는 프로퍼티에 기본값을 제공할 수 있습니다.

let handler = {
get: function(target, property) {
return property in target ? target[property] : "Property not found";
}
};

let proxy = new Proxy({}, handler);

proxy.name = "David";
console.log(proxy.name);  // Outputs: David
console.log(proxy.age);   // Outputs: Property not found

자바스크립트 프록시 핸들러 목록

우리의 자바스크립트 프록시 탐구를 마무리하며, 가능한 모든 핸들러 트랩의 포괄적인 목록을 살펴보겠습니다:

핸들러 트랩	설명
get	프로퍼티 값을 가져오는 것을 가로채기
set	프로퍼티 값을 설정하는 것을 가로채기
has	in 연산자를 가로채기
deleteProperty	delete 연산자를 가로채기
apply	함수 호출을 가로채기
construct	new 연산자를 가로채기
getPrototypeOf	Object.getPrototypeOf를 가로채기
setPrototypeOf	Object.setPrototypeOf를 가로채기
isExtensible	Object.isExtensible를 가로채기
preventExtensions	Object.preventExtensions를 가로채기
getOwnPropertyDescriptor	Object.getOwnPropertyDescriptor를 가로채기
defineProperty	Object.defineProperty를 가로채기
ownKeys	Object.getOwnPropertyNames와 Object.getOwnPropertySymbols를 가로채기

이제 우리는 자바스크립트 프록시의 기본 개념을 다루었고, 몇 가지 실용적인 용도를 탐구했으며, 모든 가능한 핸들러 트랩을 살펴보았습니다. 프록시는 강력한 도구이지만, 신중하게 사용해야 합니다. 특정 사용 사례에 매우 유용하지만, 성능 오버헤드가 따릅니다.

이 튜토리얼이 자바스크립트 프록시에 대한 당신의 오해를 풀어드렸기를 바랍니다. 계속 연습하고 코딩을 하다 보면, 곧 프록시를 마스터하실 것입니다! 행복한 코딩을 기원합니다!

Credits: Image by storyset