[TIL] Vue.js 기초 2 - Proxy, Proxy 객체

Proxy

내가 알고 있는 프록시는 프록시 서버인데,, Vue.js의 프록시도 이건가? 해서 찾아보니 프록시 적용하는 법이 나오긴 했다.

🔽

- FE와 BE API 서버가 같은 호스트에서 돌아가지 않고 있다면 API 요청 시 Proxy가 필요하다.

- Vue.js에서 프록시를 사용하려면  vue.config.js에서 아래와 같이 옵션을 설정해주면 된다.

module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}

 

하지만 수업에서 배운 건 Proxy 객체!

그래서 관련된 자료를 다시 찾아보니 ES6에서 도입된 개념이다.

 

Proxy 객체란?

다른 객체에 대한 proxy를 생성해주는 기능을 한다.

그럼 proxy는 뭐냐? 해당 객체의 기본 작동들을 가로채거나 재정의할 수 있다는 뜻이다.

proxy가 대리라는 뜻이 있다는 것을 고려하면 이해가 쉽다.

 

원본 객체를 대신해서 쓸 수 있는 객체를 말하는데, 속성을 get, set, 정의 등의 객체 작동에 대해 재정의할 수 있다.

주로 속성에 접근하거나 검증하거나, 포맷팅하거나 등등의 경우에 쓰인다.

 

Proxy 사용법

const target = {
  message1: "hello",
  message2: "everyone",
};

const handler1 = {};

const proxy1 = new Proxy(target, handler1);

위 예시처럼 target, handler라는 매개변수를 받아서 사용한다.

 

target : proxy 뜨고 싶은 원본 객체

handler: 어떤 동작을 가로채고 어떻게 그 가로챈 동작을 재정의할 건지 정의하는 객체

 

Vue 내부에서도 Proxy를 사용하는데, 반응성을 지원하기 위한 기법으로 쓰인다.

이때 Vue 인스턴스를 생성하면 data로 지정된 객체에 대해 자동으로 내부적으로 Proxy 객체로 래핑하는 작업을 하기 때문에 개발자가 직접 Proxy를 생성할 필요가 없다.

 

그럼 Vue의 반응성이란 무엇일까?

Vue의 반응성(reactivity)

리액트와 비교했을 떄 가장 눈에 띄는 Vue의 특징은 바로 반응성 시스템이다.

반응성이란 

주로 데이터 변경에 대해 자동으로 action을 수행하는 능력을 말한다.

예를 들어서 값이 변하면 이를 감지해서 바로 DOM을 업데이트 하거나 네트워크 요청을 하는 경우가 있다.

 

Vue에서 이같은 반응성 시스템이 가능한 이유는 Vue의 반응성 시스템이 런타임에 속성에 대한 접근(property access)을 추적하기 때문이다.

속성에 대해 Proxy 래퍼 +  getter/setter 함수를 활용해서 접근 가능한 것이 Vue의 특징이다.

---

참고자료

https://cli.vuejs.org/config/

Configuration Reference | Vue CLI

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy

Proxy - JavaScript | MDN

https://vuejs.org/glossary/#reactivity

Vue.js