메타프로그래밍은 코드가 런타임에 동적으로 자신의 동작을 조작할 수 있게 해주는 강력한 프로그래밍 패러다임입니다. ES6에서 프록시와 리플렉트 API의 도입으로 자바스크립트는 메타프로그래밍 기능을 새로운 차원으로 끌어올려, 개발자들이 속성 접근, 할당 및 함수 호출과 같은 핵심 객체 작업을 가로채고 재정의할 수 있게 해줍니다.
이 블로그 포스트는 이러한 고급 자바스크립트 기능을 깊이 탐구하며, 그 문법, 사용 사례 및 이들이 어떻게 함께 작동하여 동적 프로그래밍을 가능하게 하는지를 설명합니다.
프록시란 무엇인가?
자바스크립트의 프록시는 개발자가 객체에서 수행되는 기본 작업을 가로채고 사용자 정의할 수 있게 해주는 래퍼입니다. 이러한 작업에는 속성 가져오기 및 설정, 함수 호출, 속성 삭제 등이 포함됩니다.
프록시 문법
const proxy = new Proxy(target, handler);
target: 프록시된 객체입니다.handler: 가로챈 작업에 대해 사용자 정의 동작을 정의하는 메서드(트랩이라고 함)를 포함하는 객체입니다.
예시: 속성 접근 로깅
const user = { name: 'Alice', age: 30 };
const proxy = new Proxy(user, {
get(target, property) {
console.log(`Accessing property: ${property}`);
return target[property];
}
});
console.log(proxy.name); // Logs: Accessing property: name → Output: Alice
주요 프록시 트랩
| Trap Name | Operation Intercepted |
|---|---|
get |
속성 접근하기 (obj.prop 또는 obj['prop']) |
set |
속성에 값 할당하기 (obj.prop = value) |
deleteProperty |
속성 삭제 (delete obj.prop) |
has |
속성 존재 여부 확인 (prop in obj) |
apply |
함수 호출 (obj()) |
construct |
new를 사용하여 새 인스턴스 생성 (new obj()) |
프록시를 사용한 고급 사용 사례
1. 입력 유효성 검사
const user = { age: 25 };
const proxy = new Proxy(user, {
set(target, property, value) {
if (property === 'age' && typeof value !== 'number') {
throw new Error('Age must be a number!');
}
target[property] = value;
return true;
}
});
proxy.age = 30; // Works fine
proxy.age = '30'; // Throws Error: Age must be a number!
이 예제에서 set 트랩은 할당을 허용하기 전에 유형 유효성을 보장합니다.
2. 반응형 시스템 (Vue.js 반응성과 유사)
const data = { price: 5, quantity: 2 };
let total = 0;
const proxy = new Proxy(data, {
set(target, property, value) {
target[property] = value;
total = target.price * target.quantity;
console.log(`Total updated: ${total}`);
return true;
}
});
proxy.price = 10; // Logs: Total updated: 20
proxy.quantity = 3; // Logs: Total updated: 30
이 코드는 의존하는 속성이 업데이트될 때마다 값을 동적으로 다시 계산하여, 최신 반응형 프레임워크의 동작을 모방합니다.
Reflect란?
Reflect API는 프록시를 보완하여 객체 작업에 대한 기본 동작을 수행하는 메서드를 제공하여, 프록시 트랩에 쉽게 통합할 수 있도록 합니다.
주요 Reflect 메서드
| Method | Description |
|---|---|
Reflect.get(target, prop) |
속성의 값을 검색합니다. |
Reflect.set(target, prop, val) |
속성 값을 설정합니다. |
Reflect.has(target, prop) |
속성 존재 여부 확인 (prop in obj). |
Reflect.deleteProperty(target, prop) |
속성을 삭제합니다. |
Reflect.apply(func, thisArg, args) |
지정된 this 컨텍스트로 함수를 호출합니다. |
Reflect.construct(target, args) |
생성자의 새 인스턴스를 만듭니다. |
예: 기본 동작에 Reflect 사용
const user = { age: 25 };
const proxy = new Proxy(user, {
set(target, property, value) {
if (property === 'age' && typeof value !== 'number') {
throw new Error('Age must be a number!');
}
return Reflect.set(target, property, value); // Default behavior
}
});
proxy.age = 28; // Sets successfully
console.log(user.age); // Output: 28
Reflect를 사용하면 사용자 정의 논리를 추가하면서 기본 작업을 유지하여 코드를 간소화할 수 있습니다.
실제 사용 사례
- 보안 래퍼: 민감한 속성에 대한 액세스 제한.
- 로그 및 디버깅: 객체 변경을 추적합니다.
- API 데이터 유효성 검사: API 데이터에 대한 엄격한 규칙을 보장합니다.
결론
프록시와 Reflect를 사용한 메타프로그래밍을 통해 개발자는 응용 프로그램 동작을 동적으로 제어하고 수정할 수 있습니다. 이러한 도구를 숙달하여 JavaScript 전문성을 높이세요.
코딩을 즐기세요!
Source:
https://dzone.com/articles/metaprogramming-proxies-reflect-javascript