Ch 03. FastAPI+Vue vs Nuxt — 무엇이 다른가

FastAPI와 Vue.js로 개발해본 경험이 있다면, 이미 훌륭한 출발점을 갖고 있습니다. 백엔드 API를 설계하고, 프론트엔드에서 fetch나 axios로 데이터를 가져오는 흐름이 몸에 배어 있을 것입니다. Nuxt로 넘어오면 이 구조가 어떻게 달라질까요?

분리형 아키텍처 — FastAPI + Vue

FastAPI와 Vue를 함께 쓰면 백엔드와 프론트엔드가 완전히 분리됩니다. FastAPI 서버는 Python으로 작성된 REST API를 제공하고, Vue 앱은 이 API를 호출해서 데이터를 받아 화면을 그립니다. 두 프로젝트는 각자의 코드베이스를 가지고, 각자의 방식으로 배포됩니다.

이 구조의 장점은 명확합니다. FastAPI의 강력한 비동기 처리, Python ML 라이브러리 통합, 독립적인 스케일링이 가능합니다. 팀이 백엔드 개발자와 프론트엔드 개발자로 나뉘어 있을 때 역할이 깔끔하게 분리됩니다.

단점도 있습니다. 두 개의 서버를 유지해야 하고, CORS 설정이 필요하고, 인증 토큰을 양쪽에서 일관되게 처리해야 합니다. 두 언어를 모두 알아야 한다는 부담도 있습니다.

통합형 아키텍처 — Nuxt + Nitro

Nuxt는 하나의 프로젝트 안에서 프론트엔드와 서버 API를 함께 처리합니다. server/api/ 폴더에 TypeScript 파일을 만들면 그것이 곧 API 엔드포인트입니다. 언어는 JavaScript/TypeScript 하나입니다. 배포도 하나의 컨테이너로 끝납니다.

Nitro는 Nuxt의 서버 엔진입니다. Node.js 서버를 포함해 Cloudflare Workers, Deno, Bun 등 다양한 런타임을 지원합니다. Nitro가 있으면 FastAPI가 담당하던 역할의 상당 부분을 Nuxt 안에서 처리할 수 있습니다.

Nitro가 FastAPI를 대체할 수 있는 시점

Nitro 서버가 FastAPI를 완전히 대체하는 것은 아닙니다. Python 생태계가 필요한 작업, 예를 들어 NumPy, Pandas, ML 모델 추론이 필요하다면 여전히 FastAPI가 적합합니다.

반면 빠른 프로토타이핑, 소중형 서비스, JavaScript만 다루는 팀이라면 Nuxt 하나로 충분합니다. 데이터베이스 CRUD, 인증, 파일 업로드 같은 일반적인 웹 서비스 기능은 Nitro와 Prisma만으로 깔끔하게 구현됩니다.

이미 아는 개념이 많습니다

안심하셔도 됩니다. FastAPI+Vue를 경험했다면 Nuxt에서 낯선 것보다 익숙한 것이 더 많습니다.

REST API 설계 방식은 그대로 적용됩니다. HTTP 메서드, 상태 코드, JSON 요청·응답 구조는 Nitro에서도 동일합니다. Vue 컴포넌트 작성법, Composition API, ref와 computed는 변하지 않습니다. 인증 흐름, 환경변수 관리, CORS 개념도 마찬가지입니다.

달라지는 것은 파일을 어느 폴더에 놓느냐, 그리고 서버와 클라이언트가 같은 프로젝트 안에 있다는 사실 정도입니다. 그 차이에 익숙해지는 것이 이 책의 목표 중 하나입니다.