Proxy Pattern (JavaScript)

이 글은 Patterns.dev를 참고하여 작성한 시리즈 입니다.

 

Proxy Pattern

대상 객체에 대한 상호작용 가로채기 및 제어

 

Proxy 객체를 사용하면 특정 객체와 상호작용을 보다 효과적으로 제어할 수 있습니다. 프록시 객체는 값을 얻거나 설정할 때 등 상호작용할 때의 동작을 설정할 수 있습니다.

 

일반적으로 프록시는 다른 사람의 대리인을 의미합니다. 상대방과 직접 대화하는 대신, 당신이 대화하려고 했던 사람을 대신할 대리인과 대화합니다. JavaScript에서도 마찬가지 입니다. 원본 객체와 대화하는 대신 Proxy 객체와 대화합니다.

-> 원본 객체를 Immutable하게 사용할 수 있습니다.

 

먼저 yeon 객체를 생성합니다. 저를 나타내는 객체입니다.

 

이 객체와 직접 상호작용 하는 대신 프록시 객체와 상호작용하는 것이 좋습니다.

JavaScript에서는 Proxy를 통해 프록시 객체를 쉽게 생성할 수 있습니다.

 

 

Proxy의 두 번째 인자는 핸들러를 나타내는 객체입니다. 핸들러 객체에서 상호작용 유형에 따라 특정 동작을 정의할 수 있습니다. 메서드는 여러 가지가 있지만 가장 일반적인 두 가지 메서드는 다음과 같습니다.

 

• get: 속성에 엑세스하려고 할 때 호출됩니다.
• set: 속성을 수정하려고 할 때 호출됩니다.

 

Proxy 핸들러 추가

yeonProxy에 핸들러를 추가해봅시다. get과 set메서드를 호출할 때 console을 찍을 수 있도록 합니다.

속성을 수정하거나 탐색하려고 하면 어떤 일이 일어나는지 살펴보겠습니다.

속성을 수정하거나 탐색할 때 console.log가 찍히게 되었습니다.

---

 

활용하기

Proxy는 validation(검증)을 추가할 때 유용합니다. 사용자는 yeon의 age 값을 string 타입으로 변경해선 안됩니다. 또한 존재하지 않는 속성에 엑세스하려고 할 경우 사용자에게 알려야 합니다.

if문을 통해 객체가 의도하지 않은 형태의 값을 넣지 못하도록 했습니다. 즉 순수하게 데이터를 유지하는 데 도움이 됩니다.

 

Reflect

JavaScript는 Reflect라고 불리는 내장 객체를 제공합니다. Reflect를 사용하면 proxy를 사용할 때 대상 객체를 쉽게 다룰 수 있습니다.

이전에는 []을 통해서 직접 값을 가져오거나 대상 객체의 속성을 수정하고 엑세스 하려고 했습니다. 그 대신 Proxy의 핸들러를 모두 동일하게 갖고 있는 Reflect를 통해 Reflect.get(), Reflect.set()을 사용하는 것으로 객체의 속성을 엑세스하거나 변경할 수 있습니다.

Reflect를 사용함으로써 더 깔끔하게 에러핸들링과 값의 반영을 구현할 수 있게 되었습니다.

 

 

 

Reference

https://ui.toast.com/weekly-pick/ko_20210413

https://www.patterns.dev/posts/singleton-pattern/