김평범's OrdinaryCode

Nuxt3 프로젝트 이동 하기 - 1️⃣ Nuxt3란? (Nuxt2와 달라진 점)

진짜 오랜만에 시작하는 블로그 😎확실히 공부를 하려면 블로그에 기록하는 게 가장 동기부여가 잘되어서, 다시 시작해보려고 한다.   개발자 생활이 오래되다보니, 이제 내가 만든 코드로 레거시가 되는 경험도 하게 됨.바쁘다는 핑계로 미뤄뒀던 Nuxt2에서 Nuxt3 이동을 2025년에는 꼭 이루겠다는 다짐과 함께 오늘부터 Nuxt3에 대한 스터디 기록을 하려고 한다.지치지 않게 힘빼고 시작해 볼 예정 😎 Nuxt3란?🔗 Nuxt 3 공식 소개 페이지 Nuxt는 Vue 기반 프레임워크로 서버랜더링(SSR) / 정적 사이트 생성 (SSG)  등 SEO 최적화를 제공한다.Nuxt3는 Vue 3와 Vite를 기본적으로 사용하여 빠른 개발 환경을 제공하고 있다.  🧐Nuxt3로 오면서 Nuxt2와 달라진 점은..

Nuxt 프로그램을 신규로 가져와서 npm install을 하니 갑자기 오류가 발생했다. Nuxt Version이 2.16.0 버전이 설치가 되면서 문제가 난 듯하다. 🔎Nuxt 설치버전 확인하기 pacakge-lock.json 파일을 확인해주자. 만약 pacakage-lock.json파일에 @nuxt/config가 2.16.0이 설치가 되면 해당 이슈가 날 수 있다. 해결방법 npm install nuxt@2.15.8 위 코드를 이용해서 nuxt를 2.15.8 버전으로 재설치를 해주면 된다. 만약 해당 코드로 설치해도 안된다면 node_modules와 package-lock.json파일을 먼저 삭제해 준 뒤 npm install nuxt@2.15.8 npm install 먼저 nuxt를 설치해 준 뒤,..

Nuxt 프로젝트 중에 nuxt-link 등 을 이용해서 페이지가 이동될 때 특정 페이지에서 이벤트를 발생해야되는 경우가 있다. 이런 경우는 watch 속성에서 $route를 바라보게 해서 이벤트를 발생시킬 수 있다. 🤔vue watch란? watch는 특정 데이터의 변화를 감지되면 특정 로직을 실행할 수 있다. $route watch 샘플코드 ... 위 코드를 이용하면, $route 즉 페이지가 이동될 때마다 해당 로직이 실행된다. to의 경우에는 현재 진입한 페이지의 속성이 나오며, from을 찍어보면 과거에 나온 페이지를 확인할 수 있다. 결과화면 콘솔 로그의 결과를 보면 지금 진입한 페이지인 index 페이지의 속성과 과거에 넘어온 페이지인 detail 페이지의 route 속성 값을 확인할 수 있..

현재 상황은 프로젝트 파일에서 frontend 서버는 localhost:3000 이용하며, backend 서버는 localhost:3001 이용 중이다. 이럴 경우 frontend 서버에서 axios에서 호출을 할 경우 CROS error가 발생했다. frontend는 nuxt.js 이용 중인 상황일 때 해결 방법이다. 📌Nuxt Proxy 이용하기 1️⃣설치하기 nuxt에서 간편하게 프록시를 설정을 할 때 이용하는 라이브러리를 먼저 설치해주자 https://www.npmjs.com/package/@nuxtjs/proxy @nuxtjs/proxy proxy support for nuxt server. Latest version: 2.1.0, last published: 2 years ago. Start ..

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

✔️구글 애널리틱스 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..

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

🧛‍♂️ 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 버전 일반..

🐣 들어가기 전 어느 날 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..