옵서버 패턴

Vue.js에서 Reactive로 반응성을 주입한 데이터를 콘솔로 찍어보면 아래처럼 Proxy { ... } 형태로 출력한다. Proxy를 사용해서 입력한 데이터(상태)를 한 번 감싼 것이다. 이렇게 Proxy를 이용하면 객체 프로퍼티의 읽기/쓰기 같은 작업을 중간에 가로채서 원하는 작업을 수행하도록 할 수 있다. 사용 방법const proxy = new Proxy(target, handler); target : Proxy로 감쌀 원본 객체. 함수를 포함한 모든 객체 가능handler : get이나 set 같은 동작을 가로채는 메서드(트랩; trap)이 담긴 객체 객체를 proxy로 감싼 후, handler에 상응하는 트랩(메서드)가 있으면 트랩이 실행된다. 트랩이 없으면 target에서 작업이 수행된..

프로퍼티 플래그객체는 값(value) 외에도 플래그(flag)라는 특별한 속성이 있다. 플래그는 아래 3가지 종류가 있다. 일반적으로 객체를 선언하면(객체 리터럴 혹은 Object 생성자 함수 사용) 프로퍼티의 플래그는 true를 기본값으로 가진다. 프로퍼티 값 수정프로퍼티 삭제반복문 나열플래그 수정writable: false❌✅✅✅enumerable: false✅✅❌✅configurable: false✅❌✅❌ writable (수정)true : 프로퍼티 값 수정 가능false : 프로퍼티 값 수정 불가 (프로퍼티 삭제는 가능)enumerable (열거)true : 반복문으로 나열 가능false : 반복문으로 나열 불가configurabletrue : 프로퍼티 삭제 / 플래그 수정 가능false : 프..