NUXT 5

[Vue/nuxt] mounted에서 $ref undefined 해결하기(<client-only> 이슈)

📌최근 발생한 문제점 $ref undefined mounted()에서 $ref에 접근을 해서 무언가를 적용을 하려고 해 봤는데, $ref에 접근이 안되고 undefined가 뜨는 오류가 발생했다. 무엇이 문제인지 찾아본 결과 안에 있는 $ref에 접근을 할 때, 초반에 undefined가 발생할 수 있다는 점을 찾아냈다. 이러한 상황은 왜 발생하는걸까? 먼저 이 문제를 알기 위해서는 를 왜 사용하는지를 알아야 했고, SSR과 CSR의 차이를 먼저 이해해야 되어서 오늘은 이 부분을 정리해보기로 했다! ⚙️SSR이란? Server Side Rendering이라고 해서 Server에서 렌더링이 된 HTML 화면을 만들어서 보내주는 방식을 말한다. SSR로 처리가 된다고 하면 모든 리소스를 서버에서 랜더링 한 ..

FrontEnd/Vue.js 2022.05.02

[Vue.js/Nuxt] 구글애널리틱스4 vue-gtag로 연동하기

✔️구글 애널리틱스 UA 종료 유니버설 애널리틱스(Universal Analytics, UA) 버전이 23년 7월 1일 이후부터 서비스가 종료된다는 안내가 왔다. 유니버설 애널리틱스 서비스 종료시점에서는 더 이상 신규 데이터 수집 및 조회가 안되기 때문에 구글 애널리틱스 4로 이전을 해야 된다. 🙅‍♀️vue-analytics 지원 중단 기존 지원하는 vue-analytics에서도 더 이상 지원이 안된다고 안내 문구가 떴다. 구글 애널리틱스 analytics.js 자체가 중단되고, gtag.js로 수집을 하라 권고가 되면서 vue-analytics 말고 vue-gtag를 이용을 하라고 안내가 되어있다. 📊vue-gtag https://www.npmjs.com/package/vue-gtag vue-gtag..

FrontEnd 2022.04.27

Nuxt.js 리눅스 우분투(Ubuntu) npm run start 시 ERR_CONNECTION_REFUSED 에러 수정방법

Vue.js + Nuxt.js로 만든 프로젝트를 리눅스 Ubuntu(우부투) 서버에 배포를 하려고 FTP로 소스로 모두 옮기고 npm run build를 진행하여 배포를 진행하려 했다. 분명 npm run build도 잘되고, npm run start 시 Server가 완벽히 열리는 것 까지 확인했는데, 실제로 서버 접속을 진행하니 ERR_CONNECTION_REFUSED가 뜬다!! 코드 자체에 문제가 있나 싶어서 로컬에서도 npm run build를 진행한 뒤, 서버를 실행해보면 로컬에서는 또 잘 작동하고, 서버에도 잘 접속이 된다. Ubuntu에서도 npm run dev로 실행하면 서버에도 잘 접속되고 문제가 없는데 유독 npm run start만 하면 ERR_CONNECTION_REFUSED 뜨는 ..

FrontEnd/Vue.js 2021.07.12

[nuxt/vue] Are you interested in participating? 안내문 대응 방법

🧛‍♂️ Are you interested in participating? 문구 발생 nuxt Project를 생성해서 npm run dev 명령어 실행 시 Are you interested in participating?(Y/n)이라는 문구가 계속 뜨는 문제가 발생했다. 처음엔 왜 뜨지? 하고 무시하고 Y, n 여러 개를 선택해서 넘어가 보았지만, 지속적으로 서버가 돌아갈 때마다 물어보는 경험을 하게 된다. 위의 내용에 따라 보면 NuxtJS의 경우 익명의 원격 측정 데이터를 수집하여 지속적으로 개선하는데 노력하니 원격으로 데이터를 수집하길 참여해달라는 내용이다. 들어가 보니 수집되는 항목은 아래와 같다 호출하는 명령어(nuxt dev, nuxt Build 등) Nuxt.js, Node.js 버전 일반..

FrontEnd/Vue.js 2021.03.15

[nuxt/vue] nuxt store Classic mode deprecated 해결 방법

🐣 들어가기 전 어느 날 Nuxt로 만든 프로젝트에서 run server를 돌릴 때마다 이상한 경고문이 발생하기 시작했다. Classic mode for store/ is deprecated and will be removed in Nuxt 3. 무슨 에러이길래 이렇게 무섭게 여러 번 찍히는 것인가 에러가 찍히긴 하지만 프로젝트 상 기능에서는 특별히 큰 문제가 없어서 일단은 무시하고 있었으나, 지속적으로 콘솔 로그에 뜨다 보니 슬슬 신경이 쓰여 이번 기회에 알아보기로 했다. 💡 Store에서의 Classic Mode과 Module Mode Nuxt에서 store 기능을 활용하기 위해서는 /store 디렉터리 아래에 파일을 생성해야 한다. 해당 디렉터리 이름을 절대적이며 변경을 해서는 안되기 때문에 vue..

FrontEnd/Vue.js 2021.02.21