리액트에서 Proxy 디자인 패턴 사용하기

Proxy 패턴에 대해 아시나요? Proxy는 메세지를 주고받는 두 대상 사이에 위치해서 여러가지 역할을 합니다. Javascript의 Proxy는 대상 객체의 앞에 위치하여 객체에 대한 외부 요청을 제어합니다.

Proxy 객체를 사용하면 한 객체에 대한 기본 작업을 가로채고 재정의하는 프록시를 만들 수 있습니다.

이번에 소개해드리는 글은 이러한 Proxy를 어떻게 활용할 수 있는지 공유하고 있습니다.

먼저 Proxy를 통해 얻을 수 있는 이점은 아래와 같다고 소개합니다.

• 데이터 캐싱

• 보안 개선

• 자원 소모 감소(게으른 로딩, 캐싱, 접근 제한 등)

• 네트워크 최적화

• 동시성 제어

그리고 각 이점에 대한 예시를 소개합니다.

• API를 통해 가져온 사용자 데이터에 비밀번호(민감정보)가 포함되어 있다면, 서비스를 사용하고 있는 사용자가 어드민이 아니라면 접근해서 수정할 수 없도록 합니다.

  • 이 경우 말 그대로 '보안'이 아니라 데이터에 접근해서 수정하거나 하는 등의 동작을 불가능하게 만드는 '접근 제어'가 더 적절할 것 같습니다.

• API를 통해 데이터를 이미 가져왔다면 다음에 데이터를 가져올 땐 API를 호출하지 않고 기존 데이터를 제공합니다.

• 그리고 구체적이진 않지만 다른 사용예를 소개합니다.

  • 추상화 및 코드 재사용

  • 데이터 검증 및 sanitization

  • 퍼포먼스 모니터링 및 최적화

Proxy와 관련해 잘 몰랐는데, 이 글을 이해하기 위해 Proxy에 대해 공부하게 된 계기가 되었습니다. 관련해서 많은 도움이 된 글을 여기에 더해 소개합니다.