Vue

FRONTEND/Vue.js

[Vue] SFC(Single File Component)

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.. ..

FRONTEND/Vue.js

[Vue] vue에 GA4 이벤트 추가하기

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:..

FRONTEND/Vue.js

[Vue] vue에 구글애널리틱스(GA4) 연동하기

💡 구글 애너리틱스 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 ..

FRONTEND/Vue.js

[Vue] arrow function 사용 시 주의 사항

Each Vue component instance goes through a series of initialization steps when it's created - for example, it needs to set up data observation, compile the template, mount the instance to the DOM, and update the DOM when data changes. Along the way, it also runs functions called lifecycle hooks, giving users the opportunity to add their own code at specific stages. 각 Vue 구성 요소 인스턴스는 생성될 때 일련의 초기..

숭코기
'Vue' 태그의 글 목록