2. Nuxt 에 대한 학습 내용

 

---

7단계: Nuxt의 데이터 페칭

Nuxt는 데이터 페칭을 간단하고 강력하게 처리할 수 있는 내장 메서드를 제공합니다.

1. useFetch

useFetch는 클라이언트와 서버에서 데이터를 가져올 수 있는 API입니다.

사용 예제

Post: {{ post.title }}

{{ post.body }}

const { data: post } = await useFetch('<a href=https://jsonplaceholder.typicode.com/posts/1');>https://jsonplaceholder.typicode.com/posts/1');</a>

• 장점:
  • 서버에서 데이터를 가져오면 페이지 로드 시 데이터가 포함된 HTML이 렌더링되어 SEO와 초기 로딩 속도에 유리.
  • 클라이언트에서 실행하면 동적 데이터도 처리 가능.

---

2. useAsyncData

useAsyncData는 페이지 또는 컴포넌트에서 데이터를 비동기로 가져오는 데 사용됩니다.

사용 예제

User: {{ user.name }}

{{ user.email }}

const { data: user } = await useAsyncData('user', () =>
  $fetch('<a href=https://jsonplaceholder.typicode.com/users/1')>https://jsonplaceholder.typicode.com/users/1')</a>
);

• 차이점: useFetch와 비슷하지만, useAsyncData는 Nuxt 페이지 수준에서 데이터를 로드하는 데 최적화되어 있음.

---

8단계: Nuxt Content 모듈로 마크다운 관리

1. Nuxt Content 모듈 설치

npm install @nuxt/content

2. 마크다운 파일 생성

content/ 디렉토리를 만들어 마크다운 파일을 저장합니다.

content/
├── blog/
│   ├── first-post.md
│   ├── second-post.md

first-post.md

---
title: "My First Post"
description: "This is my first blog post with Nuxt Content"
---

# Welcome to my blog!

This is some content written in Markdown.

---

3. 마크다운 데이터를 페이지에 렌더링

<template>
  <div>
    <h1>{{ document.title }}</h1>
    <div v-html="document.body" />
  </div>
</template>

<script setup>
const { data: document } = await useContent('blog/first-post').fetch();
</script>

---

9단계: Nuxt 레이아웃 시스템

Nuxt는 페이지에 공통으로 적용할 레이아웃을 관리하기 쉽게 만들어 줍니다.

1. 기본 레이아웃

layouts/default.vue

<template>
  <div>
    <header>Header</header>
    <main>
      <slot />
    </main>
    <footer>Footer</footer>
  </div>
</template>

<script setup>
</script>

• 모든 페이지는 기본적으로 default.vue 레이아웃을 사용합니다.

---

2. 사용자 정의 레이아웃

• 특정 페이지에만 적용되는 레이아웃을 만들 수도 있습니다.

layouts/auth.vue

<template>
  <div class="auth-layout">
    <slot />
  </div>
</template>

<style scoped>
.auth-layout {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

• 페이지에서 레이아웃 설정:

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

---

10단계: 다크 모드 구현

Nuxt는 TailwindCSS와 함께 다크 모드를 간단히 구현할 수 있습니다.

1. TailwindCSS 설치

npm install @nuxtjs/tailwindcss

nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss'],
  tailwindcss: {
    configPath: './tailwind.config.js',
  },
});

---

2. TailwindCSS 다크 모드 설정

tailwind.config.js:

module.exports = {
  darkMode: 'class', // 다크 모드 설정
  theme: {
    extend: {},
  },
};

---

3. 다크 모드 구현

컴포넌트 예제

<template>
  <div :class="{ dark: isDarkMode }">
    <button @click="toggleDarkMode">Toggle Dark Mode</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const isDarkMode = ref(false);
const toggleDarkMode = () => {
  isDarkMode.value = !isDarkMode.value;
};
</script>

<style scoped>
.dark {
  background-color: black;
  color: white;
}
</style>

---

11단계: Nuxt 모듈 및 플러그인

Nuxt는 플러그인을 통해 외부 라이브러리와의 통합을 간단히 처리합니다.

1. PrimeVue 통합

PrimeVue 설치

npm install primevue primeicons

플러그인 등록

plugins/primevue.js:

import PrimeVue from 'primevue/config';
import { defineNuxtPlugin } from '#app';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(PrimeVue);
});

---