이 문서는 자바스크립트에서 프록시(Proxy) 디자인 패턴의 개념과 구현 방법을 설명한다. 프록시는 대상 객체에 대한 접근을 제어하고, 유효성 검사, 권한 확인, 캐싱, 지연 로딩, 로깅 등의 부가 기능을 추가할 수 있다. 문서는 ES5 스타일의 수동 구현 예시(StudentList 로깅, Geolocation 캐싱)와 ES6 `Proxy` 객체를 이용한 트랩(Trap) 기반 구현 예시를 비교하여 다룬다.
6 min read
자바스크립트 디자인 패턴 - 프록시(Proxy)
Source
Evernote/Inbox/자바스크립트 디자인 패턴 - 프록시(Proxy).md
Summary
이 문서는 자바스크립트에서 프록시(Proxy) 디자인 패턴의 개념과 구현 방법을 설명한다. 프록시는 대상 객체에 대한 접근을 제어하고, 유효성 검사, 권한 확인, 캐싱, 지연 로딩, 로깅 등의 부가 기능을 추가할 수 있다. 문서는 ES5 스타일의 수동 구현 예시(StudentList 로깅, Geolocation 캐싱)와 ES6 Proxy 객체를 이용한 트랩(Trap) 기반 구현 예시를 비교하여 다룬다.
Key Points
프록시 패턴은 대상 객체와 동일한 인터페이스를 가지며, 대상 객체에 대한 접근을 가로채어 동작을 보완하거나 제어한다.
주요 활용 사례: 입력 유효성 검사, 권한 확인, 캐싱(반복 호출 방지), 지연 로딩(비싼 객체 생성 연기), 로깅, 원격 객체 로컬화.
ES5 구현 방식: 프록시 객체가 대상 객체를 참조하고, 메서드 호출 시 부가 로직(로그, 캐시 확인)을 수행한 후 대상 메서드를 호출하는 형태.
ES6 Proxy API: new Proxy(target, handler)를 사용하며, 핸들러 객체의 트랩 메서드(get, set 등)를 통해 대상 객체의 속성 접근을 가로채고 조작할 수 있다.