dog paw / development

17단계: Nuxt의 최적화 기법Nuxt는 기본적으로 성능 최적화를 잘 지원하지만, 추가 설정으로 더욱 빠른 앱을 만들 수 있습니다.1. Lazy Loading (지연 로딩)Nuxt의 pages/ 파일 기반 라우팅은 기본적으로 코드 분할이 적용됩니다. 하지만 컴포넌트에 대해 명시적으로 지연 로딩을 설정할 수도 있습니다.예제 2. 이미지 최적화Nuxt Image 모듈을 활용해 이미지를 최적화합니다.이미지 설정nuxt.config.ts:export default defineNuxtConfig({ modules: ['@nuxt/image'], image: { domains: ['example.com'], // 외부 이미지 도메인 허용 dir: 'assets/images', // 로컬 이미지 디..

12단계: Nuxt 미들웨어Nuxt는 middleware 디렉토리를 통해 라우팅과 상태 관리를 쉽게 제어할 수 있습니다.1. 미들웨어란?미들웨어는 특정 페이지에 접근하기 전에 실행되는 코드입니다.인증, 로깅, 리다이렉션 등을 처리할 때 유용합니다.2. 글로벌 미들웨어모든 페이지에 적용되는 미들웨어.예제: 글로벌 미들웨어middleware/logger.global.js 생성:export default defineNuxtMiddleware((to, from) => { console.log(`Navigating from ${from.fullPath} to ${to.fullPath}`);});nuxt.config.ts에서 등록:export default defineNuxtConfig({ router: { ..

7단계: Nuxt의 데이터 페칭Nuxt는 데이터 페칭을 간단하고 강력하게 처리할 수 있는 내장 메서드를 제공합니다.1. useFetchuseFetch는 클라이언트와 서버에서 데이터를 가져올 수 있는 API입니다.사용 예제Post: {{ post.title }}{{ post.body }}const { data: post } = await useFetch('https://jsonplaceholder.typicode.com/posts/1');장점:서버에서 데이터를 가져오면 페이지 로드 시 데이터가 포함된 HTML이 렌더링되어 SEO와 초기 로딩 속도에 유리.클라이언트에서 실행하면 동적 데이터도 처리 가능.2. useAsyncDatauseAsyncData는 페이지 또는 컴포넌트에서 데이터를 비동기로 가져오는 데..

Nuxt에 대한 학습 내용을 단계적으로 정리해 설명하겠습니다. Nuxt는 Vue.js를 기반으로 한 프레임워크로, SSR(Server-Side Rendering), SSG(Static Site Generation), 파일 기반 라우팅, SEO 최적화, 모듈화된 구조 등 Vue.js 프로젝트를 더욱 강력하게 만들어주는 도구입니다.1단계: Nuxt란 무엇인가?Nuxt의 주요 특징SSR(서버 사이드 렌더링):서버에서 HTML을 렌더링하고 클라이언트로 보냄.SEO와 초기 로딩 속도에 유리.단순한 SPA와는 다르게 검색 엔진이 HTML을 쉽게 읽을 수 있음.SSG(정적 사이트 생성):빌드 시 모든 페이지를 HTML로 생성.Netlify, Vercel과 같은 정적 호스팅 서비스에 적합.파일 기반 라우팅:pages/..