1. Nuxt 에 대한 학습 내용

Nuxt에 대한 학습 내용을 단계적으로 정리해 설명하겠습니다. Nuxt는 Vue.js를 기반으로 한 프레임워크로, SSR(Server-Side Rendering), SSG(Static Site Generation), 파일 기반 라우팅, SEO 최적화, 모듈화된 구조 등 Vue.js 프로젝트를 더욱 강력하게 만들어주는 도구입니다.

---

1단계: Nuxt란 무엇인가?

Nuxt의 주요 특징

1. SSR(서버 사이드 렌더링):
   • 서버에서 HTML을 렌더링하고 클라이언트로 보냄.
   • SEO와 초기 로딩 속도에 유리.
   • 단순한 SPA와는 다르게 검색 엔진이 HTML을 쉽게 읽을 수 있음.
2. SSG(정적 사이트 생성):
   • 빌드 시 모든 페이지를 HTML로 생성.
   • Netlify, Vercel과 같은 정적 호스팅 서비스에 적합.
3. 파일 기반 라우팅:
   • pages/ 디렉토리에 파일을 생성하면 자동으로 라우팅.
   • Vue Router를 따로 설정하지 않아도 됨.
4. SEO 최적화:
   • Nuxt는 meta 태그, Open Graph 설정, 로봇 친화적인 SSR을 기본적으로 지원.
5. 모듈 시스템:
   • 다양한 Nuxt 모듈(@nuxtjs/axios, @nuxt/content 등)로 기능 확장 가능.

---

Nuxt를 사용하면 좋은 프로젝트

• SEO가 중요한 프로젝트 (예: 블로그, 포트폴리오, 전자상거래).
• 정적 사이트가 필요한 프로젝트 (예: 마크다운 기반 문서 사이트).
• 복잡한 라우팅이 필요한 프로젝트.

---

2단계: Nuxt 프로젝트 구조

Nuxt는 Vue.js 프로젝트보다 더 구조화된 디렉토리 시스템을 제공합니다.

기본 디렉토리 구조

├── assets/         # 정적 자산 (이미지, CSS 등)
├── components/     # Vue 컴포넌트
├── content/        # 마크다운 파일 저장 (Nuxt Content 모듈 사용 시)
├── layouts/        # 레이아웃 컴포넌트 (예: Header, Sidebar 포함)
├── middleware/     # 라우터 미들웨어 (인증 등)
├── pages/          # 파일 기반 라우팅을 위한 페이지
├── plugins/        # Vue 플러그인 (예: PrimeVue 초기화)
├── static/         # 정적 파일 (favicon 등)
├── store/          # Pinia 또는 Vuex 상태 관리 (선택적)
└── nuxt.config.ts  # Nuxt 설정 파일

---

Nuxt의 디렉토리 특징

1. pages/ 디렉토리:
   • index.vue → / 경로.
   • about.vue → /about 경로.
   • blog/index.vue → /blog 경로.
2. layouts/ 디렉토리:
   • 페이지에 공통으로 적용될 레이아웃을 정의.
   • 예: 기본 레이아웃(Default), 인증 레이아웃(Auth).
3. nuxt.config.ts:
   • Nuxt 프로젝트의 설정 파일로, SEO, 플러그인, 모듈 설정을 관리.

---

3단계: Nuxt 설치 및 초기화

프로젝트 생성

1. Nuxt 프로젝트 초기화
2. npx nuxi init my-nuxt-project cd my-nuxt-project npm install npm run dev
3. 디렉토리 확인 프로젝트를 생성한 후 위에서 설명한 디렉토리 구조가 생성됨.
4. 개발 서버 실행
   • 개발 서버는 기본적으로 http://localhost:3000에서 실행.

---

4단계: Nuxt 기본 설정

nuxt.config.ts 설정

Nuxt 프로젝트의 중심 설정 파일입니다. 여기에서 SEO, 모듈, 플러그인을 관리합니다.

기본 설정 예시

export default defineNuxtConfig({
  ssr: true, // 서버 사이드 렌더링 활성화
  modules: [
    '@nuxt/content', // 마크다운 관리 모듈
    '@nuxtjs/tailwindcss', // TailwindCSS 통합
  ],
  app: {
    head: {
      title: 'My Nuxt Project',
      meta: [
        { name: 'description', content: 'This is a Nuxt project' },
      ],
    },
  },
});

---

5단계: Nuxt에서 파일 기반 라우팅

Nuxt는 pages/ 디렉토리의 파일을 라우팅으로 변환합니다.

예제

pages/
├── index.vue        # '/'
├── about.vue        # '/about'
├── blog/
│   ├── index.vue    # '/blog'
│   ├── [id].vue     # '/blog/:id' (동적 라우팅)

동적 라우팅 예제

<template>
  <h1>Blog ID: {{ params.id }}</h1>
</template>

<script setup>
const params = useRoute().params;
</script>

---

6단계: Nuxt의 주요 기능 소개

1. SEO 설정
   • 각 페이지에서 SEO 메타 태그를 설정할 수 있음.

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

1. 마크다운 렌더링
   • Nuxt Content 모듈을 활용해 마크다운 파일을 페이지로 렌더링 가능.

npm install @nuxt/content

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

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

1. 다크 모드
   • TailwindCSS를 활용해 다크 모드 구현이 간단.

---