Proxy

📌 목차

• Introduction
• What is proxy?
• Basic Example of Proxy
• Conclusion
• Reference

📌 Introduction

안녕하세요. 이번에 Vue3 공부와 나만의 프레임워크 만들기에서 나온 Proxy라는 개념이 생소하여 개념을 정리한 글입니다.

📌 What is proxy?

Proxy객체는 자바스크립트에서의 기본 작업에 대한 행위에 대해 사용자 커스텀 동작을 정의할 때 사용합니다.

기본적인 Proxy 사용:

new Proxy(target, handler);

target은 Proxy로 랩핑할 대상 객체를 지정해주고 handler는 Proxy의 동작을 정의하는 함수 객체를 넣어줍니다.

📌 Basic Example of Proxy

만약 핸들러를 지정을 해주지 않는다면 어떻게 될까요?

const target = {
  message1: "hello",
  message2: "hi",
};

const handler1 = {};

const proxy1 = new Proxy(target, handler1);
console.log(proxy1.message1); // hello
console.log(proxy1.message2); // hi

그렇다면 일반적인 객체와 동일하게 동작을 합니다. handler에는 get, set, has, defineProperty, deleteProperty, construct, apply 등 총 13가지 함수를 핸들링 할 수 있습니다. 그럼 가장 기본적인 get을 사용하여 Proxy를 만들어 보겠습니다.

const target = {
  message1: "hello",
  message2: "hi",
};

const handler = {
  get: function (target, prop, receiver) {
    console.log("target", target);
    console.log("prop", prop);
    console.log("receiver", receiver);
    return 10;
  },
};

const proxy = new Proxy(target, handler);
console.log(proxy.message1);
// target { message1: 'hello', message2: 'hi' }
// prop message1
// receiver { message1: 'hello', message2: 'hi' }
// 10
console.log(proxy.message2);
// target { message1: 'hello', message2: 'hi' }
// prop message2
// receiver { message1: 'hello', message2: 'hi' }
// 10

📌 Conclusion

이렇게 Proxy객체에 대해 만들어보았습니다. proxy의 사용법을 제대로 모르고 있었는데 이번 기회에 정리를 해보았습니다.

📌 Reference

• NHN Toast 나만의 프레임워크 만들기
• MDN Proxy
• dev-momo 티스토리