[JS/TS] Proxy 사용하여 Object의 값 변화 감지

• 개요: JS의 Proxy getter/setter를 사용하여 Object의 값이 변경 될 때마다 특정 기능을 수행하도록 하여 디버깅을 원활하게 합니다.

1) 다음 코드를 편한 곳에 삽입합니다. 꼭 static이 아니여도 상관 없으며, 저는 편의상 Utils 클래스에 넣어두었습니다.

class Utils {
    static proxyWatcher(v, callback) {
        return new Proxy(v, {
            set: (obj, prop, value) => {
                obj[prop] = value;
                callback(obj);
                return true;
            },
            get: (obj, prop) => {
								// 값 변화 감지만을 목적으로 한다면 getter 설정이 꼭 필요하진 않습니다.
                return prop in obj ? obj[prop] : undefined;
            },
        });
    }
}

2) 감시하고픈 Object에 다음과 같이 위 메소드를 사용합니다.

let someObject = {value : 0};
someObject = Utils.proxyWatcher(someObject, (obj) => {
  // setter 실행시 수행할 callback 동작을 넣어줍니다. 아래는 예제입니다.  
	console.warn("DEBUG   :::::   " + obj.value);
 });

3) 이제 Object 내부의 값이 업데이트 될 때마다 콜백 함수가 실행됩니다. (예제는 JS 환경에서 동작시켰으므로 살짝 코드가 다릅니다만 충분히 응용 가능하실 것이라고 생각...)

• 주의사항: 중첩된 Object 내부의 값 변화는 위 코드만으로 감지하지 못합니다. Object.keys()와 forEach() 등을 활용하여 응용 코드를 작성한 뒤 사용하시면 됩니다.