JS Proxy란? JS Object란?

배경

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 웹 기술 블로그

 

누가 번역했는지 참 자연스럽게 잘했다. 2016년에 내가 번역한 글이다 (죄송 😊).

번역보다 중요한 건 원글이다. 질문을 던지고 생각하게 만드는 솜씨가 훌륭하다. 작가의 피가 흐르는 엔지니어다. 읽어보시길.