풀소유

[Nuxt3] Next-Auth 사용 시 쿠키 중복 및 SSR 처리 주의사항

문제 상황Nuxt3와 Next-Auth를 함께 사용할 때, 서버 사이드 렌더링(SSR) 과정에서 useAuth().getSession()을 호출하면 매번 새로운 set-cookie 헤더가 응답에 추가됩니다. 특히 아래와 같은 상황에서 문제가 심각해집니다:다수의 API 호출: SSR 중 여러 컴포넌트가 각각 getSession()을 호출하는 경우헤더 크기 제한 초과: HTTP 쿠키 헤더 전체 크기가 일반적으로 4KB를 넘으면 브라우저가 쿠키를 거부하거나 잘라냅니다.중복 세션 쿠키: 동일한 세션 쿠키가 반복 삽입되어, 실제 필요한 쿠키 외에 불필요한 메타 정보가 헤더에 포함됩니다.결과적으로 SSR 중 렌더링이 실패하거나, 클라이언트에 쿠키가 제대로 전달되지 않는 현상이 발생할 수 있습니다.원인 분석클라이언트..

이 글에서는 Nuxt 애플리케이션에서 빌드 후 런타임 환경 설정을 통해 외부 API로의 프록시를 구현하는 방법을 설명합니다.📌 왜 빌드 후 동적 프록시인가?Nuxt 프로젝트는 종종 빌드 환경과 운영 환경의 API 주소가 달라질 수 있습니다. 이때 빌드 후에도 쉽게 API의 엔드포인트를 변경하기 위해 런타임 시 프록시 설정을 활용할 수 있습니다.Nuxt 서버 라우트 설정하기아래와 같이 서버 라우트를 설정하여, 모든 /spring 경로의 요청을 동적으로 지정된 API로 프록시할 수 있습니다.예시 코드 (server/routes/spring/[...].ts)export default defineEventHandler(async (event) => { const config = useRuntimeConfig..

NextAuth.js는 OAuth 2.0 및 OpenID Connect(OIDC) 제공자와의 복잡한 인증 과정을 추상화하여 간편하게 설정할 수 있도록 지원하는 라이브러리입니다. 이 글에서는 Nuxt 3 환경에서 Keycloak과 NextAuth.js를 연동하면서, 실제로 구현한 내용을 바탕으로 세부 동작을 설명합니다.https://auth.sidebase.io/ NuxtAuth | Authentication for Nuxt 3User authentication and sessions via authjsauth.sidebase.ioNextAuth.js 인증 단계NextAuth의 역할자동 여부로그인 버튼 클릭 (클라이언트에서 signIn() 호출)🔹커스텀 화면 사용시 개발자 구현NextAuth 랜딩 화면 ..

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