Nitro 풀스택 서버 엔진과 배포

Nuxt의 진정한 마법은 백엔드를 따로 구축할 필요가 없다는 것입니다! 내장된 Nitro(니트로) 엔진 덕분에, server/api/ 폴더에 파일을 만들기만 하면 즉시 무적의 백엔드 API 서버가 완성됩니다.

배포 시 npm run build를 실행하면, 프론트엔드 코드와 Nitro 백엔드 코드가 가볍고 완벽하게 압축된 단 하나의 .output 폴더로 묶여 나옵니다.

<!-- ==========================================
// 📂 server/api/hello.ts (백엔드 API 컨트롤러)
// ⚠️ 주의: 실제 .ts 파일에서는 <script> 태그를 작성하지 않습니다.
// ========================================== -->
<script>
// 이 파일은 프론트엔드가 아닌, Node.js 서버 환경에서 실행됩니다!
// 파일 이름이 'hello'이므로 URL 주소는 '/api/hello' 가 됩니다.
export default defineEventHandler((event) => {
  // 원한다면 이 안에서 MySQL, MongoDB, Oracle DB 등에 접속해서 
  // 데이터를 가져오는 코드를 작성할 수 있습니다.

  // 반환(return)된 객체는 자동으로 JSON 형태로 클라이언트에 전송됩니다.
  return {
    message: '안녕하세요! 서버에서 보낸 메시지입니다.',
    timestamp: new Date().toISOString()
  }
})
</script>

<!-- ==========================================
// 📂 app/pages/index.vue (프론트에서 API 호출)
// ========================================== -->
<template>
  <div class="p-8 text-center bg-gray-50 rounded-xl mt-10">
    <h1 class="text-3xl font-bold text-gray-800 mb-6">풀스택 API 테스트</h1>
    
    <!-- 서버에서 응답한 JSON 데이터 전체가 깔끔하게 출력됩니다. -->
    <pre class="bg-black text-green-400 p-4 rounded text-left overflow-x-auto">
      {{ data }}
    </pre>
  </div>
</template>

<script setup>
// 위에서 만든 /api/hello 주소로 데이터 패칭을 시도합니다.
const { data } = await useFetch('/api/hello')
</script>