3. Nuxt 에 대한 학습 내용

 

---

12단계: Nuxt 미들웨어

Nuxt는 middleware 디렉토리를 통해 라우팅과 상태 관리를 쉽게 제어할 수 있습니다.

1. 미들웨어란?

• 미들웨어는 특정 페이지에 접근하기 전에 실행되는 코드입니다.
• 인증, 로깅, 리다이렉션 등을 처리할 때 유용합니다.

---

2. 글로벌 미들웨어

• 모든 페이지에 적용되는 미들웨어.

예제: 글로벌 미들웨어

1. middleware/logger.global.js 생성:

export default defineNuxtMiddleware((to, from) => {
  console.log(`Navigating from ${from.fullPath} to ${to.fullPath}`);
});

1. nuxt.config.ts에서 등록:

export default defineNuxtConfig({
  router: {
    middleware: 'logger.global',
  },
});

---

3. 특정 페이지에 미들웨어 적용

1. middleware/auth.js 생성:

export default defineNuxtMiddleware((to) => {
  const isAuthenticated = false; // 예시: 인증 상태 확인
  if (!isAuthenticated && to.path !== '/login') {
    return navigateTo('/login');
  }
});

1. 페이지에서 적용:

<script setup>
definePageMeta({
  middleware: 'auth',
});
</script>

---

13단계: Nuxt 에코시스템 활용

Nuxt는 다양한 모듈과 플러그인을 지원하여 기능 확장을 간단히 처리할 수 있습니다.

1. @nuxtjs/axios

Nuxt 프로젝트에서 HTTP 요청을 쉽게 처리하기 위한 모듈입니다.

설치

npm install @nuxtjs/axios

설정

nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nuxtjs/axios'],
  axios: {
    baseURL: 'https://jsonplaceholder.typicode.com',
  },
});

사용

<script setup>
const { data: posts } = await useAsyncData('posts', () => $axios.get('/posts'));
</script>

<template>
  <div v-for="post in posts" :key="post.id">
    <h3>{{ post.title }}</h3>
    <p>{{ post.body }}</p>
  </div>
</template>

---

2. @nuxt/image

이미지 최적화를 간단히 처리합니다.

설치

npm install @nuxt/image

설정

nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nuxt/image'],
  image: {
    domains: ['example.com'], // 허용된 이미지 도메인
  },
});

사용

 

---

14단계: Nuxt의 SEO와 메타 관리

SEO는 Nuxt의 강력한 기능 중 하나입니다. 페이지별로 SEO 메타 태그를 간단히 관리할 수 있습니다.

1. 글로벌 SEO 설정

nuxt.config.ts:

export default defineNuxtConfig({
  app: {
    head: {
      title: 'Nuxt Application',
      meta: [
        { name: 'description', content: 'A Nuxt.js project with SEO support' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      ],
    },
  },
});

---

2. 페이지별 SEO

페이지에서 definePageMeta를 사용해 개별적으로 설정 가능합니다.

예제

<script setup>
definePageMeta({
  title: 'About Us',
  meta: [
    { name: 'description', content: 'Learn more about us' },
    { property: 'og:title', content: 'About Us' },
  ],
});
</script>

---

15단계: 전역 상태 관리

Nuxt 프로젝트에서 Pinia 또는 Vuex를 사용해 전역 상태를 관리할 수 있습니다.

1. Pinia 설치 및 설정

설치

npm install pinia

Pinia 스토어 생성

store/counter.ts:

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
  },
});

사용

<script setup>
import { useCounterStore } from '@/store/counter';

const counterStore = useCounterStore();
</script>

<template>
  <div>
    <p>Count: {{ counterStore.count }}</p>
    <button @click="counterStore.increment">Increment</button>
  </div>
</template>

---

16단계: Nuxt 프로젝트 배포

Nuxt는 다양한 배포 옵션을 제공합니다.

1. 정적 사이트 생성 (SSG)

npm run build
npm run generate

2. 서버 배포 (SSR)

• npm run build 후 Node.js 서버에서 실행:

npm run start

---