반응형

Proxy 2

data (Vue2)에 대하여

새로운 컴포넌트 인스턴스 생성 시 자체 state를 가지는 경우, data 함수를 호출한다. data 메서드는 하나의 객체만을 반환한다. 반환된 객체는 $data로 저장된다. 만약 아래와 같이 data 메서드를 정의하고 $data를 확인해본다면, data() { return { num: this.number, }; } console.log(this.$data); console.log(this.num); 아래와 같은 결과를 얻게 된다. 결과를 보면 this.$data가 Proxy인 것을 확인할 수 있다. Vue는 주어진 객체의 모든 프로퍼티를 proxy로 변환한다. 이 proxy는 es6 이상에서만 지원하는 기능이다. 따라서 IE에서도 Vue3를 사용할 수 있게 하기 위해 Object.definePrope..

IT/Vue 2022.09.02

[팀 프로젝트 기록] webpack, web-dev-server, cors, proxy 삽질기

클라이언트와 서버 간의 포트가 다르면 클라이언트에서 api 요청을 할 때 cors 정책에 위반이 된다. 이를 해결할 수 있는 방법으로 프록시 서버를 구축하여 서버와 서버 간의 통신을 하도록 해서 우회하는 것을 선택하였다. 이때 사용한 것이 웹팩 데브 서버이다. 이를 위해 웹팩과 웹팩 데브 서버에 대해서 알아보았고 내용을 정리해보았다. 웹팩으로 해결하려는 문제 자바스크립트 유효 범위 es6 modules 문법과 웹팩의 모듈 번들링으로 해결 - es6 modules 문법 import, from, export, default와 같이 모듈 관리 전용 키워드를 사용하므로 가독성이 좋다. 비동기 방식으로 작동하고 모듈에서 실제로 쓰이는 부분만 불러오기 때문에 성능과 메모리 부분에서 유리하다. 브라우저 별 http ..

IT/Project 2022.02.09
반응형