From dc0548bc6679ffb4d9800e405d147a0c27a558eb Mon Sep 17 00:00:00 2001 From: jeoneunbae Date: Wed, 16 Oct 2019 11:35:07 +0900 Subject: [PATCH] =?UTF-8?q?##285=20[=ED=94=84=EB=9D=BD=EC=8B=9C]=20?= =?UTF-8?q?=EA=B3=BC=EC=A0=9C=20=EB=B2=88=EC=97=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../01-proxy/03-observable/solution.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/1-js/99-js-misc/01-proxy/03-observable/solution.md b/1-js/99-js-misc/01-proxy/03-observable/solution.md index c0797a856b..28ce7870fa 100644 --- a/1-js/99-js-misc/01-proxy/03-observable/solution.md +++ b/1-js/99-js-misc/01-proxy/03-observable/solution.md @@ -1,26 +1,26 @@ -The solution consists of two parts: +해답은 크게 두 부분으로 구성됩니다. -1. Whenever `.observe(handler)` is called, we need to remember the handler somewhere, to be able to call it later. We can store handlers right in the object, using our symbol as the property key. -2. We need a proxy with `set` trap to call handlers in case of any change. +1. `.observe(handler)`이 호출될 때마다 핸들러를 어딘가에 보관해두고 나중에 호출될 수 있도록 해야 하는데, 심볼을 프로퍼티 키로 사용해 핸들러를 객체에 저장할 수 있게 해 보았습니다. +2. 변경이 있을 때마다 핸들러가 호출되도록 `set` 트랩이 있는 프락시를 만들어 보았습니다. ```js run let handlers = Symbol('handlers'); function makeObservable(target) { - // 1. Initialize handlers store + // 1. 핸들러를 저장할 곳을 초기화합니다. target[handlers] = []; - // Store the handler function in array for future calls + // 나중에 호출될 것을 대비하여 핸들러 함수를 배열에 저장합니다. target.observe = function(handler) { this[handlers].push(handler); }; - // 2. Create a proxy to handle changes + // 2. 변경을 처리할 프락시를 만듭니다. return new Proxy(target, { set(target, property, value, receiver) { - let success = Reflect.set(...arguments); // forward the operation to object - if (success) { // if there were no error while setting the property - // call all handlers + let success = Reflect.set(...arguments); // 동작을 객체에 전달합니다. + if (success) { // 에러 없이 프로퍼티를 제대로 설정했으면 + // 모든 핸들러를 호출합니다. target[handlers].forEach(handler => handler(property, value)); } return success;