현대의 웹 애플리케이션에서 데이터베이스 관리와 데이터 모델링은 매우 중요한 부분입니다. 특히, Nest.js와 Prisma를 조합하면 효율적인 백엔드 개발과 데이터 관리를 할 수 있습니다. 이 글에서는 Prisma의 기본 개념, Nest.js와의 연동 방법, 데이터 모델링의 기초를 다루고 예제를 통해 이를 보여주도록 하겠습니다.

1. Prisma 개요

Prisma는 개발자가 데이터를 쉽게 관리하고 변형할 수 있도록 도와주는 오픈 소스 ORM(Object Relational Mapping) 도구입니다. JavaScript와 TypeScript 환경에서 강력한 데이터베이스 접근을 제공하며, SQL 데이터베이스를 안전하고 효율적으로 사용할 수 있게 해줍니다. Prisma는 데이터베이스를 스키마 기반으로 정의할 수 있게 해주며, 개발자가 데이터베이스 변경 사항을 쉽게 마이그레이션할 수 있도록 도와줍니다.

1.1 Prisma의 주요 기능

• Type Safety: TypeScript와의 통합으로 얻는 타입 안전성은 런타임 오류를 줄여줍니다.
• 생산성 향상: Prisma Client를 통한 간편한 쿼리 작성으로 생산성이 극대화됩니다.
• Migrations: Prisma Migrate를 사용하면 스키마의 변경 이력을 관리할 수 있어 쉽게 마이그레이션을 수행할 수 있습니다.
• 생태계 통합: GraphQL, REST API와 쉽게 통합되며, 다양한 데이터베이스에 대한 지원을 제공합니다.

2. Nest.js 소개

Nest.js는 현대적인 Node.js 서버 측 애플리케이션을 만들기 위한 강력한 프레임워크입니다. Angular에서 영감을 받아 모듈화와 의존성 주입을 통해 애플리케이션의 구조를 개선하는 데 중점을 둡니다. Nest.js는 Express.js와 Fastify를 기본적으로 지원하며, GraphQL, WebSocket, RESTful API 기능을 제공합니다.

2.1 Nest.js의 장점

• 모듈화: Nest.js는 모듈화를 통해 코드의 가독성과 재사용성을 향상시킵니다.
• 의존성 주입: 효율적인 의존성 주입 패턴을 통해 테스트와 유지보수가 용이합니다.
• 확장성: 다양한 라이브러리와 외부 모듈과 통합이 쉽습니다.
• 타입스크립트 지원: Nest.js는 TypeScript로 작성되어 타입 안전성을 제공합니다.

3. Nest.js와 Prisma 연동하기

이제 Nest.js와 Prisma를 함께 사용할 준비가 되었습니다. 다음 절차를 통해 프로젝트를 설정하고 데이터베이스와의 기본적인 상호작용을 구성해 보겠습니다.

3.1 프로젝트 셋업

1. Node.js와 Nest.js CLI를 설치합니다:

npm install -g @nestjs/cli

2. Nest.js 프로젝트를 생성합니다:

nest new prisma-nest-example

3. 생성된 프로젝트 폴더로 이동합니다:

cd prisma-nest-example

4. Prisma를 설치합니다:

npm install prisma --save-dev

npx prisma init

3.2 Prisma 스키마 정의

Prisma의 스키마 파일인 schema.prisma에서 데이터베이스 모델을 정의합니다. 이 예제에서는 간단한 사용자 모델을 만들어 보겠습니다:

model User {
  id        Int      @id @default(autoincrement())
  name      String
  email     String   @unique
  posts     Post[]
}

model Post {
  id        Int      @id @default(autoincrement())
  title     String
  content   String
  authorId  Int
  author    User     @relation(fields: [authorId], references: [id])
}

3.3 마이그레이션

다음으로 Prisma Migrate 기능을 사용하여 데이터베이스에 모델을 반영합니다:

npx prisma migrate dev --name init

이 명령어는 데이터베이스에 init이라는 이름으로 마이그레이션을 생성하고, 스키마를 반영합니다.

3.4 Prisma Client 생성

Prisma Client를 생성하여 데이터베이스와 상호작용할 수 있도록 설정합니다:

npx prisma generate

4. 서비스 및 컨트롤러 생성

Nest.js에서는 서비스와 컨트롤러를 생성하여 비즈니스 로직과 라우팅을 관리합니다. 이를 통해 데이터를 CRUD하는 API를 만들 수 있습니다.

