JavaScript에서 Proxy란

JavaScript에서 Proxy란

다른 객체에 대한 접근을 "가로채서" 그 동작을 커스터마이징할 수 있는 기능을 말한다.

즉, 객체를 감싸고 -> 객체의 속성 접근, 수정, 호출 등을 감시하거나 조작할 수 있다.

---

const Obj = { name: "john", age: 49 };

const proxy = new Proxy(obj, {
  get(target, prop) {
  	console.log(`${prop}에 접근했습니다`);
  	return target[prop];
  },
  set(target, prop, value) {
    console.log(`${prop}에 ${value}를 설정합니다`);
    target[prop] = value;
    retur true;
  }
});

console.log(proxy.name); // name에 접근했습니다. -> john
proxy.age = 50;          // age에 50을 설정한다.

 

Proxy의 구성

const proxy = new Proxy(target, handler);

• target : 감싸고 싶은 원본 객체
• handler: 어떤 동작을 가로챌지 정의한 객체

자주 쓰이는 트랩

트랩 명	설명
get	속성 읽기 (e.g. proxy.name)
set	속성 쓰기 (e.g. proxy.age = 50
has	in 연산자 (e.g. 'name' in proxy)
deleteProperty	delete proxy.name
apply	함수 호출 감시
construct	new 연산자 감시

---

Example - 읽기 전용 객체 만들기

const readOnly = new Proxy({name: "john" }, {
  set(target, prop, value) {
    throw new Error("수정할 수 없습니다.");
  }
 });
 
 readOnly.name = "Jane"; // 오류 발생!

 

Example - 유효성 검사 추가

const user = {
  age: 0
};

const validatedUser = new Proxy(user, {
  set(target, prop, value) {
    if (prop === "age" && typeof value !== "number") {
      throw new TypeError("숫자만 허용됩니다!");
    }
    target[prop] = value;
    return true;
  }
});

validatedUser.age = 25; //OK
validatedUser.age = "hello"; // 오류 발생!

---

언제 쓰면 좋을까?

• 데이터 유효성 검사
• 디버깅/로깅 삽입
• Vue.js 같은 프레임워크에서 반응형 상태 만들기
• REST API mock 만들기
• 보안성 강화(읽기 전용 객체 등)
•  

---

주의점

• Proxy는 성능상 약간의 오버헤드가 있다.
• 너무 남발하면 디버깅이 어려워질 수 있다.