Nuxt 기초

Nuxt - Utils는 반응형이나 상태와 무관하게 사용하는 함수들의 모음집입니다.

Nuxt Module을 추가하여 라이브러리화된 기능을 추가하기

넉스트에서 검색 엔진 최적화를 위해 어떤 작업을 해주어야 할까

App Configuration과 Nuxt Configuration

Nuxt Hydraion. 정적 HTML을 받아 동적으로 화면 그리기

Nuxt 3에서 사용할 수 있는 렌더링 모드에는 서버 사이드 렌더링(SSR), 클라이언트 사이드 렌더링(CSR), 정적 사이트 생성(SSG) 등의 방식이 있습니다. 렌더링 방식의 선택은 상황에 맞게 결정하면 되므로, 각 방식을 어떻게 사용하는지 알아보도록 하겠습니다.서

Nuxt에는 composable, plugin, util 등 다양한 개념들이 많습니다. 이들을 각각의 용도에 맞게 사용하는 것이 중요하기 때문에 복습 차원에서 정리하고 플러그인에 대해 알아보겠습니다.ComposableComposition API를 활용한 재사용 가능한

client:only 속성을 부여하여 island component 기능 적용. Partial Hydration 이용하기.

런타임 앱 컨텍스트는 넉스트 앱의 전체적인 동작원리에 대한 이해가 수반될수록 깊게 이해하게 되는 주제입니다. 전체적인 내용을 모두 다루기는 어려우니, 대표적인 내용을 정리하도록 하겠습니다.NuxtApp은 Nuxt 3에서 제공하는 런타임 애플리케이션 컨텍스트입니다. Nu

navigateTo 함수는 프로그래밍 방식으로 페이지를 탐색하는 헬퍼 함수입니다.

NuxtLayout 정리

NuxtLink 컴포넌트는 Vue Router의 RouterLink 컴포넌트와 HTML의 a 태그를 대체합니다. 링크가 내부 링크인지 외부 링크인지 지능적으로 결정하고 그에 따라 사용 가능한 최적화(프리페칭, 기본 속성 등)를 사용하여 링크를 렌더링합니다. Route

pages 디렉토리 내에 중첩된 폴더 구조를 만들 때

definePageMeta는 pages/ 디렉토리에 있는 페이지 컴포넌트에 대한 메타데이터를 설정하는 컴파일러 매크로 함수입니다.위와 같이 메타 데이터를 설정할 수 있는데, 어떤 설정들이 가능한지 더 알아보겠습니다.페이지의 title 태그를 설정합니다. 브라우저 탭에

NuxtPage 컴포넌트는 pages/ 디렉토리에 있는 페이지 컴포넌트를 화면에 표시하는 데 사용하는 컴포넌트입니다. Vue의 RouterView 컴포넌트의 래퍼 컴포넌트로, 좀 더 편리하고 기능이 추가된 버전으로 생각하면됩니다.Vue.js의 기본 라우터 컴포넌트입니다

nuxt.config.js에서 설정 가능한 옵션들

인프런 짐코딩 강의를 수강하고 작성한 내용입니다.Nuxt는 pages/ 디렉토리 내부의 모든 Vue 파일을 파일 이름 기반으로 url을 생성합니다. Nuxt는 각 페이지에 대해 다이나믹 로드와 코드 스플리팅을 활용하여 요청된 경로에 대해 최소한의 Javascipt를 제

Nuxt.js에서의 컴포넌트 계층은 굉장히 구조적입니다. 효율적인 개발과 유지보수를 위해 각각의 디렉터리와 계층이 특정 역할을 담당하며, 정해진 구조에 따라 프로그램을 작성해야 합니다.app.vue 파일은 Nuxt 애플리케이션의 최상위 컴포넌트로서, 모든 페이지와 레이

여러 화면에서 전역적으로 로딩바 노출이 조작되어야 하므로, 로딩바 노출 여부 관리를 pinia store를 이용해 관리하려고 합니다. 아래는 실습에 사용한 코드입니다./store/loading-store.ts로딩바 노출 관리 스토어이기 때문에 고유 식별자로 loadin