4.1 사용자 서비스 생성

nest generate service users

생성된 users.service.ts 파일을 열고 다음과 같이 Prisma Client를 주입합니다:

import { Injectable } from '@nestjs/common';
import { PrismaService } from './prisma.service';
import { User, Post } from '@prisma/client';

@Injectable()
export class UsersService {
  constructor(private prisma: PrismaService) {}

  async createUser(data: { name: string; email: string }): Promise {
    return this.prisma.user.create({ data });
  }

  async getAllUsers(): Promise {
    return this.prisma.user.findMany();
  }

  // 추가적인 메서드들...
}

4.2 사용자 컨트롤러 생성

nest generate controller users

생성된 users.controller.ts 파일을 열고 다음과 같이 구현합니다:

import { Controller, Get, Post, Body } from '@nestjs/common';
import { UsersService } from './users.service';
import { User } from '@prisma/client';

@Controller('users')
export class UsersController {
  constructor(private readonly usersService: UsersService) {}

  @Post()
  async createUser(@Body() body: { name: string; email: string }): Promise {
    return this.usersService.createUser(body);
  }

  @Get()
  async getAllUsers(): Promise {
    return this.usersService.getAllUsers();
  }

  // 추가적인 핸들러들...
}

5. API 테스트

Nest.js를 실행하면 기본적으로 http://localhost:3000에서 API를 사용할 수 있습니다. Postman이나 다른 HTTP 클라이언트를 사용하여 사용자를 생성하고 조회해보세요.

5.1 사용자 생성

POST 요청을 http://localhost:3000/users에 보내어 사용자 데이터를 전송합니다.

5.2 모든 사용자 조회

GET 요청을 http://localhost:3000/users에 보내어 모든 사용자의 정보를 가져옵니다.

6. 데이터 모델링의 중요성

효율적인 데이터 모델링은 웹 애플리케이션이 성공적으로 기능하도록 보장하는 핵심 요소입니다. Prisma와 Nest.js를 사용하여 좋은 데이터 모델링을 구현하는 것은 프로젝트의 확장성과 성능을 높이는 데 기여합니다.

6.1 데이터 정규화

데이터 정규화는 데이터 중복을 줄이고 데이터 무결성을 유지하는 데 도움이 됩니다. 이를 통해 나중에 수정할 때 발생할 수 있는 오류를 줄일 수 있습니다.

6.2 관계 정의

데이터베이스에서의 관계 정의는 효율적인 쿼리를 가능하게 하며, 데이터 간의 상호작용을 쉽게 합니다. Prisma에서는 관계를 쉽게 정의할 수 있어 이러한 작업이 간편해집니다.

7. 결론

Nest.js와 Prisma의 조합은 모던 웹 애플리케이션 개발에 있어 매우 유용한 도구입니다. TypeScript의 이점을 활용하면서 효율적인 데이터베이스 관리와 데이터 모델링을 할 수 있게 해줍니다. 이 글에서는 기본적인 설정과 데이터 모델링 방법을 다루었지만, 실제 프로젝트에서는 더 많은 기능과 패턴을 적용할 수 있습니다. 이 프레임워크를 통해 여러분의 백엔드 개발에 많은 도움이 됐기를 바랍니다.

8. 참고 자료

• Prisma 공식 문서
• Nest.js 공식 문서
• TypeScript 공식 문서

웹 애플리케이션 개발에 있어 서버 사이드 렌더링(SSR)과 API의 효율적인 사용은 매우 중요한 요소입니다.
Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링을 지원하면서
뛰어난 사용자 경험을 제공하는 강력한 도구입니다. 한편, Nest.js는
효율적이고 확장 가능하며 쉽게 테스트할 수 있는 Node.js 웹 애플리케이션 프레임워크로 RESTful API를 구축하는 데에 적합합니다.
본 강좌에서는 Next.js와 Nest.js를 연동하여 데이터를 가져오는 방법, 특히 getServerSideProps와 SWR을 사용하는 방법에 대해 자세히 알아보겠습니다.

1. Nest.js API 서버 설정하기

먼저, Nest.js로 간단한 API 서버를 설정해 보겠습니다. 새로운 Nest.js 프로젝트를 생성하기 위해 CLI를 사용할 수 있습니다.
설치가 되어 있지 않다면, 아래 명령어로 Nest CLI를 설치합니다.

npm install -g @nestjs/cli

그 후, 새로운 Nest.js 프로젝트를 생성합니다.

nest new blog-api

