ALBERT SITE

Nuxt 3 요약

Posted by Albert 12Day 21Hour 18Min 24Sec ago [2025-12-03]

Nuxt 3는 Vue.js 기반의 강력한 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 그리고 싱글 페이지 애플리케이션(SPA)을 쉽게 만들 수 있습니다.

1. 개발 환경 준비

필수 요구사항

  • Node.js: 18.0.0 이상 버전
  • 텍스트 에디터: VS Code 추천

Node.js 설치 확인

node --version
npm --version

2. Nuxt 3 프로젝트 생성

프로젝트 생성 명령어

npx nuxi@latest init my-nuxt-app

또는 npm을 사용:

npm create nuxt-app my-nuxt-app

프로젝트로 이동 및 의존성 설치

cd my-nuxt-app
npm install

개발 서버 실행

npm run dev
```

브라우저에서 `http://localhost:3000` 접속하면 Nuxt 3 환영 페이지를 볼 수 있습니다.

'' 3. 프로젝트 구조 이해하기
```
my-nuxt-app/
├── .nuxt/              ' 빌드 결과물 (자동 생성)
├── node_modules/       ' 의존성 패키지
├── pages/              ' 라우팅 페이지들
├── components/         ' Vue 컴포넌트들
├── composables/        ' 재사용 가능한 함수들
├── layouts/            ' 레이아웃 템플릿
├── public/             ' 정적 파일들
├── server/             ' 서버 API 엔드포인트
├── app.vue             ' 메인 컴포넌트
├── nuxt.config.ts      ' Nuxt 설정 파일
└── package.json        ' 프로젝트 정보

4. 첫 번째 페이지 만들기

Step 1: pages 폴더 생성

app.vue를 삭제하거나 이름을 변경하고, pages 폴더를 생성합니다.

Step 2: 홈페이지 만들기

pages/index.vue 파일 생성:

<template>
  <div class="container">
    <h1>안녕하세요, Nuxt 3! </h1>
    <p>첫 번째 Nuxt 페이지입니다.</p>
    <NuxtLink to="/about">소개 페이지로 가기</NuxtLink>
  </div>
</template>

<style scoped>
.container {
  max-width: 800px;
  margin: 50px auto;
  padding: 20px;
  text-align: center;
}

h1 {
  color: '00DC82;
  font-size: 2.5rem;
}

a {
  color: '00DC82;
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  text-decoration: underline;
}
</style>

Step 3: 소개 페이지 만들기

pages/about.vue 파일 생성:

<template>
  <div class="container">
    <h1>소개 페이지</h1>
    <p>이것은 Nuxt 3로 만든 소개 페이지입니다.</p>
    <NuxtLink to="/">홈으로 돌아가기</NuxtLink>
  </div>
</template>

<style scoped>
.container {
  max-width: 800px;
  margin: 50px auto;
  padding: 20px;
  text-align: center;
}
</style>

5. 컴포넌트 만들기

재사용 가능한 카드 컴포넌트

components/Card.vue 파일 생성:

<template>
  <div class="card">
    <h3>{{ title }}</h3>
    <p>{{ content }}</p>
  </div>
</template>

<script setup>
defineProps({
  title: String,
  content: String
})
</script>

<style scoped>
.card {
  border: 2px solid '00DC82;
  border-radius: 8px;
  padding: 20px;
  margin: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

h3 {
  color: '00DC82;
  margin-top: 0;
}
</style>

컴포넌트 사용하기

pages/index.vue 수정:

<template>
  <div class="container">
    <h1>안녕하세요, Nuxt 3! </h1>
    
    <div class="cards">
      <Card 
        title="빠른 성능" 
        content="Nuxt 3는 Vue 3와 Vite를 사용하여 초고속 개발 경험을 제공합니다."
      />
      <Card 
        title="서버 사이드 렌더링" 
        content="SEO에 최적화된 SSR을 기본으로 지원합니다."
      />
      <Card 
        title="타입스크립트" 
        content="TypeScript를 완벽하게 지원하여 안정적인 개발이 가능합니다."
      />
    </div>
    
    <NuxtLink to="/about">소개 페이지로 가기</NuxtLink>
  </div>
</template>

<style scoped>
.container {
  max-width: 1200px;
  margin: 50px auto;
  padding: 20px;
  text-align: center;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin: 30px 0;
}

h1 {
  color: '00DC82;
  font-size: 2.5rem;
}
</style>

6. API 데이터 가져오기

서버 API 만들기

server/api/posts.js 파일 생성:

export default defineEventHandler(() => {
  return [
    { id: 1, title: '첫 번째 게시글', content: 'Nuxt 3는 정말 멋져요!' },
    { id: 2, title: '두 번째 게시글', content: '서버 사이드 렌더링이 쉬워요.' },
    { id: 3, title: '세 번째 게시글', content: 'API 라우트가 편리합니다.' }
  ]
})

API 데이터 사용하기

pages/posts.vue 파일 생성:

<template>
  <div class="container">
    <h1>게시글 목록</h1>
    
    <div v-if="pending">로딩 중...</div>
    <div v-else-if="error">에러가 발생했습니다: {{ error.message }}</div>
    <div v-else class="posts">
      <div v-for="post in posts" :key="post.id" class="post">
        <h2>{{ post.title }}</h2>
        <p>{{ post.content }}</p>
      </div>
    </div>
    
    <NuxtLink to="/">홈으로 돌아가기</NuxtLink>
  </div>
</template>

<script setup>
const { data: posts, pending, error } = await useFetch('/api/posts')
</script>

<style scoped>
.container {
  max-width: 800px;
  margin: 50px auto;
  padding: 20px;
}

.posts {
  margin: 30px 0;
}

.post {
  border-left: 4px solid '00DC82;
  padding: 15px;
  margin: 20px 0;
  background-color: 'f9f9f9;
  border-radius: 4px;
}

h2 {
  color: '333;
  margin-top: 0;
}
</style>

7. 레이아웃 사용하기

기본 레이아웃 만들기

layouts/default.vue 파일 생성:

<template>
  <div class="layout">
    <header>
      <nav>
        <NuxtLink to="/">홈</NuxtLink>
        <NuxtLink to="/about">소개</NuxtLink>
        <NuxtLink to="/posts">게시글</NuxtLink>
      </nav>
    </header>
    
    <main>
      <slot />
    </main>
    
    <footer>
      <p>&copy; 2024 My Nuxt 3 App</p>
    </footer>
  </div>
</template>

<style scoped>
.layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header {
  background-color: '00DC82;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

nav {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 30px;
}

nav a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  transition: opacity 0.3s;
}

nav a:hover {
  opacity: 0.8;
}

main {
  flex: 1;
}

footer {
  background-color: '333;
  color: white;
  text-align: center;
  padding: 20px;
}
</style>

8. 환경 변수 설정

.env 파일 생성

프로젝트 루트에 .env 파일 생성:

NUXT_PUBLIC_API_BASE=https://api.example.com
NUXT_API_SECRET=your-secret-key

nuxt.config.ts에서 사용

export default defineNuxtConfig({
  runtimeConfig: {
    apiSecret: '', // 서버에서만 접근 가능
    public: {
      apiBase: '' // 클라이언트에서도 접근 가능
    }
  }
})


컴포넌트에서 사용

<script setup>
const config = useRuntimeConfig()
console.log(config.public.apiBase)
</script>

9. 빌드 및 배포

프로덕션 빌드

npm run build

빌드 결과 미리보기

npm run preview

배포 옵션

1. Vercel에 배포

' Vercel CLI 설치
npm i -g vercel

' 배포
vercel

2. Netlify에 배포

netlify.toml 파일 생성:

[build]
  command = "npm run build"
  publish = ".output/public"

Netlify 대시보드에서 GitHub 저장소 연결 후 자동 배포

3. 정적 사이트로 생성 (SSG)

nuxt.config.ts 수정:

export default defineNuxtConfig({
  ssr: true,
  nitro: {
    prerender: {
      crawlLinks: true,
      routes: ['/']
    }
  }
})

빌드:

npm run generate

.output/public 폴더를 정적 호스팅 서비스에 업로드

10. 유용한 팁

Auto-import 활용

Nuxt 3는 자동으로 컴포넌트, composables, utilities를 import합니다. 별도로 import 문을 작성할 필요가 없습니다.

SEO 최적화

<script setup>
useHead({
  title: '페이지 제목',
  meta: [
    { name: 'description', content: '페이지 설명' }
  ]
})
</script>

상태 관리

<script setup>
// composables/useCounter.js
export const useCounter = () => {
  const count = ref(0)
  const increment = () => count.value++
  return { count, increment }
}
</script>

마무리

이제 Nuxt 3의 기본을 모두 배웠습니다! 주요 내용을 정리하면:

  1. ✅ 프로젝트 생성 및 설정
  2. ✅ 페이지 라우팅
  3. ✅ 컴포넌트 작성
  4. ✅ API 연동
  5. ✅ 레이아웃 구성
  6. ✅ 빌드 및 배포

더 자세한 내용은 Nuxt 3 공식 문서를 참고하세요!



LIST

Copyright © 2014 visionboy.me All Right Reserved.