풀소유

runtimeConfig Nuxt 3는 runtimeConfig API를 통해 서버 전용과 클라이언트 공개용 환경 변수를 분리해서 관리할 수 있습니다.// nuxt.config.tsexport default defineNuxtConfig({ runtimeConfig: { // (1) 서버에서만 사용되는 키 (민감 정보) authCookieName: '__user', jwtSecretKey: 'supersecretkey', // (2) public 하위에 정의된 키는 클라이언트에도 노출됨 public: { clientConfigValue: 'test', }, },}) .env 파일을 통한 값 오버라이드Nuxt 3는 프로젝트 루트(최상단 경로)에 .env 파일이 ..

정리오래 보관해야 하고, 도메인 전체에서 유지할 데이터라면 localStorage.탭을 닫으면 사라져야 하는, 세션 한정 데이터라면 sessionStorage.VueUse는 단순 훅으로, 컴포넌트 단위에서 직관적으로 스토리지에 접근하기 좋음.Pinia Persist는 전역 상태 관리와 자동 저장에 특화되어 있어, 상황에 따라 적절한 솔루션을 골라 사용  1. VueUse란?VueUse는 Vue 3의 Composition API와 반응성(Reactivity)의 장점을 극대화할 수 있도록 고안된 유틸리티 라이브러리입니다. Vue 3로 개발할 때 자주 필요한 훅(Hooks), 함수, 도구를 모아놓은 저장소라고 볼 수 있습니다.useLocalStorage, useSessionStorage, useStorage ..

