3. 풀스택을 위한 API 서버 구축

Nuxt 공식 홈페이지 에서 보면 Nuxt 는 상용 서비스가 가능한 풀스택 프레임워크라고 소개되어 있다. 통상 API 서버가 Java Spring 으로 구성되고, Nuxt 혹은 Nextjs 는 프런트만 담당하는 경우가 흔하다.

이는 기존에 Vue, React 등이 프런트만 담당하고, Nuxt, Next 와 같은 메타 프레임워크는 나중에 출시되어서 이기도 하고, 이미 잘 구축되어 있는 레거시를 바꿀 필요가 없기에 관심이 덜 가기 때문이기도하다.

Nuxt 는 풀스택 프레임워크이기 때문에 JAVA 같은 다른 기술이나, Spring, NestJS 같은 다른 프렘임워크를 이용하지 않고도, 처음 구축하는 어플리케이션이면서 단일 기술로 풀스택을 구축하고 싶은 경우 좋은 선택지가 될 수 있을 것이다.

API 서버를 구축해서 화면에 연계해보자.

DB 연결

풀스택을 구현하려면 제일 기본으로 선행되야 할 일이 데이터베이스 연결이다. 각 DB 벤더별 클라이언트를 설치해서 직접 연결해서 쓰는 방법도 있지만 중간에 추상화 계층을 지원하는 프레임워크를 추가하여 연계하는 경우가 대부분이다.

데이터베이스 추상화 계층으로 쓰이는 (흔히 ORM 으로 불리는) 프레임워크로는 대표적으로 Sequelize, Typeorm 이 있었다. 최근까지도 사랑받는 ORM 이긴 하지만, 좀 더 쉬운 설정과 경량 사이즈인 ORM 이 점점 인기를 얻는 추세다.

이런 경량 프레임워크에 대표적으로 Drizzle 과 Prisma 가 있다.

Drizzle 은 SQL 지향적이고, Prisma 는 객체(모델) 지향적이다. 둘간의 차이 및 장단점은 여기를 참고하면 된다. 이번 장에서는 Prisma 를 쓰겠다.

prisma + postgres + prisma client 설치

Terminal

npm i prisma --save-dev
npm i pg
npm i @prisma/client

디렉터리 생성

프로젝트 루트 디렉터리에서 server 폴더를 생성하고, 해당 디렉토리의 CLI 에서 아래 명령을 실행한다.

Terminal

npx prisma init

그림과 같이 prisma 디렉토리에 schema.prisma 파일이 생길 것이다.

DB 연결 설정

위 그림에서 보이는 .env 파일을 열어서 DB URL 을 설정한다.

# Environment variables declared in this file are automatically made available to Prisma.
# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema

# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
# See the documentation for all the connection string options: https://pris.ly/d/connection-strings

DATABASE_URL="postgresql://postgres:yourpassword@localhost:5432/postgres?schema=public"

스키마 정의

schema.prisma 파일을 열어 다음과 같이 정의한다.

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model User {
  @@map("users")
  id        Int    @id @default(autoincrement())
  name      String?
  email     String?   @unique
  password  String?
}

migration

정의된 schema.prisma 에 User 스키마가 추가되었다. 이를 마이그레션하면 연결설정된 데이터베이스에 정의된 스키마에 해당된 테이블이 생긴다.

Terminal

npx prisma migrate dev --name init

테이블이 자동 생성된 것을 확인할 수 있다.

반대로 DB 에 있는 테이블을 schema.prisma 로 임포트 할 수 있다. 이를 generate 라고 한다.

DB 연결 Util 함수

Prisma Client 를 이용하여 DB에 연결하고 쿼리를 전송할 수 있다.

/server/utils/prisma.ts

import { PrismaClient } from '@prisma/client'

let _prisma: PrismaClient

export const usePrisma = () => {
    if (!_prisma) {
        _prisma = new PrismaClient()
    }
    return _prisma
}

API 생성

DB 연결 Util 함수를 이용해 api 를 만들어 보자.

/server/api/users.ts

import { usePrisma } from "#imports";

export default defineEventHandler(async () => {
    const prisma = usePrisma();
    const users = await prisma.user.findMany();

    return users;
});

아주 간단히 api 를 생성할 수 있다. 이를 브라우저에서 호출해 보자. 호출을 확인하기 전에 SQL 툴을 이용해 테스트 데이터 한 건을 넣어보자.

insert into users values ('xyz', 'xxx@example.com', 'xyz')

화면 연결

기존 todos-users.vue 파일에 users 를 Table 로 렌더링하는 소스를 조금 수정해서 화면과 제대로 연계되는지 살펴 보겠다.

/servers/api/**.ts 파일은 "/api/**" URI 로 바인딩 된다. 외부 API jsonplaceholder 데이터 URL 을 내부 API 와 함께 사용하면서 소스코드의 일관성과 깔끔함을 유지하기 위해 nuxt.config.ts 에 proxy 설정을 해보자.

nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  routeRules: {
    '/api/external/**': {
      proxy: {
        to: 'https://jsonplaceholder.typicode.com/**'
      }
    }
  },

  nitro: {
    esbuild: {
      options: {
        target: 'esnext'
      }
    },
  },
  ....
}

todos-user.vue 페이지 소스를 아래처럼 고친다.

<script setup lang="ts">
const { data, pending } = await useAsyncData('todos-users', async () => {
  const [todos, users] = await Promise.all(
      [$fetch('/api/external/todos', { method:'get'}),
        $fetch('/api/users', { method:'get'})
  ])

  return {
    todos,
    users
  }
})
</script>

<template>
...
</template>

아래와 같이 화면이 나오면 Nuxt 프레임워크에 통합된 API 가 완성된 것이다. 좀 더 복잡한 실험에 도전해 보길 바란다.