풀소유

Nuxt 3 플러그인은 애플리케이션 전역에서 재사용할 수 있는 기능을 제공하는 모듈입니다. 주요 용도는 다음과 같습니다:API 클라이언트와 같은 전역 유틸리티 제공전역 상태 관리 (Pinia)인증 및 권한 관리글로벌 컴포넌트 및 디렉티브 등록Vue 및 서드파티 라이브러리(i18n, axios 등) 초기화서버 사이드 렌더링(SSR)과 클라이언트 환경에서 코드 분기 플러그인 사용 시 주의사항플러그인을 로드한다는 것은 defineNuxtPlugin() 함수의 매개변수(함수)를 실행한다는 것입니다.전역으로 제공하는 Helper는 신중히 선택하고, composables로 기능을 분리하는 것을 우선적으로 고려하세요.SSR 환경에서는 브라우저 전용 객체(window, document) 사용 시 반드시 클라이언트 모드..

Nuxt3에서는 클라이언트 사이드 라우팅을 쉽게 처리할 수 있도록 navigateTo 함수를 제공합니다. 이는 useRouter().push()와 유사하지만, Nuxt 3에서 제공하는 최적화된 방식으로 동작합니다.navigateTo의 주요 특징클라이언트 사이드 네비게이션: 페이지가 완전히 새로고침되지 않고 Vue Router를 통해 전환됩니다.Promise 반환: 비동기적으로 동작하며, 네비게이션 완료 후 후속 작업을 수행할 수 있습니다.외부 링크 지원: absolute: true 옵션을 사용하면 외부 URL로 리디렉트할 수 있습니다. navigateTo의 기본 사용법 홈으로 이동위 코드에서 navigateTo("/")를 호출하면 사용자를 루트 페이지로 이동시킵니다. 옵션 활용type NavigateT..

정리레이아웃유형사용 방법 예제기본 레이아웃모든 페이지에 자동 적용layouts/default.vue네임드 레이아웃특정 페이지에 적용definePageMeta({ layout: "custom" })동적 레이아웃 변경런타임에 따라 변경setPageLayout 활용프로그래밍 방식으로 변경setPageLayout('custom')레이아웃 사용 시 주의할 점레이아웃은 반드시 layouts/ 폴더에 위치해야 합니다.레이아웃 파일명은 .vue 확장자를 사용해야 하며, Nuxt에서 자동으로 인식합니다.동적 레이아웃 변경 시 definePageMeta()보다 :layout 바인딩을 활용하면 더 유연한 설정이 가능합니다.레이아웃 내에서 NuxtPage를 직접 사용하면 무한 루프가 발생할 수 있으므로, 레이아웃에는 을 사용..

NuxtLink는 Nuxt 3에서 내부 페이지 간 네비게이션을 처리하는 컴포넌트로, 클라이언트 사이드 라우팅을 최적화하여 빠른 페이지 전환을 제공합니다. 기본적으로 Vue Router를 기반으로 동작하며, 브라우저의 전체 페이지 리로드 없이 화면을 부드럽게 전환할 수 있도록 도와줍니다.내부 링크(Internal Link)Nuxt 프로젝트 내에서 정의된 페이지로 이동할 때 사용됩니다.대시보드 이동to 속성에는 절대 경로 또는 상대 경로를 사용할 수 있습니다.상대 경로설정 페이지위 코드는 현재 페이지가 /dashboard라면 /dashboard/settings로 이동합니다.활성화된 링크 스타일 적용NuxtLink는 현재 활성화된 링크에 자동으로 router-link-active 클래스를 추가합니다. 이를 활..

정리definePageMeta()는 pages/ 디렉토리에 있는 페이지 컴포넌트에 대한 메타데이터를 설정하는 데 사용할 수 있는 컴파일러 매크로 함수입니다. 이것은 컴포넌트 내에서 참조할 수 없도록 컴파일됩니다. 대신 전달된 메타데이터가 컴포넌트 밖으로 끌어올려집니다. 따라서 페이지 메타 객체는 컴포넌트(또는 컴포넌트에 정의된 값)를 참조할 수 없습니다. 그러나 가져온 바인딩을 참조할 수 있습니다.속성설명사용 예제alias하나의 페이지를 여러 개의 URL로 접근 가능하게 함alias: ["/home", "/start"]keepalive페이지 상태를 캐싱하여 다시 방문했을 때 유지keepalive: truekeepalive.max캐싱할 페이지 개수를 제한keepalive: { max: 5 }key특정 페이..

중첩 라우팅이란 상위 페이지 내에서 하위 페이지가 렌더링되는 구조를 의미합니다. 일반적으로 대시보드, 관리자 페이지, 사용자 프로필과 같은 일관된 레이아웃을 유지하면서 다른 콘텐츠를 표시할 때 유용하게 사용됩니다. 예를 들어 /dashboard 안에 /dashboard/settings, /dashboard/users 같은 하위 경로가 있을 때, 이들을 부모 컴포넌트 내부에서 관리하는 방식이 중첩 라우팅입니다. Nuxt 3 중첩 라우팅 구조 예제/pages ├── index.vue → `/` ├── about.vue → `/about` ├── dashboard/ │ ├── index.vue → `/dashboard` │ ├── settings..

1. 기본적인 차이점  Count: {{ count }} Double Count: {{ doubleCount }} 증가 setup() 내부에서 변수를 선언하고 return을 사용해야 템플릿에서 사용할 수 있음.코드가 다소 길어지고 boilerplate가 많음. Count: {{ count }} Double Count: {{ doubleCount }} 증가 setup() 함수 없이 바로 변수 선언이 가능함.return이 필요 없으며 선언된 변수들이 자동으로 템플릿에서 접근 가능.코드가 짧아지고 가독성이 증가함.3. 추가적인 차이점(1) Props 사용기존 {{ title }} {{ title }} 이벤트 발생 이벤트 발생 에서는 components ..

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

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

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 파일의 경..