728x90

nuxt.js 2

[Nuxt.js] Nuxt 3에서 nitro.devProxy와 운영 환경 API 연동

개발 중프론트는(nuxt3) localhost:3000, 백엔드는 (node.js) localhost:5000에 띄워져 있는 상황. 위처럼 작성 시 post 방식의 api는 잘만 호출이 되는데.get 방식은 상대경로를 써주니 405 Method Not Allowed 에러가 자꾸 떠버린다. 이제야 알게 된 nitro.devProxy.... ✅ nitro.devProxy란?nitro.devProxy는 Nuxt 3에서 제공하는 개발 모드 전용 프록시 기능입니다.개발 중 클라이언트가 Nuxt 서버(localhost:3000)로 API 요청을 보내면, 해당 요청을 백엔드 서버(localhost:5000 등)로 자동으로 중계(proxy) 해주는 역할을 합니다.⚙️ 사용 예시nuxt.config.ts에 다음..

삼분공부/Vue 2025.04.14

[Nuxt.js] <NuxtLink> 사용하는 이유 !

🚀 NuxtLink를 써야 하는 이유1️⃣ 클라이언트 사이드 네비게이션 (CSR) 적용 태그는 기본적으로 서버에 요청을 보내고 새로고침(F5)하면서 페이지를 이동함.반면 는 페이지를 새로고침 없이 Vue Router를 이용하여 이동하기 때문에, 앱처럼 부드럽게 작동함.NuxtLink를 쓰면 라우트가 변경될 때 Vue의 가상 DOM을 활용하여 필요한 데이터만 업데이트함.✅ 결과적으로 속도가 빠르고 UX가 좋아짐.📌 비교 예시 About 페이지로 이동 About 페이지로 이동2️⃣ 자동 프리페치(Pre-fetch) 기능 지원를 사용하면, 브라우저가 화면에 보이는 링크를 미리 로드할 수 있음.Nuxt 3에서는 기본적으로 prefetch 기능이 활성화되어 있어, 사용자가 클릭하기 전에 이미 데이터를 로드함..

삼분공부/Vue 2025.02.06