Ch 02. 다음으로 나아가기 — NuxtHub, Layers, 마이그레이션

이 책에서 다룬 내용은 Nuxt 생태계의 탄탄한 기반입니다. 여기서 멈추지 않고 더 나아가고 싶은 분을 위해 세 가지 방향을 소개합니다.

NuxtHub

NuxtHub는 Cloudflare 인프라를 기반으로 한 Nuxt 전용 풀스택 호스팅 플랫폼입니다. Nuxt 팀이 직접 만들었습니다. D1 데이터베이스(SQLite 기반), KV 스토어, R2 스토리지(파일 저장)를 별도 설정 없이 바로 사용할 수 있습니다. Vercel보다 더 Nuxt에 최적화된 경험을 원한다면 NuxtHub가 좋은 선택입니다.

nuxt.config.ts에서 hub 설정을 추가하면 useDatabase(), useKV(), useBlob()을 서버 코드에서 곧바로 호출할 수 있습니다. 이 책에서 만든 블로그를 NuxtHub로 이전하면 SQLite 파일 관리 없이도 영속적인 데이터 저장이 가능합니다.

Nuxt Layers

프로젝트가 커지거나 여러 Nuxt 앱이 공통 기능을 공유해야 할 때 Layers를 사용합니다. 컴포넌트, composable, 스타일, nuxt.config 설정까지 레이어 단위로 재사용할 수 있습니다.

예를 들어 회사에서 여러 서비스를 운영한다면, 공통 UI 컴포넌트와 인증 로직을 하나의 레이어로 만들고 각 서비스가 이를 확장하는 모노레포 구조를 만들 수 있습니다.

// nuxt.config.tsexport default defineNuxtConfig({  extends: ['../shared-layer']})

Vue SPA에서 Nuxt로 마이그레이션 체크리스트

기존 Vue.js SPA를 Nuxt로 마이그레이션하는 경우 다음 항목을 순서대로 점검합니다.

• vue-router의 수동 라우트 정의를 pages/ 디렉토리의 파일 기반 라우팅으로 대체합니다.
• axios나 fetch를 직접 호출하던 코드를 useFetch 또는 $fetch로 교체합니다.
• Vuex 스토어를 Pinia 스토어로 마이그레이션합니다. Vuex와 Pinia는 개념이 비슷해서 변환이 어렵지 않습니다.
• localStorage, sessionStorage, window 접근 코드를 <ClientOnly> 또는 onMounted 안으로 이동합니다.
• 기존 Express나 FastAPI로 만든 백엔드 API 중 가벼운 것들은 Nitro API 라우트로 통합하는 것을 고려합니다. 복잡한 비즈니스 로직은 별도 서버로 유지하면서 Nitro에서 프록시하는 방법도 있습니다.

마이그레이션은 한 번에 전체를 바꾸려 하지 말고, 페이지 단위로 점진적으로 이전하는 것이 안전합니다.