풀소유

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 활용특정 컴포넌..

Nuxt에서 제공하는 주요 에러 처리 방법Nuxt에서는 다음과 같은 함수를 통해 에러 처리를 지원합니다:createError: 사용자 정의 에러 객체 생성showError: 사용자에게 에러를 표시하고 오류 페이지로 리다이렉트useError: 현재 발생한 에러 정보 접근clearError: 발생한 에러 상태 초기화 및 페이지 이동 처리Lifecycle Hooks: Vue 생명 주기에서 발생하는 에러를 커스텀 처리NuxtErrorBoundary: 컴포넌트 레벨의 에러 경계 설정 createError로 사용자 정의 에러 생성하기createError는 서버와 클라이언트 양쪽 환경에서 사용자 정의 에러 객체를 생성할 때 사용합니다. HTTP 상태 코드 및 메시지 등 상세 정보를 포함할 수 있습니다. 주로 서버 측..

Nuxt 3 플러그인은 애플리케이션 전역에서 재사용할 수 있는 기능을 제공하는 모듈입니다. 주요 용도는 다음과 같습니다:API 클라이언트와 같은 전역 유틸리티 제공전역 상태 관리 (Pinia)인증 및 권한 관리글로벌 컴포넌트 및 디렉티브 등록Vue 및 서드파티 라이브러리(i18n, axios 등) 초기화서버 사이드 렌더링(SSR)과 클라이언트 환경에서 코드 분기 플러그인 사용 시 주의사항플러그인을 로드한다는 것은 defineNuxtPlugin() 함수의 매개변수(함수)를 실행한다는 것입니다.전역으로 제공하는 Helper는 신중히 선택하고, composables로 기능을 분리하는 것을 우선적으로 고려하세요.SSR 환경에서는 브라우저 전용 객체(window, document) 사용 시 반드시 클라이언트 모드..