생성된 프로젝트 디렉토리로 이동하여 RESTful API를 구현하기 위해 새로운 모듈과 컨트롤러를 추가합니다:

nest generate module posts

nest generate controller posts

다음으로, PostsController에 GET 요청을 처리하는 메서드를 추가하겠습니다. src/posts/posts.controller.ts 파일을 열어
다음과 같이 구현합니다.

import { Controller, Get } from '@nestjs/common';

@Controller('posts')
export class PostsController {
    @Get()
    findAll() {
        return [
            { id: 1, title: '첫 번째 게시글', content: '이것은 첫 번째 게시글의 내용입니다.' },
            { id: 2, title: '두 번째 게시글', content: '이것은 두 번째 게시글의 내용입니다.' },
        ];
    }
}
        

이제 Nest.js 서버를 실행하여 API를 확인해 보겠습니다.

npm run start

기본적으로 localhost:3000/posts에서 게시글을 불러올 수 있는 API가 준비되었습니다.

2. Next.js 설정하기

이제 Next.js 프로젝트를 생성하여 Nest.js API에서 데이터를 가져오는 방법을 알아보겠습니다.
새로운 Next.js 프로젝트를 생성하기 위해 아래 명령어를 사용합니다.

npx create-next-app blog-client

프로젝트 디렉토리로 이동 후, 필요한 패키지를 설치합니다.

cd blog-client

npm install swr

Next.js 페이지에서 API 데이터를 가져오는 두 가지 방법을 살펴보겠습니다: getServerSideProps와 SWR.

3. getServerSideProps를 이용한 데이터 가져오기

getServerSideProps는 Next.js에서 페이지가 요청될 때마다 서버에서 데이터를 가져오는 메서드입니다.
이 메서드는 페이지 컴포넌트의 프로퍼티에 데이터를 주입할 수 있게 해줍니다.

export async function getServerSideProps() {
    const res = await fetch('http://localhost:3000/posts');
    const posts = await res.json();

    return {
        props: {
            posts,
        },
    };
}
        

위와 같은 방식으로 데이터를 가져온 후, 페이지에서 아래와 같이 사용할 수 있습니다.

import React from 'react';

const PostsPage = ({ posts }) => {
    return (
        

            
게시글 목록
            

                {posts.map(post => (
                    
{post.title}
                ))}
            
        
    );
};

export default PostsPage;
        

이 코드는 Nest API로부터 가져온 게시글 목록을 렌더링합니다. getServerSideProps를 사용하는 경우,
페이지가 요청될 때마다 항상 최신 데이터를 가져옵니다.

4. SWR을 사용하여 데이터 가져오기

SWR은 데이터 패칭을 위한 React 훅으로, 다양한 데이터 요청을 캐싱하여 더 나은 성능과 사용자 경험을 제공합니다.
SWR은 클라이언트에서 데이터를 패칭할 때 주기적으로 데이터를 업데이트하고, 재검증하는 기능을 제공합니다.

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then(res => res.json());

const PostsPage = () => {
    const { data, error } = useSWR('http://localhost:3000/posts', fetcher);

    if (error) return 
에러 발생
;
    if (!data) return 
로딩 중...
;

    return (
        

            
게시글 목록
            

                {data.map(post => (
                    
{post.title}
                ))}
            
        
    );
};

export default PostsPage;
        

위 코드에서는 useSWR를 사용하여 데이터를 가져오고, 로딩 중일 때와 에러 발생 시의 상태를 처리합니다.
이렇게 하면 사용자에게 더 나은 경험을 제공할 수 있습니다.

5. 결론

본 강좌에서는 Nest.js로 API 서버를 구축하고, Next.js에서 getServerSideProps와 SWR을 통해 API 데이터를 가져오는 방법을 살펴보았습니다.
Nest.js와 Next.js를 조합하여 웹 애플리케이션을 효율적으로 개발하는 방법에 대해 알아보았으며, 각각의 방법이 가지는 특성과 사용 사례를 이해할 수 있었습니다.
이러한 기술들은 웹 애플리케이션의 성능과 사용자 경험을 획기적으로 개선하는 데에 기여할 수 있습니다.

이를 통해 원하는 데이터 패칭 방식과 사용자 경험을 고려하여 적절한 방법을 선택하면 좋을 것입니다.
Next.js와 Nest.js의 조합은 개발자에게 강력한 도구가 되어 주며, 더 나은 웹 애플리케이션을 만들기 위한 기반이 될 것입니다.