✅ 함수형 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.. ..
🔎 SPA vs MPA 💡정의 ✅ SPA(Single Page Application)는 모던 웹의 패러다임이다. SPA는 단일 페이지로 기존의 서버 사이드 렌더링과 비교할 때, 배포가 간단하며 네이티브 앱과 비슷한 사용자 경험을 제공한다는 장점도 있다. ✅ MPA(Multi Page Application)는 link tag를 사용하는 전통적인 웹 방식이다. 새로운 페이지 요청 시 마다 정적 리소스가 다운되고 전체 페이지를 다시 렌더링하므로 새로고침이 발생되어 사용성이 좋지 않다. 💡동작의 차이 SPA와 MPA 동작의 가장 큰 차이는 서버와 데이터를 주고 받을 때 을 통한 submit을 이용하느냐 아니면 ajax를 이용하느냐로 나눠볼 수 있다. 💡 장단점 비교 SPA는 vue, react, angular ..
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:..
