✅ 함수형 data 사용하기 error `data` property in component must be a function vue를 이용하여 컴포넌트를 나누게 되면 한 번쯤 볼 수있는 경고메세지. data를 함수형이 아닌 오브젝트 형태로 선언할 때 뱉어내는 오류이다. vue 공식문서에 vue 시작하기를 보면 data에 return이 없는 것을 확인할 수 있다. vue는 하나의 인스턴스 안에서 작업을 할 때는 굳이 함수로 반환하지 않아도 된다. 하지만 컴포넌트에서의 Data 선언은 다르다. 각각의 다른 컴포넌트마다 각자의 데이터를 관리해야 하기 때문이다. 컴포넌트마다 Data를 오브젝트로 생성하여 여러 번 사용하더라도 결국엔 JS가 작동하는 방식으로 인해 구성 요소의 모든 단일 인스턴스가 이 속성을 공유..
SFC란 Single File Componentd의 약자로 단일 파일 컴포넌트다. 말 그대로 하나의 파일이 하나의 컴포넌트가 된다 라는 뜻이다. 이전에 cdn으로 Vue를 사용했을 때 컴포넌트를 생성하려면 new Vue({ el: '#app', components: { 'app-header': { template: '{{ propsData }}', props: ['propsData'] }, }, data: { message: 'hello', number: 10 } }); template, props, data.. 등 Vue 인스턴스에 필요한 모든 요소를 Vue 객체 안에 정의해야 했다. SFC를 이용하면 보다 직관적인 component 생성이 가능하다. 💡 .vue 파일 생성 // html code.. ..
vue-gtag 를 설치하고 event 등록이 궁금해졌다. 📎 https://matteo-gabriele.gitbook.io/vue-gtag 위의 문서에 정리가 잘 되어 있어서 이해하기 쉬웠다. export default { name: 'MyComponent', methods: { track () { this.$gtag.event(, { 'event_category': , 'event_label': , 'value': }) } } } track() 이라는 메소드가 실행 될때마다 이벤트가 등록 되도록 되어있다. ✅ action: 이벤트 카테고리에 대한 설명 (ex. 버튼 클릭, 재생 등) ✅ category: 이벤트 유형을 나타내는 것 ✅ label: 추가 세분화 용도 (ex. 파일명 등) ✅ value:..
💡 구글 애너리틱스 UA 종료 유니버설 애널리틱스 (Universal Analytics, UA) 버전이 2023년 7월 1일 이후부터 서비스가 종료된다. 서비스 종료시점에서 부터는 신규 데이터 수집 및 조회가 안되기 때문에 구글 애널리틱스 4 (GA4) 로 이전을 해야한다. 💡 vue-analytics 지원 중단 기존에 지원하던 vue-analytics 에서도 더 이상 지원이 안된다는 안내 문구가 나온다. 구글 애널리틱스 analytics.js 자체가 중단되고, gtag.js로 수집을 하라 권고가 되면서 vue-analytice 대신 vue-gtag를 이용하라고 안내가 되어있다. 💡vue-gtag https://www.npmjs.com/package/vue-gtag vue-gtag Global Site ..