@artmizu/nuxt-prometheus 설치pnpm add @artmizu/nuxt-prometheusnuxt.config.tsexport default defineNuxtConfig({ modules: ["@artmizu/nuxt-prometheus"], prometheus: { verbose: true, // ✅ 외부 요청 및 페이지 렌더링 시간 로깅 healthCheck: true, // ✅ 헬스 체크 활성화 healthCheckPath: "/health", // ✅ 헬스 체크 경로 설정 prometheusPath: "/metrics", // ✅ Prometheus 메트릭 경로 설정 prefix: "nuxt_app_"..

useFetch(), $fetch(), useAsyncData() 비교 요약$fetch는 사용자의 상호작용(POST, PUT, DELETE 등)에 따른 요청 시 사용합니다.페이지 초기 렌더링에 필요한 데이터 요청 시에는 useAsyncData 또는 useFetch를 사용합니다.동적 파라미터가 필요한 복잡한 로직에서는 useAsyncData 사용을 권장합니다.서버에서 호출 시 쿠키나 로컬스토리지 사용이 제한되므로, Nuxt의 useState나 Pinia를 활용합니다.전역적으로 요청 헤더 등을 커스터마이징하려면 $fetch를 확장하여 사용할 수 있습니다.기능useFetch() $fetch useAsyncData()서버 사이드 렌더링(SSR)✔️✔️✔️자동 상태 관리✔️❌✔️캐싱 및 중복 호출 방지✔️❌✔️S..

Nitro란?Nitro는 Nuxt 3의 서버 엔진으로, 서버 측 로직(API 엔드포인트, 미들웨어, SSR 등)을 효율적으로 관리할 수 있도록 설계되었습니다. 본래 Nuxt를 위해 만들어졌지만, 현재는 UnJS 생태계로 분리되어 다른 프레임워크에서도 독립적으로 사용 가능합니다. h3 HTTP 프레임워크를 기반으로 동작하며, 고성능 및 범용 배포를 염두에 두고 개발되었습니다.Nitro의 주요 특징API, 미들웨어, SSR 등 서버 영역을 Nuxt 내부에서 간단히 작성·확장할 수 있습니다.별도 설정 없이도 다양한 클라우드 및 엣지 플랫폼(Vercel, Netlify, Cloudflare Workers, Deno, Bun 등)에 손쉽게 배포 가능합니다.SSR, SSG, ISR 등 여러 렌더링 방식을 혼합해 사..

server 디렉토리 구조server 디렉토리는 다음과 같은 하위 디렉토리로 구성됩니다:server/api: API 라우트를 정의하는 디렉토리 (/api 접두사 자동 추가)server/routes: 사용자 정의 라우트를 정의하는 디렉토리 (/api 접두사 없음)server/middleware: 요청 처리 전에 실행되는 미들웨어를 정의하는 디렉토리server/plugins: Nitro 플러그인을 정의하여 서버 기능을 확장하는 디렉토리server/utils: 커스텀 헬퍼 함수를 정의하는 디렉토리API 라우트 (server/api)자동으로 /api 접두사가 붙어 경로가 생성됩니다:// server/api/hello.tsexport default defineEventHandler(() => ({ message:..

storeToRefs()는 Pinia에서 ref()로 변환된 반응형 상태를 개별적으로 추출하는 함수입니다.Pinia 스토어의 state 속성들을 ref()로 변환하여 개별적으로 추출반응형 유지 – storeToRefs()를 사용하면 ref()가 유지되므로 값이 변경될 때 UI가 자동으로 업데이트됨객체 분해(구조 분해 할당) 시 반응성 유지 언제 storeToRefs()를 사용해야 할까?상황storeToRefs() 필요 여부state를 구조 분해 할 때✅ 필요state를 그대로 사용할 때❌ 필요 없음actions와 getters를 구조 분해 할 때❌ 필요 없음 storeToRefs() 없이 사용하는 경우Pinia 스토어에서 상태를 가져올 때, 구조 분해 할당을 직접 하면 반응성을 잃어버릴 수 있음.impo..

요약사용 상황 ref()computed()기본적인 반응형 상태 관리✔️❌상태를 기반으로 새 값 계산❌✔️값이 변경될 때만 재계산 필요❌✔️상태 변경 가능해야 함✔️❌ (기본 읽기 전용) 1. ref() – 반응형 데이터 만들기ref()는 간단한 값(숫자, 문자열, 객체 등)을 반응형으로 관리할 때 사용합니다.import { ref } from "vue";const count = ref(5);console.log(count.value); // 5count.value++; // 값 변경console.log(count.value); // 6ref()의 특징.value를 통해서만 값을 읽거나 쓸 수 있습니다.Vue가 값 변경을 자동으로 추적하여 UI를 업데이트합니다.객체를 ref()로 사용할 경우const us..

정리useState()는 간단한 상태 공유에는 적합하지만, 전역 상태 관리에는 한계가 있음useRequestHeaders()는 서버에서 요청 헤더를 가져오지만, 클라이언트에서는 사용할 수 없음clearNuxtState()는 useState() 상태를 초기화하지만, 모든 상태를 지우면 성능 저하 가능대규모 애플리케이션에서는 Pinia를 사용하여 더 체계적으로 상태를 관리하는 것이 적절함 useState() - 상태 공유useState()는 Nuxt에서 상태를 저장하고 공유하는 함수입니다. Vue의 ref()와 비슷하지만, Nuxt의 전체 애플리케이션에서 SSR(서버 사이드 렌더링) 친화적으로 작동합니다.SSR 친화적인 상태 관리Nuxt에서 useState()는 SSR 시점에서 상태를 생성하고, 클라이언트로..

미들웨어는 Nuxt에서 특정 페이지를 렌더링하기 전에 실행되는 함수로, 주로 사용자 인증, 접근 제한, 데이터 로딩, 리디렉션 처리 등의 작업을 수행하는 데 사용된다. Nuxt 미들웨어의 종류 및 실행 시점Nuxt에서는 미들웨어를 적용하는 방식에 따라 크게 세 가지 종류로 나눌 수 있다.미들웨어 종류적용 방법 실행 시점글로벌 미들웨어 (Global Middleware)nuxt.config.ts에서 설정모든 페이지 접근 시 실행라우트 미들웨어 (Route Middleware)definePageMeta({ middleware })를 사용하여 페이지에 지정특정 페이지 접근 시 실행컴포넌트 단위 미들웨어 (Component Middleware)onBeforeMount 또는 useAsyncData 활용특정 컴포넌..