Ch 04. Nuxt 3 생태계 한눈에 보기

Nuxt 3는 단독으로 만들어진 프레임워크가 아닙니다. UnJS라는 JavaScript 유틸리티 모음 위에 올라서 있고, 각 레이어마다 전문화된 도구가 자리를 잡고 있습니다. 처음에는 이름이 낯설어 보이지만 각자 역할이 분명합니다.

Nitro는 Nuxt의 서버 엔진입니다. API 라우트를 처리하고, SSR 요청을 받아 HTML을 생성하고, Node.js부터 Cloudflare Workers까지 다양한 환경에 배포할 수 있게 해줍니다. server/ 폴더 전체가 Nitro의 관할입니다.

Vite는 개발 서버와 번들러 역할을 합니다. 모듈을 미리 번들하지 않고 필요할 때 변환하는 방식으로 개발 서버 시작 속도를 획기적으로 줄였습니다. 코드를 저장하면 브라우저에 즉시 반영되는 HMR도 Vite가 처리합니다.

h3는 Nitro 내부에서 사용하는 HTTP 프레임워크입니다. Express와 비슷한 역할이지만 훨씬 가볍고 Edge 런타임과의 호환성이 높습니다. defineEventHandler로 API 핸들러를 작성할 때 h3가 동작합니다.

ofetch는 Nuxt에서 권장하는 HTTP 클라이언트입니다. 브라우저와 Node.js 환경 모두에서 동일하게 동작하며, useFetch와 $fetch 내부에서 사용됩니다.

UnJS는 위의 도구들을 포함해 Nuxt 생태계 전반에서 쓰이는 유틸리티 패키지 모음입니다. defu(객체 병합), unstorage(스토리지 추상화), unenv(환경 추상화) 같은 것들이 여기에 속합니다.

Nuxt UI는 Tailwind CSS 기반의 공식 UI 컴포넌트 라이브러리입니다. 버튼, 모달, 테이블 같은 컴포넌트를 빠르게 사용할 수 있습니다.

Nuxt Content는 마크다운, YAML, JSON 파일을 데이터 소스로 사용하는 모듈입니다. 블로그나 문서 사이트를 만들 때 유용합니다.

NuxtHub는 Cloudflare 인프라를 활용한 Nuxt 배포 플랫폼입니다. KV 스토리지, D1 데이터베이스, R2 스토리지를 Nuxt 프로젝트와 쉽게 연결합니다.

이 책에서 다루는 것은 Nuxt 3 핵심 기능(라우팅, SSR, 데이터 페칭), Nitro 서버 API 개발, Pinia 상태 관리, Prisma ORM, TypeScript 통합, Vercel/PM2 배포입니다.

이 책에서 다루지 않는 것은 Nuxt UI, Nuxt Content, NuxtHub, 테스팅(Vitest, Playwright), Nuxt Layer입니다. 이 주제들은 핵심을 익힌 뒤 공식 문서를 통해 확장하기를 권장합니다.