분류 전체보기

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/Javascript

[JS] 일반 함수와 화살표 함수의 차이

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

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 구성 요소 인스턴스는 생성될 때 일련의 초기..

FRONTEND/Vue.js

[Vue] vuex의 mutations과 actions

🔎 Mutations과 Actions의 차이 ✅ Mutations은 동기적 로직을 정의 ✅ Actions는 비동기적 로직을 정의 Mutations에서 다수의 상태 변경이 비동기적으로 수행되었을 경우 예측 불가능한 상태가 되는 것을 막기 위한 의도가 있는 것 같다. action에서는 mutations으로 commit을 행함으로써 간접적으로 상태를 변경하지만 actions을 호출하기 위한 dispatch method는 Promise를 반환하기 때문에 처리의 순서를 제어하는 것이 가능하다. 🔎 동기적 처리의 사용 📎actions 을 활용한 예시코드 new Vuex.Store({ state: { count: 0 }, mutations: { plus(state, num) { stage.count += num; }..

숭코기
'분류 전체보기' 카테고리의 글 목록 (16 Page)