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 ..
💡 화살표 함수(Arrow Function)란 화살표 함수는 ES6에서 새로 추가된 내용이다. 기존 함수 표현식과 비교하면 간결한 표현으로 간단하게 사용 가능하다. // 일반함수 function fun() { // ... } // 화살표 함수 const arrFun = () => { // ... } 💡 일반 함수와 화살표 함수의 차이 1️⃣ this ✅ 일반함수 자바스크립트에서 모든 함수는 실행될 때마다 함수 내부에 this 라는 객체가 추가된다. ▪️ 함수 실행시에는 전역(window) 객체를 가르킨다. ▪️ 메소드 실행시에는 메소드를 소유하고 있는 객체를 가르킨다. ▪️ 생성자 실행시에는 새롭게 만들어진 객체를 가르킨다. 일반함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 ..
