Web/vue 썸네일형 리스트형 [Nuxt3] 구글 애널리틱스(GA) , 구글 태그 매니저(GTM) 세팅 구글 애널리틱스 적용 vue-gtag 사용 - 유니버설 애널리틱스 서비스를 종료될 예정이라 애널리틱스4를 사용 - 구글 지침 변경으로 이제 vue-gtag를 이용해서 googleAnalytics4를 연동할 수 있다. - 공식문서 : https://matteo-gabriele.gitbook.io/vue-gtag/ Get started - vue-gtag This is just an example by using the Google Analytics domain ID as a configuration ID, but it is possible to use things like Google Adwords as well, so make sure to read the gtag documentation if you .. 더보기 [Nuxt3] 메모리 누수 (feat. nuxt3 버전 이슈) 사건의 발단 pc웹과 특히 모바일웹에서 페이지 이동을 반복적하다보면 메모리가 쌓이다가 결국 웹이 더이상 작동되지않고 콘솔에 스크립트에러를 뱉으며 멈추는 현상을 발견하기 되었다. 아래 메모리 누수 있을법한 자바스크립트는 수정은 해보았지만 왜 계속 메모리가 쌓이는건지 알수없었던 상황에서 우리와 비슷한 상황의 글을 발견했다. https://github.com/nuxt/nuxt/discussions/23087 How to debug a nuxt-related HUGE memory leak? · nuxt nuxt · Discussion #23087 Vue 3.6 / 3.7 production build. Every request with full SSR create a 1.2MB memory leak in ser.. 더보기 [Nuxt3] 서버 cpu 증가 이슈 (& 메모리 누수) 사건의 발단 현재 운영하고 있는 서비스에 라이브 서버에서 평균 8시간~10시간마다 cpu가 30%이상 오르는 현상이 발생하였다. 백엔드에는 cpu가 30%이상 올라가면 서버 재시작하도록 구성이 되어있다 왜 이런 현상이...? cpu가 점차 차오르는 현상을 보고 메모리 누수로 의심을 하였고, 사용하고 있는 패키지부터 메모리 누수가 생길만한 부분들은 다 확인을 하고 하나씩 수정도 해보았다. 결국 원인이 되었던건.. 현재 우리 서비스는 vuetify 3.3.9버전을 사용하고 있었고 해당 버전은 메모리 누수가 있는 버전으로 확인이 되었다. vuetify 버전 리스트중에 메모리 누수 해결된 (3.5.2 버전)최신버전으로 변경하고 해당 이슈는 종결되었다. 더보기 [Vue 시작하기] Nuxt란 무엇일까? 1. Nuxt란 무엇일까? Nuxt.js는 일반적인 Vue.js 어플리케이션을 만드는 프레임워크이다. 주요 범위는 클라이언트/서버 배포를 추상화 하는 동안의 UI rendering 이다. 비동기 데이터, 미들웨어, 레이아웃 등과 같은 클라이언트 측과 서버 측 사이에서 개발하는데 도움되는 기능을 제공한다. 2. 특징 Vue 파일 쓰기 (.vue) 코드 분할 자동화 서버 사이드 렌더링 비동기 데이터 기반의 강력한 라우팅 시스템 정적 파일 전송 ES2015+ 지원 JS & CSS 코드 번들링 및 압축 요소 관리 (, , 기타.) 개발 중 Hot module 대체 전 처리기 지원: SASS, LESS, Stylus 등 HTTP/2 푸시 헤더 준비 모듈식 아키텍처 확장 3. 구조 4. 서버 렌더링 (범용 SSR).. 더보기 [Vue 시작하기] Vue 의 구성 1. Vue의 필수 요소 Vue 인스턴스 생성 Vue 인스턴스의 옵션 data 반응형 모델을 선언할때 사용, 즉 값이 변경될때 뷰에서 보이는 값도 같이 연동되어 변경되는것을 의미한다. 인스턴스가 생선된 후 this.$data로 접근할 수 있다. 또한 Vue인스턴스는 데이터 객체 내부의 값을 프락싱 하므로 this.$data.a와 this.a는 같은 값이다. 자바스크립트의 Object 자료형은 메모리에 저장된 값을 직접 가져오는 호출이 아닌 메모리에 저장된 주소 값을 가져오는 참조에 의한 호출이기 때문에 컴포넌트에서 data 속성을 일반 객체로 선언한다면 같은 주소를 참조하는 데이터들을 컴포넌트들이 공유하게 된다. props 속성은 부모 컴포넌트로부터 데이터를 받아올 수 있게 노출된 속성들이다. HTML .. 더보기 [Vue 시작하기] 개발 환경 세팅 1. IDE 선택하기 vscode 설치하기 Vetur Extension : Vetur 플러그인은 Vue.js를 개발하는데 도움을 주는 플로그인(타입스크립트를 함께 사용) Vue Peek Extension : 코드상에 작성되어 있는 Vue 컴포넌트를 통해 해당 컴포넌트 파일을 바로 열고 그 파일로 이동할 수 있는 기능을 제공하는 플로그인 Vue 2 Snippets Extension : Vue 컴포넌트를 자동완성을 제공한다. 2. Nodejs 환경 구축하기 Vue, Angular, React와 같은 모던 자바스크립트 프레임워크는 대부분 nodejs를 사용하여 코드를 빌드한다. Nodejs의 공식 홈페이지에서 LTS(Long Term Support) 안정성 보장이되어 해당 버전을 다운받는다. 버전 확인하는방법.. 더보기 이전 1 다음
