Hello, Vue world!
요새 간간히 토이 프로젝트나 구직 요건에 Vue를 기술 스택으로 요구하는 곳이 많아서 한번 공부해보기로 했다.
내가 수강한 강의에서는 Vue의 Reactivity부터 이야기했다. 사실 강의를 듣고도 100% 이해한 것 같지는 않다. 이해한 내용에 따르면 사용자의 반응에 따라 자동으로 DOM이 업데이트되는 등의 일련의 작용을 말하는 듯 하다. Vue에는 크게 2버전과 3버전이 있는 듯 한데, 이때 reactivity를 구현하기 위해서 내부적으로 사용되는 기술이 조금 변경된 것 같다.
2 버전에서는 내부적으로 Object.defineProperty를 사용한 듯 하다.
3 버전에서는 Reflect와 Proxy를 사용했다고 한다. Reflect와 Proxy, 분명 어디선가 들어본 기억이 있는데 정확히 작동하는 방법을 몰라 여기서 Vue강의를 멈추고 두 개념에 대해 우선적으로 공부하기로 한다.
Proxy, Reflect
Proxy
네트워크를 공부할 때 종종 등장한 Proxy(혹은 Proxy Server)는 서버와 클라이언트 사이에 중계자 역할을 하는 서버를 말한다. JS의 Proxy역시 마찬가지의 개념을 적용시킬 수 있다.
Proxy는 특정 객체를 감싸 프로퍼티 읽기, 쓰기와 같은 객체에 가해지는 작업을 중간에서 가로채는 객체로, 가로채진 작업은 Proxy 자체에서 처리되기도 하고, 원래 객체가 처리하도록 그대로 전달되기도 합니다.
-출처: https://ko.javascript.info/proxy
Proxy는 new Proxy(target, handler)의 형태로 사용된다. handler에는 set, get, apply 등 대신 처리할 작업을 정의하는 함수들이 들어간다. 자세한 사용법은 출처로 밝힌 웹페이지에 훨씬 자세하게 설명되어 있으므로 생략한다.
Reflect
내게 문제는 Reflect였다. 보통 예약어의 이름에는 해당 예약어의 근간이 되는 원리가 숨겨져 있기 마련인데 나로서는 영 짐작하기가 어려웠다. '반영한다'는 뜻과 그 사용되는 방법을 연관짓기가 여간 어려웠다.
결국 구글에 WTF is Reflect이라고 검색하는데...
반영(reflection)은 컴퓨터 과학 용어로, 컴퓨터 프로그램에서 런타임 시점에 사용되는 자신의 구조와 행위를 관리(type introspection)하고 수정할 수 있는 프로세스를 의미한다.
-출처: https://ko.wikipedia.org/wiki/%EB%B0%98%EC%98%81_(%EC%BB%B4%ED%93%A8%ED%84%B0_%EA%B3%BC%ED%95%99)
알고보니 Reflection이 컴퓨터공학 관련 용어였다. 그리고 여러 레퍼런스를 참고한 결과 기존의 Object등의 정적 메서드로 포함되어있던 여러 함수들을 정리한 집합체가 Reflect인 모양이었다.
위의 정의도 사실 그렇게 와닿진 않았는데 stackoverflow의 글이 보다 쉽게 와닿은 것 같다.
so concept of reflection is that, just like we see our reflection in the mirror: we can see things we couldnt see without it, such as: our hair, our lips, tongue, etc.
-출처: https://stackoverflow.com/questions/53170245/what-is-concept-of-reflection-in-javascript
Decorator
인수로 받은 함수의 행동을 변경시켜주는 함수를 데코레이터(decorator) 라고 부릅니다.
Proxy와 Reflect를 보면서 이전에 슬쩍 보았던 typescript의 decorator와 비슷하지 않나라는 생각을 했다. 그런데 decorator는 타입스크립트에만 있는 것이 아니라, 일종의 패턴과 같은 방법론을 말하는 것이었다. 실제 decorator에 대해서 알려주는 사이트에서는 proxy와 decorator의 연관에 대해 아래와 같이 밝히고 있었다.
함수 프로퍼티에 접근할 수 있게 해주는 데코레이터를 만드는 방법도 있습니다. 그런데 이걸 구현하려면 Proxy라는 특별한 객체를 사용해 함수를 감싸야 합니다. Proxy에 대해선 Proxy와 Reflect 에서 다루도록 하겠습니다.
-출처: https://ko.javascript.info/call-apply-decorators#ref-999
참고
- The global
Reflectobject, its use cases and things to watch out for | Stefan Judis Web Development - ecmascript 6 - What does the Reflect object do in JavaScript? - Stack Overflow
- https://stackoverflow.com/questions/53170245/what-is-concept-of-reflection-in-javascript
- https://ko.javascript.info/proxy
- call/apply와 데코레이터, 포워딩
- JavaScript Proxy. 근데 이제 Reflect를 곁들인 | TOAST UI :: Make Your Web Delicious!
- 모던JS: Core Proxy와 Reflect
