[JS] Proxy 객체란

프록시(Proxy) 객체란?

Proxy 객체는 자바스크립트의 기본 동작을 가로채고 그 동작을 개발자가 원하는 방식으로 제어할 수 있는 객체이다.
한마디로 객체의 동작을 동적으로 제어할 수 있어서, 일반 객체에서는 불가능했던 속성 접근 제어, 로깅, 밸리데이션, 가짜 필드 처리 등을 유연하게 처리할 수 있다.

Proxy 객체 기본

get은 프로퍼티 접근을 가로채고, set은 프로퍼티 설정을 가로챈다.

const user = {
  name: "홍길동",
  age: 30,
};

const userProxy = new Proxy(user, {
  get(target, prop) {
    console.log(`${prop} 프로퍼티에 접근함`);
    return target[prop];
  },
  set(target, prop, value) {
    console.log(`${prop} 프로퍼티에 ${value}를 설정함`);
    target[prop] = value;
    return true;
  },
});

console.log(userProxy.name);  // 콘솔: name 프로퍼티에 접근함
userProxy.age = 31;           // 콘솔: age 프로퍼티에 31를 설정함

다시말해서 자바스크립트 객체의 내부 메서드의 커스텀이 가능하다.

Proxy 메서드 활용

Proxy는 get, set 외에도 다양한 동작을 가로챌 수 있는 총 13개의 trap 메서드를 지원한다.

has: in 연산자 사용 시 호출 ('key' in obj)
deleteProperty: delete obj.key 시 호출
ownKeys: Object.keys(), Object.getOwnPropertyNames() 등 호출 시 사용
defineProperty: Object.defineProperty() 호출 시
apply: 프록시가 함수로 쓰일 때 호출됨 (예: proxyFn())
construct: new 키워드로 객체를 생성할 때 호출됨 (new Proxy(...))

예시

예를 들어, 프론트엔드에서 민감한 정보를 렌더링 하지 않게 Proxy 객체로 처리해보자.

const apiResponse = {
  name: "김개발",
  password: "1234",  // 노출되면 안 되는 민감 정보
};

const safeResponse = new Proxy(apiResponse, {
  get(target, prop) {
    if (prop === "password") {
      return '해당 정보는 접근할 수 없습니다';
    }
    return target[prop];
  },
});

console.log(safeResponse.name);     // "김개발"
console.log(safeResponse.password); // "해당 정보는 접근할 수 없습니다"

결론

Proxy 객체는 자바스크립트의 객체 동작을 제어할 수 있는 막강한 도구이다.
로깅, 보안, 유효성 검사, API 응답 처리 등 다양한 분야에서 실용적인 패턴을 만들 수 있다.
하지만 잘못 사용하면 디버깅이 어려울 수 있으므로 목적에 맞게 적절히 사용하는 것이 중요할 것 같다.