풀소유

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

ssr (Server-Side Rendering)Nuxt.js 애플리케이션이 페이지를 렌더링 하는 방식을 제어한다. 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR) 중에서 선택할 수 있다. ssr: true: 서버 사이드 렌더링을 활성화하여 페이지를 서버에서 렌더링 한다. 이 경우, 사용자가 페이지를 요청할 때 서버가 HTML을 생성하여 클라이언트에 전송한다. 이 방식은 초기 로딩 속도가 빠르고 SEO(검색 엔진 최적화)와 페이지 로딩 성능이 향상될 수 있다. Nuxt.js의 기본값이다. ssr: false: 클라이언트 사이드 렌더링만 수행하여 서버에서 렌더링하지 않는다. 이 경우, 페이지는 클라이언트 브라우저에서 JavaScript를 통해 렌더링 된다. 초기 페이지 로딩 시 HTML이 ..

플러그인은 Nuxt.js 애플리케이션의 전역적으로 사용할 수 있는 기능을 확장하는 JavaScript 파일이다. 플러그인은 애플리케이션 초기화 시 실행되며, Vue 컴포넌트, Vue 인스턴스, Vuex 스토어 등에서 공통적으로 사용할 수 있는 메서드나 서비스를 정의한다. 플러그인 정의플러그인은 plugins 디렉토리 또는 nuxt.config.js에서 설정된 다른 경로에 저장된다. 플러그인의 정의는 기본적으로 다음과 같은 형식으로 이루어진다:// plugins/my-plugin.jsexport default (context, inject) => { // context는 Nuxt.js의 컨텍스트 객체이다. // inject 함수는 전역으로 사용할 수 있는 메서드를 등록한다. inject('myMeth..

$nuxtNuxt 애플리케이션의 루트 인스턴스에 대한 참조로, 애플리케이션의 전역 상태나 기능에 접근할 때 사용된다. Vue 컴포넌트 내에서 this.$nuxt를 통해 접근할 수 있다.refresh(): 현재 페이지를 강제로 리프레시하고 데이터를 다시 가져온다.navigateTo(path): 특정 경로로 프로그래밍적으로 이동한다. (Nuxt 3에서 도입된 기능)isOffline: 애플리케이션의 네트워크 연결 여부를 확인할 수 있다. $routerthis.$router는 Vue Router 인스턴스를 나타낸다. Vue 애플리케이션 내에서 라우팅 관련 작업을 관리하는 객체로, 라우트를 변경하거나 라우트 관련 정보를 처리할 때 사용된다. 이 객체를 통해 애플리케이션의 내비게이션을 조작할 수 있다.push(pa..