Javascript Proxy 가이드

JavaScript의 Proxy 객체는 객체의 동작을 가로채어 원하는 방식으로 제어할 수 있도록 해주는 강력한 기능입니다. 이를 활용하면 데이터 검증, 로깅, 기본값 설정 등의 다양한 기능을 손쉽게 구현할 수 있습니다.

1. Proxy란?

Proxy는 객체를 감싸(wrap) 특정 동작을 가로채고 수정할 수 있도록 해주는 기능입니다.

const proxy = new Proxy(target, handler);

• target: 감싸고자 하는 원본 객체
• handler: 가로채고 싶은 동작을 정의하는 객체 (트랩(trap) 메서드 포함)

handler 객체에는 다양한 트랩(trap)이 존재하며, 이를 활용하여 객체의 동작을 제어할 수 있습니다.

2. 기본 예제: 객체 속성 가로채기

const person = { name: "Alice", age: 25 };

const handler = {
  get(target, property) {
    console.log(`'${property}' 속성을 읽으려 합니다.`);
    return target[property];
  },
};

const proxyPerson = new Proxy(person, handler);

console.log(proxyPerson.name);  // 'name' 속성을 읽으려 합니다. → Alice
console.log(proxyPerson.age);   // 'age' 속성을 읽으려 합니다. → 25

3. 예제: 값 검증 (유효성 검사)

const validator = {
  set(target, property, value) {
    if (property === "age" && (typeof value !== "number" || value < 0)) {
      throw new Error("나이는 0 이상의 숫자여야 합니다.");
    }
    target[property] = value;
    return true;
  }
};

const user = new Proxy({}, validator);
user.age = 30;  // 정상 동작
console.log(user.age); // 30

user.age = -5; // Error: 나이는 0 이상의 숫자여야 합니다.

4. 예제: 동적 속성 기본값 설정

const defaultHandler = {
  get(target, property) {
    return property in target ? target[property] : "값이 없습니다";
  }
};

const user = new Proxy({}, defaultHandler);
console.log(user.name); // "값이 없습니다"
user.name = "Charlie";
console.log(user.name); // "Charlie"

5. 예제: 함수 호출 가로채기

const logger = {
  apply(target, thisArg, args) {
    console.log(`함수 실행: ${target.name}(${args})`);
    return target.apply(thisArg, args);
  }
};

function sum(a, b) {
  return a + b;
}

const proxySum = new Proxy(sum, logger);
console.log(proxySum(5, 3));  // "함수 실행: sum(5,3)" → 8

6. Proxy의 주요 트랩(trap) 목록

트랩	설명
get(target, property, receiver)	객체 프로퍼티 읽기 감지
set(target, property, value, receiver)	객체 프로퍼티 변경 감지
deleteProperty(target, property)	속성 삭제 감지
has(target, property)	in 연산자 사용 감지 (property in obj)
apply(target, thisArg, args)	함수 호출 감지
construct(target, args, newTarget)	new 키워드 사용 감지

결론

Proxy는 객체의 동작을 가로채어 유효성 검사, 기본값 제공, 함수 호출 로깅 등 다양한 활용이 가능합니다. 이를 이용하면 객체를 더욱 강력하고 유연하게 제어할 수 있습니다. 🚀