풀소유

Node.js 서버가 자체 서명 SSL 서버와 통신할 때 생기는 문제와 해결 방법

✅ 문제 배경회사 내부 시스템이나 개발 환경에서는 종종 Let's Encrypt 같은 인증기관(CA)을 거치지 않고, OpenSSL 등으로 만든 자체 서명된 인증서(Self-signed certificate) 를 사용하는 경우가 많습니다. 예를 들면, 다음과 같은 시스템에 자체 인증서가 사용될 수 있습니다:내부 로그인 서버 (예: Keycloak)내부 파일 저장 서버 (예: MinIO)API 서버 (직접 만든 HTTPS 서버)이때 이들 서버와 Node.js 기반 서버(Next.js, NestJS 등) 가 통신하려고 하면, 아래와 같은 에러가 발생할 수 있습니다:Error: self signed certificateUNABLE_TO_VERIFY_LEAF_SIGNATURE🧨 왜 이런 문제가 생기나요?📌 ..

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

특징 일반 함수 화살표 함수this호출된 객체에 따라 변경정의될 때 환경에서 고정arguments 객체사용 가능사용 불가 (Rest 파라미터로 대체)생성자 함수 사용가능불가능일반 함수의 특징this의 동작 방식: 일반 함수의 this는 함수를 호출한 객체에 따라 달라집니다.arguments 객체: 일반 함수는 함수 호출 시 전달된 모든 인자(파라미터)에 접근할 수 있는 내장 객체 arguments를 제공합니다. 즉, 함수를 정의할 때 정한 파라미터 개수와 무관하게 전달된 모든 인수를 활용할 수 있습니다.생성자 함수로 사용 가능: 객체 생성을 위해 new 키워드를 사용할 수 있습니다.function greet(name) { return "Hello, " + name;}console.log(greet("철..

이 글에서는 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 랜딩 화면 ..

1. 선언 합침 (Declaration Merging)선언 합침이란, 동일한 이름을 가진 인터페이스, 클래스, enum 등이 여러 번 선언되었을 때 TypeScript 컴파일러가 이 선언들을 하나로 병합하는 기능입니다.// 첫 번째 선언interface User { name: string;}// 두 번째 선언interface User { age: number;}// 최종적으로 병합된 User는 { name: string, age: number } 입니다.const user: User = { name: 'Alice', age: 30 };왜 사용할까?기존 인터페이스에 새 속성을 추가하여 확장할 수 있습니다.외부 라이브러리를 직접 수정하지 않고 원하는 기능이나 타입을 추가할 수 있습니다.2. 외부 선언 (..

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