본문 바로가기

JavaScript/Vue.js(프레임워크)

(16)
[Nuxt3] API 오류 시 재호출 해제하기 Nuxt 3에서 useFetch를 사용할 때 기본적으로 retry 옵션이 설정되어 있어 504 에러가 발생하면 요청이 재시도될 수 있습니다. 이를 비활성화하려면 retry 옵션을 0으로 설정하면 됩니다.다음은 useFetch에서 retry를 해제하는 방법입니다:const { data, error } = await useFetch('/api/endpoint', { retry: 0 // 재시도 비활성화})옵션 설명:retry: 요청이 실패했을 때 재시도할 횟수를 설정합니다.기본값은 1이며, 0으로 설정하면 재시도하지 않습니다.이 설정을 통해 504 에러 발생 시 추가 요청을 막을 수 있습니다.추가로, 필요에 따라 타임아웃 시간(timeout)을 늘리거나 오류 처리 로직을 커스터마이징할 수도 있습니다.   ..
[Nuxt3] [Vue warn]: Hydration style mismatch on 에러 해결하기 Vue Hydration 불일치 경고는 서버 사이드 렌더링(SSR)에서 서버에서 생성된 HTML과 클라이언트에서 생성된 HTML이 일치하지 않을 때 발생합니다. 이럴 경우 html 태그에 태그로 감싸주면됩니다.
[Nuxt3] middleware에서 외부 URL로 redirection 하기 export default defineNuxtRouteMiddleware(() => {... if (!authToken.value) { return navigateTo('https://nuxt.com', { external: true, redirectCode: 301 }); }}  Reference  https://nuxt.com/docs/api/utils/navigate-to#external-url
[Vue.js] Nuxt3 Nitro란? Nitro는 Nuxt 3의 핵심 서버 엔진으로, Nuxt 애플리케이션의 서버 측 로직을 더 빠르고 효율적으로 처리하기 위해 설계된 프레임워크입니다. Nuxt 3는 이전 버전보다 훨씬 유연하고, 다양한 환경에서 애플리케이션을 배포할 수 있도록 하기 위해 Nitro를 도입했습니다. Nitro는 Nuxt의 서버 측 기능을 강화하고, 다양한 배포 옵션과 성능 최적화를 제공하는 역할을 합니다.Nitro의 주요 특징서버리스 및 엣지 컴퓨팅 지원Nitro는 서버리스 환경과 엣지 컴퓨팅 플랫폼에서 쉽게 작동하도록 설계되었습니다. Vercel, Netlify, AWS Lambda와 같은 서버리스 플랫폼에서 바로 Nuxt 애플리케이션을 배포할 수 있으며, 엣지 네트워크에서도 실행이 가능합니다.빠른 빌드 및 서버 실행Nit..
[Vue.js] Nuxt3 nuxi prepare 명령어란? nuxi prepare는 Nuxt 3에서 사용되는 CLI 명령어로, Nuxt 프로젝트의 빌드 준비 과정을 수행하는 역할을 합니다. 이 명령어는 Nuxt 프로젝트가 실행되기 전에 필요한 파일을 생성하고, 프로젝트 설정 및 구조를 준비하는 데 사용됩니다.nuxi prepare의 주요 기능프로젝트 설정 준비nuxi prepare는 Nuxt 프로젝트를 실행하기 전에 필요한 설정 파일을 준비하고, Nuxt가 올바르게 동작할 수 있도록 프로젝트 구조를 설정합니다. 이 과정에는 .nuxt 디렉토리 내에 필요한 파일 및 구성을 생성하는 작업이 포함됩니다.TypeScript 지원 준비Nuxt 3는 TypeScript를 기본적으로 지원합니다. nuxi prepare 명령어는 프로젝트의 TypeScript 설정을 검사하고,..
[Vue.js] nuxi란? nuxt dev와 nuxi dev 명령어 차이 nuxi란?nuxi는 Nuxt.js 프레임워크에서 제공하는 CLI(Command Line Interface) 도구로, Nuxt 3 프로젝트를 생성하고 관리하는 데 사용됩니다. Nuxt.js는 Vue.js 기반의 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG)을 지원하는 프레임워크이며, Nuxt 3부터 nuxi라는 CLI 도구가 도입되었습니다.nuxt dev와 nuxi dev 명령어 차이nuxt dev와 nuxi dev는 Nuxt.js 프로젝트에서 개발 서버를 실행하는 명령어들이지만, 두 명령어는 Nuxt 버전에 따라 다르게 사용됩니다.1. nuxt devNuxt 2에서 사용되는 명령어입니다.Nuxt 2.x 버전의 프로젝트에서 개발 서버를 실행하려면 nuxt dev를 사용합니다.nuxt 명령어는..
[Vue.js] npx란? npx란?npx는 Node.js 패키지 관리자(NPM)에서 제공하는 실행 도구입니다. 주로 npm으로 설치된 패키지나 로컬에 설치되지 않은 패키지를 쉽게 실행하기 위해 사용됩니다. 주요 기능과 특징글로벌 설치 없이 패키지 실행로컬에 설치하지 않은 패키지라도 npx를 사용하면 일회성으로 해당 패키지를 실행할 수 있습니다.예를 들어, create-react-app을 설치하지 않고 React 프로젝트를 생성할 때:npx create-react-app my-app  이 명령은 create-react-app을 설치하지 않고도 바로 실행할 수 있습니다.로컬 설치된 명령어 실행프로젝트에 로컬로 설치된 Node.js 패키지를 실행할 수 있습니다. 보통 로컬에 설치된 패키지를 실행하려면 전체 경로를 지정해야 하지만, n..
[Vue.js] Nuxt3 프로젝트에서 Node 또는 PM2로 실행하기 Nuxt 애플리케이션은 Node.js 서버에 배포하거나, 정적 호스팅을 위해 미리 렌더링하거나, 서버리스 또는 엣지(CDN) 환경에 배포할 수 있습니다. Nuxt 빌드nuxt 빌드를 실행했을 때, 생성되는 결과물이 노드 서버를 실행하는 entry point(진입점)가 됩니다.npm run build Node로 실행이렇게 하면 기본적으로 포트 3000에서 listen하는 Nuxt 서버가 실행됩니다.node .output/server/index.mjs  PM2로 실행하기ecosystem.config.cjs 파일 작성하기module.exports = { apps: [ { name: 'NuxtAppName', port: '3000', exec_mode: 'cluster', ..