풀소유

[Nuxt3]RouterView, NextPage의 차이점

정리라우팅 방식명시적 설정 (routes.ts) 필요파일 기반 자동 라우팅중첩 라우트지원 (children 속성 사용)지원 (레이아웃 시스템 활용)기본 렌더링 동작한 번 마운트된 후 유지기본적으로 URL 변경 시 재렌더링SSR/SSG 지원❌ (Nuxt 필요)✅ 기본 지원상태 유지기본적으로 유지됨기본적으로 유지되지 않음 (pageKey 활용 가능)는 Vue Router 기반 프로젝트에서 사용되며, 명시적인 라우트 설정이 필요합니다.는 Nuxt에서 파일 기반 라우팅을 활용하여 자동으로 라우팅을 관리합니다.는 기본적으로 URL 변경 시 다시 렌더링되지만, pageKey 속성 및 definePageMeta를 활용하여 이를 조정할 수 있습니다.란?는 Vue Router에서 제공하는 컴포넌트로, 현재 활성화된 라우..

[TS] Omit

Omit 타입은 주어진 타입 T에서 특정 속성 K를 제거한 새로운 타입을 생성합니다.즉, 기존 타입의 일부 속성을 제외한 타입이 필요할 때 Omit을 사용하면 매우 간결하게 원하는 타입을 만들 수 있습니다. 사용법예를 들어, 다음과 같이 Course 인터페이스가 있다고 가정해 봅니다.export interface Course { title: string; subtitle: string; courseSlug: string; content: string; thumbnail: string; video: string; rating: number; reviewsCount: number; studentCount: number; reviewsUrl: string; inflearnUrl: strin..

[Nuxt3] 컨테이너 배포 환경에서 메뉴 동적으로 관리하기

SI 솔루션의 특성상 잦은 변경이 발생하기 때문에, 코드 수정 없이 외부 설정을 주입해 동적으로 구성을 변경할 수 있는 방법이 필요합니다. Kubernetes 환경에서는 ConfigMap을, 도커 환경에서는 JSON 파일을 활용해 요구사항에 맞게 메뉴를 변경하도록 설정할 수 있습니다. 다만, 사용자가 URL을 통해 해당 설정 파일에 접근할 수 있다는 단점이 있습니다. 1. ConfigMap으로 메뉴 데이터 관리먼저, 메뉴 구성 정보를 JSON 파일로 작성합니다. 예를 들어, 아래와 같이 menu.json 파일을 생성합니다:[ { "label": "Home", "icon": "home", "to": "/home", "use": true }, { "label": "Inbox", "icon": "inbox..

[Nuxt3] TypeScript 설정

Nuxt 3를 사용하면서 TypeScript 환경을 보다 엄격하게 관리하고 싶다면, nuxt.config.ts 파일에서 아래와 같이 여러 옵션을 설정할 수 있습니다.pnpm install -D vue-tsc typescript// nuxt.config.tstypescript: { shim: false, // Nuxt가 자동으로 생성하는 Vue 파일의 타입 선언(shim)을 사용하지 않음 typeCheck: { // 빌드 시 타입 검사를 활성화하여 오류를 사전에 발견합니다. eslint: true, // 타입 검사와 함께 ESLint 검사도 실행 (true 또는 상세 옵션 객체 사용 가능) tsconfigPath: './tsconfig.json', // 사용할 tsconfig 파일의 경..

[Nuxt 3] Vuetify 3 SSR 오류 해결하기

“[Vuetify] Could not find defaults instance”오류 원인: SSR 환경에서 Vuetify 기본 설정이 초기화되지 않음해결책: 별도의 Vuetify 플러그인을 만들어 Nuxt 애플리케이션에 등록등록 방법: plugins/vuetify.ts 파일을 만들고, nuxt.config.ts에 플러그인을 추가 해결 방법1. Vuetify 플러그인 파일 만들기먼저, Nuxt 3에서 Vuetify를 서버와 클라이언트 모두에서 사용할 수 있도록 플러그인을 만듭니다.// plugins/vuetify.tsimport { createVuetify } from 'vuetify'import * as components from 'vuetify/components'import * as directiv..

[K8S] Traefik을 이용한 경로 기반 라우팅 (Path-Based Routing)

개요Traefik은 Kubernetes에서 동적인 경로 기반 라우팅을 수행하는 경량의 Ingress Controller 및 Reverse Proxy입니다.Ingress Controller 없이도 IngressRoute와 Middleware를 조합하여 강력한 트래픽 관리가 가능합니다.Kubernetes에서 API Gateway 없이도 서비스별 라우팅을 간단하게 설정할 수 있는 점이 큰 장점입니다.1. Traefik 설치Traefik을 Kubernetes 클러스터에 설치하려면 Helm을 사용하는 것이 가장 간편합니다.Helm을 이용한 Traefik 설치helm repo add traefik https://traefik.github.io/chartshelm repo updatehelm install traef..

일반적으로 인터넷에서 웹사이트를 방문하면 브라우저는 해당 사이트의 SSL 인증서를 확인하고 신뢰할 수 있는지 판단합니다. 하지만 폐쇄망(Closed Network) 환경에서는 글로벌 인증 기관이 아닌 내부 인증 기관(Private CA)에서 발급한 인증서를 사용해야 합니다. 이때 브라우저가 내부 인증서를 신뢰하도록 설정하는 방법을 알아보겠습니다.1. 브라우저가 SSL 인증서를 신뢰하는 방식브라우저가 SSL 인증서를 신뢰하는 과정은 다음과 같습니다.인증서 체인 검증 (Certificate Chain Validation)SSL 인증서는 다음과 같은 체인 구조를 가집니다.루트 인증서 (Root CA) └── 중간 인증서 (Intermediate CA) └── 서버 인증서 (Server Certi..

컨테이너 기술의 발전으로 인해, 많은 기업과 개발자들이 Podman과 CRI-O를 사용하여 컨테이너를 관리하고 있습니다. 이 두 도구는 Docker와 유사한 기능을 제공하지만, 각기 다른 방식으로 컨테이너를 처리하고 관리합니다. 하지만 장기간 운영하면서 오래된 컨테이너들이 쌓이면 시스템 리소스가 낭비될 수 있습니다. 이를 방지하기 위해 오래된 컨테이너를 자동으로 삭제하는 정책을 설정하는 것이 중요합니다.1. Podman의 오래된 컨테이너 자동 삭제Podman은 Docker와 유사한 CLI(Command Line Interface)를 제공하며, rootless 방식으로 컨테이너를 실행할 수 있다는 장점이 있습니다. Podman은 컨테이너를 관리하는 데 있어 다양한 방법을 제공하며, 오래된 컨테이너를 자동으..