ES6 Proxy

2019. 03. 23

@yesdoing
이 장희

목차

• Proxy 란?
• Proxy 사용법
• Proxy 예제 

Proxy.....?

Design Pattern?

Proxy란

쉽게 말해 뭔가를
대리해주는 객체입니다. 

롤 대리, 오버워치 대리는 정지 먹는데?

일단 볼까요?

객체의 속성에 접근하려는 시도를 가로챘습니다.
dot 연산자(".")을 오버로딩 한 것입니다.

어떤 일이 일어난 것일까요?

어떻게 한 것일까요?

가상화

Virtualization

가상화란 컴퓨터 분야의
가장 멋진 기술 중 하나입니다.

3가지 그림으로 가상화에 대해서 설명드릴게요.

1. 멋진 석양 그림이 있습니다. 

2. 그림의 한 부분에 테두리를 그려보아요.

3. 테두리 안 밖의 그림을 하위 호완성(Backwards Compatibility)을 유지 하면서 다른 것으로 바꿉니다.

하위 호완성이란 교체를 해도 동작해야 하는 것을 의미합니다.

가상화에서 하위 호완성 역시 중요하지만
핵심은 외곽선을 적절히 그려 넣는 것에 있습니다.

외곽선이란 프로그래밍의 관점으로 API로 구분 지어진 경계를 의미합니다. 

이 경계를 인터페이스라고 부르는 데 인터페이스란 서로다른 2개의 코드가 어떻게 상호규정 하는지를 의미합니다.

인터페이스가 잘 정의되어 있다면 어느 한쪽을 교체 하더라도 다른 한 쪽은 그 교체 사실에 구애 받지 않습니다.

인터페이스

즉, 가상화란 특정 부분을 경계로 긋고
그 부분을 추상화 하는 것을 의미합니다.

가상화

추상화

ES 6의 Proxy는 JavaScript에서 Object에 가상화를 시도한 결과물 입니다.

Object

ECMA Script의 정의에 따르면...

An Object is a collection of properties

그래서 JavaScript의 Object 에 대한 API,
즉 인터페이스를 정의하기 위해 어떤걸 해야할까요?

모든 객체는 다음과 같은 기능을 가져야 합니다.

ECMAScript 표준화 위원회는
객체의 14개 내부 메소드를 정의할 때, 이 3가지 요소(속성, prototype, 함수)에 집중하였습니다.

 Object의 14가지 내장 메소드들

결국, Proxy란 JavaScript에서 Object의 기본작업

속성 조회, 할당, 열거, 호출 등에 대한 행위
에 대해 사용자의 커스텀 동작을 정의할 때

사용 할 수 있습니다.

Proxy의 사용법

Proxy 객체는 다음 2가지로 구성됩니다.

• target : proxy로 랩핑할 대상 객체
• handler : operation이 수행 될 때, proxy의 동작을 정의                  하는 함수 객체. 

내장 메소드 [[Set]]의 동작 과정

내장 메소드 [[Get]]의 동작 과정

내장 메소드 [[Construct]]의 동작 과정

내장 메소드 [[call]]의 동작 과정

이런 점은 유의 해야 합니다. 

proxy 객체는 타겟 객체와 타입이 같지 않습니다. 

proxy !== target 은 false 가 결과로 출력 됩니다. 

만약 proxy의 target이 DOM Element 인 경우, 

document.body.appendChild(proxy) 같은 코드는
TypeError를 출력하게 됩니다.

proxy !== target

document.body.appendChild(proxy)

Proxy 예제

Validation

Two-way Data Binding

끝.

발표를 들어주셔서 정말 감사합니다. 💕