4. [Proxy 1~4챕터] 자바스크립트 완전 끝내기: ES6+ 심화

1. 기본 오퍼레이션: Proxy란, 기본 오퍼레이션 논리

관련 코드

이번에는 proxy를 배워보았다. (오퍼레이션은 연산자를 뜻함.)

Proxy는 특정 객체를 감싸 프로퍼티 읽기, 쓰기와 같은 객체에 가해지는 작업을 중간에서 가로채는 객체로, 가로채진 작업은 Proxy 자체에서 처리되기도 하고, 원래 객체가 처리하도록 그대로 전달되기도 한다.

let proxy = new Proxy(target, handler)

• target – 감싸게 될 객체로, 함수를 포함한 모든 객체가 가능하다.
• handler – 동작을 가로채는 메서드인 '트랩(trap)'이 담긴 객체로, 여기서 프락시를 설정한다.
• (예시: get 트랩은 target의 프로퍼티를 읽을 때, set 트랩은 target의 프로퍼티를 쓸 때 활성화됨).

---

2. Proxy 논리, Proxy 모습

proxy를 그림처럼 표현하면 위와 같을 것이다. 

결국 proxy는 중간 역할자인 셈.

---

3. handler, trap, target

target은 이벤트 발생에 많이 쓰는 객체이다.

$("a").click(function(event){
      console.log(event.target);
});

a요소를 클릭할 때마다 이벤트가 일어나고, 타겟은 이벤트 대상인 a가 되며, 콘솔창에 띄우게 될 것이다.

---

trap은 중간에서 가져가주는 역할을 해주며, 전체적인 이벤트를 컨트롤하는 역할을 hander가 해주는 것이다.

핸들러는   target의 동작을 제어하는 메서드를 정의한 객체라고 정의가능하다.

핸들러에는 get과 set 함수가 있다. (디버거 열어보면 보임)

---

4. Proxy 인스턴스 생성: new Proxy(), Proxy.revocable()

proxy를 쓰고 싶으면 new 연산자를 써야 하고, 이후 상수나 변수에 할당해 주면 된다.

---

Proxy.revocable(target, handler)

Proxy.revocable() static 메서드는 취소 가능한 Proxy 개체를 생성한다.