배경
Vue3를 Composition API 스타일로 쓰는 연습 중이다. Composition API에서 새로 도입된 타입이 있다. ref() 함수로 정의하는 리액티브 타입이다. ref() 함수로 리액티브 변수를 정의해서 console.log()를 찍어보면 Proxy 라는 낯선 이름이 보인다. Proxy란 무엇일까?
Vue3 소스코드: ref() 함수로 변수를 선언하고 console에 출력
import { ref } from 'vue'
const hellos = ref([ 'hello', 'world', ])
console.log('hellos.value=', hellos.value)
console에 출력된 내용
Proxy { <target>: (2) […], <handler>: {…} }
console 출력 스크린 캡쳐
결론
JS Proxy가 무엇인지 제대로 소개하는 좋은 글이 있어 링크한다. JS Object가 무엇인지 질문을 던지며 시작한다.
ES6 In Depth: 프락시 (Proxy)
http://hacks.mozilla.or.kr/2016/03/es6-in-depth-proxies-and-reflect/
ES6 In Depth: 프락시 (Proxy) ★ Mozilla 웹 기술 블로그
ES6 In Depth 시리즈는 ECMAScript 표준 6번째 에디션(줄여서 ES6)을 통해 JavaScript 에 새로 추가된 요소들을 살펴보는 시리즈입니다. 오늘 우리가 살펴보려는 것은 다음 코드입니다. var obj = new Proxy({}, { g
hacks.mozilla.or.kr
누가 번역했는지 참 자연스럽게 잘했다. 2016년에 내가 번역한 글이다 (죄송 😊).
번역보다 중요한 건 원글이다. 질문을 던지고 생각하게 만드는 솜씨가 훌륭하다. 작가의 피가 흐르는 엔지니어다. 읽어보시길.
