풀소유

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

이 글에서는 Keycloak 26과 Spring Boot 기반의 리소스 서버 간의 JWT 연동 방법을 설명합니다. 특히, 리소스 서버가 Keycloak에 클라이언트로 별도 등록되지 않고도 JWT를 검증하는 방법, JWT 파싱 컨버터 설정 및 기본 보안 설정을 다룹니다.리소스 서버는 Keycloak에 클라이언트로 등록될 필요가 없습니다.JWT의 iss 클레임과 리소스 서버의 issuer-uri 설정이 정확히 일치해야 합니다.리소스 서버는 {issuer-uri}/protocol/openid-connect/certs를 통해 JWT 파싱을 위한 컨버터 설정이 필요합니다.간단한 Security 설정을 진행합니다.Spring Boot 프로젝트 의존성 설정Gradle 설정 예시 (build.gradle.kts)dep..

이 글에서는 최신 버전인 Keycloak 26을 기준으로 JWT에 사용자가 소속된 그룹 정보를 {id, name} 형태로 추가하기 위한 Client Scope 설정 및 Custom Mapper를 구현하는 방법을 자세히 다룹니다.1. 요구사항 정의Keycloak에서 발급한 JWT의 Payload에 사용자가 속한 그룹의 id와 name 정보를 배열 형태로 추가합니다.예상되는 Payload 구조:{ "sub": "12345678-1234-1234-1234-123456789abc", "preferred_username": "johndoe", "group_info": [ {"id": "group-1-id", "name": "Admins"}, {"id": "group-2-id", "name": "U..

서버 관리 시 중요한 지표 중 하나가 디스크 사용량입니다. 이번 글에서는 간단한 Bash 스크립트를 이용해 디스크 사용량을 체크하고, Slack을 통해 실시간으로 알림을 받는 방법을 소개합니다.1. Slack에서 Incoming Webhook 설정Slack 워크스페이스에서 Slack API에 접속해 새로운 앱을 생성하거나 기존 앱을 선택합니다.'Incoming Webhooks' 기능을 활성화하고 새로운 Webhook URL을 생성합니다.생성된 Webhook URL은 다음과 같은 형태입니다.https://hooks.slack.com/services/TXXXXX/BXXXXX/XXXXXXXX이 URL은 추후 스크립트 작성 시 사용할 예정입니다.2. 디스크 사용량 체크 스크립트 작성스크립트를 /usr/local..

팀 단위로 개발하거나 여러 환경에서 개발할 때 코드 스타일이 제각각이라면 매우 번거로울 수 있습니다. 이런 문제를 해결하기 위한 간단하면서도 강력한 도구가 바로 EditorConfig입니다.EditorConfig는 IDE와 에디터가 일관된 코딩 스타일을 유지할 수 있도록 지원하는 설정 파일입니다. 이를 통해 개발자 간 코드 스타일을 통일하고 불필요한 코드 리뷰나 스타일 수정 시간을 크게 줄일 수 있습니다.EditorConfig 파일 작성하기프로젝트 루트 디렉터리에 .editorconfig라는 파일을 생성합니다.아래는 JavaScript, TypeScript, Vue 파일에 대한 기본 설정 예시입니다.[*.{js,jsx,ts,tsx,vue}]indent_style = spaceindent_size = 1t..

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