37.백엔드에 Prisma를 사용한 데이터베이스 관리, Nest.js와 Prisma를 사용한 데이터 모델링

현대의 웹 애플리케이션에서 데이터베이스 관리와 데이터 모델링은 매우 중요한 부분입니다. 특히, Nest.jsPrisma를 조합하면 효율적인 백엔드 개발과 데이터 관리를 할 수 있습니다. 이 글에서는 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를 설치합니다:
  2. npm install -g @nestjs/cli
  3. Nest.js 프로젝트를 생성합니다:
  4. nest new prisma-nest-example
  5. 생성된 프로젝트 폴더로 이동합니다:
  6. cd prisma-nest-example
  7. Prisma를 설치합니다:
  8. 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. 참고 자료

23.SEO 최적화 및 Meta 설정하기, 게시글별 메타데이터 설정하기 (제목, 설명, 키워드 등)

게시글별 메타데이터 설정하기 (제목, 설명, 키워드 등)

1. SEO란 무엇인가?

SEO(검색 엔진 최적화)는 검색 엔진에서 웹사이트의 가시성을 높이는 다양한 기술적 및 비기술적 방법을 의미합니다. 이를 통해 웹사이트 방문자 수를 증가시키고, 콘텐츠의 가치를 극대화할 수 있습니다. 구글, 네이버 등 여러 검색 엔진은 사용자 쿼리와 관련된 가장 적합한 콘텐츠를 검색 결과에 노출시킵니다. 따라서 SEO는 웹사이트의 성공적인 운영에 필수적인 요소입니다.

검색 엔진은 알고리즘을 기반으로 웹페이지의 품질과 관련성을 평가합니다. 따라서 올바른 SEO 전략을 통해 웹사이트의 콘텐츠를 최적화하는 것은 매우 중요한 작업입니다.

2. SEO 최적화의 기초

SEO 최적화는 여러 요소로 구성되어 있으며, 그 중 메타 태그는 중요한 위치를 차지합니다. 메타 태그는 검색 엔진이 페이지의 내용을 이해하고 분류하는 데 필요한 정보를 제공합니다. 특히, 다음과 같은 메타 태그가 있습니다.

  • title 태그: 페이지의 제목을 정의합니다. 검색 결과에서 페이지의 가장 중요한 정보로 나타나며, 클릭률(CTR)에 큰 영향을 미칩니다.
  • meta description 태그: 페이지의 내용을 요약합니다. 검색 결과에서 제목과 함께 표시되며, 사용자가 클릭하도록 유도하는 데 중요한 역할을 합니다.
  • meta keywords 태그: 페이지와 관련된 키워드를 설정합니다. 현재는 대부분의 검색 엔진이 이 태그를 중요하게 여기지 않지만, 과거에는 SEO에 많은 영향을 미쳤습니다.

3. Nest.js와 Next.js에서 SEO 최적화하기

Nest.js는 백엔드 프레임워크로, RESTful API를 설계하는 데 많이 사용됩니다. 반면 Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR)을 지원하여 SEO 최적화에 유리합니다. 둘을 함께 사용할 경우 SEO 최적화를 위한 강력한 솔루션을 제공할 수 있습니다.

예를 들어, Next.js를 사용하여 페이지를 렌더링할 때, Head 컴포넌트를 통해 메타 태그를 설정할 수 있습니다.


{`import Head from 'next/head';
const MyPage = () => {
return (


제목


안녕하세요! 이 페이지는 SEO 최적화 예제입니다.

);
};
export default MyPage;`}

위 코드처럼 Next.js의 Head 컴포넌트를 활용하여 각 페이지의 메타데이터를 손쉽게 설정할 수 있습니다. 이를 통해 검색 엔진은 각 페이지의 내용을 올바르게 이해하고 처리하게 됩니다.

4. 게시글별 메타데이터 설정하기

블로그 게시글에 대한 메타데이터는 유동적으로 설정되며, 각 게시글마다 특화된 내용으로 구성됩니다. 이를 통해 검색 엔진이 각 게시글의 주제를 명확히 이해하고 인덱싱할 수 있도록 돕습니다.

4.1. 제목 설정하기

Strong한 키워드를 포함한 제목은 검색 결과에서 클릭률을 높이는 데 도움이 됩니다. 키워드는 게시글의 주제를 반영하며, 사용자가 검색할 가능성이 있는 내용으로 설정해야 합니다.

4.2. 설명 설정하기

설명은 검색 엔진 결과에서 사용자가 가장 먼저 보게 되는 부분으로, 매력적이고 persuasive해야 합니다. 여기에 키워드를 자연스럽게 포함시켜야 하며, 너무 길지 않게 간결하게 구성하는 것이 좋습니다.

4.3. 키워드 설정하기

키워드는 게시글에서 가장 중요한 내용이나 주제를 단어로 표현합니다. 과도한 키워드 사용은 오히려 부정적인 영향을 미칠 수 있으니 자연스럽게 작성하는 것이 중요합니다.

5. SEO 최적화를 위한 기술적 요소

검색 엔진은 여러 가지 기술적 요인을 통해 웹페이지의 품질을 평가합니다. 다음과 같은 요소들이 SEO에 영향을 줄 수 있습니다.

  • 사이트 속도: 페이지 로딩 속도가 빠를수록 사용자 경험이 개선되며, 검색 엔진에서도 긍정적으로 평가합니다.
  • 모바일 최적화: 점점 더 많은 사용자가 모바일 디바이스를 통해 웹사이트를 탐색하기 때문에, 모바일 최적화는 필수적입니다.
  • URL 구조: 간결하고 이해하기 쉬운 URL 구조는 SEO에 긍정적인 영향을 미칩니다. 키워드가 포함된 URL은 더욱 효과적입니다.
  • SSL 보안 인증: HTTPS 프로토콜을 사용하는 웹사이트는 검색 엔진에서 신뢰받으며, 이 또한 랭킹에 긍정적 영향을 미칩니다.

6. 결과 측정 및 개선하기

SEO 최적화는 일회성이 아니라 지속적으로 관리해야 하는 작업입니다. 구글 서치 콘솔, 구글 애널리틱스 등의 도구를 통해 웹사이트의 트래픽, 사용자 행동을 분석하고, 이를 바탕으로 지속적인 개선이 필요합니다.

게시글의 성과를 분석하여 어떤 키워드가 가장 효과적이었는지, 어떤 페이지가 많은 트래픽을 얻는지를 분석합니다. 이를 통해 더 나은 콘텐츠 전략을 수립할 수 있습니다.

7. 결론

SEO 최적화는 웹사이트의 성공에 결정적인 요소입니다. 특히 Nest.js와 Next.js를 함께 활용하면 서버 사이드 렌더링을 통해 SEO 최적화의 이점을 극대화할 수 있습니다. 메타데이터 설정이란 각 페이지의 제목, 설명, 키워드를 적절히 설정하여 검색 엔진과 사용자 모두에게 유용한 정보를 제공하는 과정입니다. 이처럼 SEO 최적화 작업을 지속적으로 수행하여 성과를 분석하고 개선해 나간다면 블로그의 트래픽을 증가시키고 더 많은 독자와 소통할 수 있을 것입니다.

30.이미지 업로드 및 미디어 관리, Next.js에서 이미지 최적화 처리 및 미디어 관리

모던 웹 애플리케이션에서 이미지 관리 및 최적화는 성능과 사용자 경험에 중요한 요소입니다. 특히 Next.js는 이미지 최적화를 지원하는 강력한 기능을 가지고 있어, 웹 사이트의 로딩 속도를 개선하고 사용자 친화적인 경험을 제공합니다. 이 글에서는 Next.js에서 이미지 업로드 및 미디어 관리 방법, 이미지 최적화 처리에 대해 자세히 설명하겠습니다.

1. 이미지 업로드 및 미디어 관리

이미지 업로드는 사용자가 파일을 선택하고, 서버로 전송하여 데이터를 저장하는 과정을 포함합니다. 이 절에서는 Next.js 애플리케이션에서 이미지를 업로드하고 관리하는 방법을 살펴봅니다.

1.1. 이미지 업로드를 위한 API 개발

Next.js에서는 API 라우트를 생성하여 백엔드 기능을 손쉽게 구현할 수 있습니다. 이미지 업로드를 위해 multer와 같은 미들웨어를 사용할 수 있습니다. multer는 Node.js에서 파일 업로드를 다루기 위한 미들웨어입니다.

npm install multer

이제 API 라우트를 생성하고 이미지를 업로드할 수 있는 엔드포인트를 만들겠습니다. pages/api/upload.js 파일을 생성하고 다음 코드를 추가합니다.

import nextConnect from 'next-connect';
import multer from 'multer';

const upload = multer({
    storage: multer.memoryStorage(), // 메모리 스토리지 사용
});

const handler = nextConnect();

handler.use(upload.single('image')) // 'image' 필드로 단일 파일 업로드
    .post((req, res) => {
        // 파일 업로드 처리 로직
        const file = req.file;
        if (!file) {
            return res.status(400).json({ error: '이미지를 업로드 해주세요.' });
        }
        // 파일 처리 로직
        res.status(200).json({ message: '이미지 업로드 성공', file });
    });

export default handler;

위의 코드에서 multer.memoryStorage()를 사용하여 메모리에서 직접 파일을 받습니다. 이를 통해 받은 파일을 즉시 처리할 수 있습니다.

1.2. 클라이언트 측 이미지 업로드

이제 클라이언트 측에서 이미지를 업로드하는 컴포넌트를 만듭니다. components/ImageUpload.js 파일을 생성하고 다음 코드를 추가합니다.

import { useState } from 'react';

const ImageUpload = () => {
    const [image, setImage] = useState(null);

    const handleChange = (e) => {
        setImage(e.target.files[0]);
    };

    const handleSubmit = async (e) => {
        e.preventDefault();
        const formData = new FormData();
        formData.append('image', image);

        const res = await fetch('/api/upload', {
            method: 'POST',
            body: formData,
        });
        const data = await res.json();
        console.log(data);
    };

    return (
        
); }; export default ImageUpload;

위의 코드는 사용자가 이미지를 선택하고, 폼을 제출하면 API 엔드포인트에 이미지를 전송하는 기능을 제공합니다.

2. Next.js의 이미지 최적화

Next.js는 이미지 최적화를 돕는 next/image 컴포넌트를 제공합니다. 이 컴포넌트를 사용하면 이미지를 자동으로 최적화하고, 다양한 사이즈로 제공할 수 있습니다.

2.1. Next.js의 Image 컴포넌트 사용하기

먼저, next/image를 설치해야 합니다. Next.js 10 버전 이상을 사용하고 있다면 별도의 설치가 필요하지 않습니다. 아래의 코드를 통해 이미지를 표시할 수 있습니다.

import Image from 'next/image';

const MyImage = () => {
    return (
        설명
    );
};

export default MyImage;

위의 코드에서 src 속성에는 로컬 또는 온라인 이미지 경로를 지정합니다. widthheight 속성은 이미지의 비율을 유지하면서 최적화를 도와줍니다.

2.2. 이미지 최적화의 이점

Next.js의 이미지 최적화 기능을 사용하면 다음과 같은 이점이 있습니다:

  • 자동 로딩 최적화: 뷰포트에 있는 이미지만 로드하여 초기 로딩 속도를 빠르게 합니다.
  • 포맷 변환: 브라우저에 따라 최적의 이미지 포맷으로 자동 변환합니다 (예: WebP).
  • 반응형 이미지: 다양한 화면 크기에 맞춰 이미지를 제공하므로 성능이 향상됩니다.

3. 이미지 최적화 전략

Next.js를 사용하면서 이미지 최적화를 극대화하기 위한 전략을 알아보겠습니다.

3.1. 크기 조정 및 포맷

디바이스의 해상도에 따라 다른 크기의 이미지를 제공해야 합니다. 또한, WebP와 같은 최신 이미지 포맷을 사용하면 성능을 더욱 개선할 수 있습니다. Next.js는 자동으로 적절한 포맷과 크기로 이미지를 전송해줍니다.

3.2. CDN 사용

이미지를 빠르게 로드하기 위해 CDN(콘텐츠 전송 네트워크)을 사용하는 것이 좋습니다. Next.js는 next/image 컴포넌트와 함께 CDN과 쉽게 통합할 수 있습니다.

3.3. Lazy Loading

사용자가 스크롤할 때 이미지가 로드되도록 설정하여 초기 페이지 로딩 속도를 높일 수 있습니다. next/image는 기본적으로 lazy loading이 활성화되어 있습니다.

4. 이미지 관리 및 저장

이미지 업로드 후, 해당 이미지를 서버나 클라우드 스토리지에 저장하여 관리해야 합니다. AWS S3와 같은 클라우드 저장소를 사용하면 안정적으로 이미지를 보관할 수 있습니다.

4.1. AWS S3에 이미지 저장하기

AWS S3를 사용하여 이미지 파일을 저장하는 예제를 살펴보겠습니다. multer를 사용하여 이미지를 받고 S3에 전송하는 방식입니다.

import AWS from 'aws-sdk';

const s3 = new AWS.S3({
    accessKeyId: process.env.AWS_ACCESS_KEY_ID,
    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
});

const uploadToS3 = (file) => {
    const params = {
        Bucket: process.env.AWS_BUCKET_NAME,
        Key: Date.now().toString() + file.originalname, // 파일 이름
        Body: file.buffer,
        ContentType: file.mimetype,
    };

    return s3.upload(params).promise();
};

handler.use(upload.single('image')).post(async (req, res) => {
    const file = req.file;
    if (!file) {
        return res.status(400).json({ error: '이미지를 업로드 해주세요.' });
    }
    try {
        const data = await uploadToS3(file);
        res.status(200).json({ message: '이미지 업로드 성공', url: data.Location });
    } catch (error) {
        res.status(500).json({ error: 'S3 업로드 실패', details: error });
    }
});

위의 코드에서는 AWS S3에 이미지를 업로드하는 함수를 정의하고, 성공적으로 업로드한 경우 S3의 이미지 URL을 클라이언트에 반환합니다.

5. 결론

Next.js를 사용하여 이미지 업로드 및 미디어 관리, 그리고 이미지 최적화 처리를 통해 보다 나은 웹 성능을 달성할 수 있습니다. 이 가이드를 통해 이미지 업로드 시스템을 구현하고, 최적화를 통해 사용자 경험을 개선하는 방법을 이해했기를 바랍니다.

더 많은 정보를 원하시면 Next.js 공식 문서와 AWS S3 문서를 참조하세요.

13.Next.js와 Nest.js 연동하여 데이터 가져오기, Next.js에서 API 데이터 가져오는 방법 (getServerSideProps, SWR)

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

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 데이터를 가져오는 두 가지 방법을 살펴보겠습니다: getServerSidePropsSWR.

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

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

39.백엔드에 Prisma를 사용한 데이터베이스 관리, Prisma의 Migrations와 CRUD 기능 활용

오늘날의 웹 애플리케이션 개발에서는 데이터베이스 관리와 유연한 백엔드 구축이 필수적입니다. 다양한 ORM(Object-Relational Mapping) 도구 중 하나인 Prisma는 Node.js 환경에서 데이터베이스를 손쉽게 관리할 수 있도록 해주는 훌륭한 도구입니다. 이번 강좌에서는 Prisma를 사용하여 백엔드를 구성하고, 데이터베이스 관리, Migrations, 그리고 CRUD(Create, Read, Update, Delete) 기능을 활용하는 방법에 대해 자세히 알아보겠습니다.

1. Prisma 소개

Prisma는 TypeScript와 Node.js 환경에서 사용되는 ORM으로, 관계형 데이터베이스와의 상호작용을 쉽게 도와줍니다. Prisma를 사용하면 SQL 쿼리를 작성하지 않고도 데이터베이스 모델을 정의하고 이를 기반으로 데이터베이스 작업을 수행할 수 있습니다. Prisma는 다음과 같은 장점을 제공합니다:

  • 유형 안전성(Type Safety): TypeScript의 강력한 타입 시스템을 기반으로 안전한 쿼리를 제공합니다.
  • Auto-completion: 개발자가 코드를 작성할 때 IDE에서 자동 완성 기능을 제공합니다.
  • 마이그레이션(Migration): 데이터베이스 스키마 변경을 쉽게 관리할 수 있는 강력한 마이그레이션 도구를 제공합니다.
  • 다양한 데이터베이스 지원: PostgreSQL, MySQL, SQLite, SQL Server 등 다양한 데이터베이스를 지원합니다.

2. Prisma 설치 및 초기 설정

Prisma를 설치하고 사용하기 위해, 먼저 Node.js와 npm이 설치되어 있어야 합니다. 아래 명령어를 통해 Prisma를 설치할 수 있습니다.

npm install prisma --save-dev

설치 후 Prisma의 초기 설정을 위해 다음 명령어를 실행합니다:

npx prisma init

이 명령어를 실행하면 프로젝트 루트에 Prisma 폴더와 schema.prisma 파일이 생성됩니다. schema.prisma 파일은 데이터베이스의 스키마를 정의하는 중요한 파일입니다.

3. 데이터베이스 연결 설정

이제 데이터베이스에 연결하기 위해 schema.prisma 파일을 설정합니다. 예를 들어 PostgreSQL을 사용할 경우, 아래와 같이 설정할 수 있습니다.


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

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

DATABASE_URL 환경 변수에는 PostgreSQL 데이터베이스의 연결 URL을 설정해야 합니다. 다음과 같은 형태가 됩니다:

DATABASE_URL="postgresql://username:password@localhost:5432/mydatabase"

4. Prisma Schema 정의

이제 데이터베이스 모델을 정의해야 합니다. 예를 들어 블로그 애플리케이션을 만든다고 가정해 보겠습니다. 아래는 사용자의 데이터 모델을 정의하는 예시입니다.


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
  published Boolean @default(false)
  authorId  Int
  author    User    @relation(fields: [authorId], references: [id])
}

5. Migrations 생성 및 실행

Prisma에서 데이터베이스 스키마를 변경하고 이를 데이터베이스에 적용하기 위해 Migrations를 사용합니다. Migrations를 생성하려면 아래 명령어를 입력합니다:

npx prisma migrate dev --name init

이 명령어는 데이터베이스에 초기 스키마를 반영하고, migrations 폴더에 관련 파일을 생성합니다. 이제 데이터베이스에 스키마가 적용되었으므로 Prisma Client를 사용하여 쿼리를 작성할 수 있습니다.

6. CRUD 기능 구현

이제 Prisma Client를 사용하여 CRUD 기능을 구현해보겠습니다. 아래 코드는 Node.js Express 서버에서 CRUD API를 구현하는 예시입니다.


const express = require('express');
const { PrismaClient } = require('@prisma/client');

const app = express();
const prisma = new PrismaClient();

app.use(express.json());

// Create User
app.post('/users', async (req, res) => {
  const { name, email } = req.body;
  const user = await prisma.user.create({
    data: {
      name,
      email,
    },
  });
  res.json(user);
});

// Read Users
app.get('/users', async (req, res) => {
  const users = await prisma.user.findMany();
  res.json(users);
});

// Update User
app.put('/users/:id', async (req, res) => {
  const { id } = req.params;
  const { name, email } = req.body;
  const user = await prisma.user.update({
    where: { id: Number(id) },
    data: { name, email },
  });
  res.json(user);
});

// Delete User
app.delete('/users/:id', async (req, res) => {
  const { id } = req.params;
  await prisma.user.delete({ where: { id: Number(id) } });
  res.json({ message: 'User deleted' });
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

7. Prisma Client 사용 예시

위의 API 예시에서 사용한 Prisma Client는 데이터베이스 상호작용을 매우 직관적으로 도와줍니다. 각 메서드는 CRUD 연산을 쉽게 수행할 수 있도록 설계되어 있습니다. 여기서는 각 연산에 대해 설명하겠습니다.

  • Create: 사용자를 생성하는 prisma.user.create 메서드를 사용하여 새 사용자 레코드를 추가합니다.
  • Read: prisma.user.findMany를 사용하여 모든 사용자 레코드를 조회합니다.
  • Update: prisma.user.update 메서드를 사용하여 특정 사용자의 정보를 업데이트합니다. 이때 사용자 ID를 통해 정확한 레코드를 지정합니다.
  • Delete: prisma.user.delete 메서드를 사용하여 특정 사용자를 삭제합니다.

8. Prisma의 Migrations 활용

Prisma에서 Migrations은 데이터베이스 스키마의 버전을 관리할 수 있도록 해줍니다. 이는 여러 개발자가 동시에 작업할 때 데이터베이스에 일관성을 유지하게 해 줍니다. 데이터베이스 스키마에 변경 사항이 있을 경우 항상 새로운 Migration을 생성하고 실행하는 것이 좋습니다.

예를 들어, 새로운 Post 모델을 추가하고 이를 데이터베이스에 반영하고 싶다면, 아래와 같은 단계를 거치게 됩니다:


// 기존 schema.prisma에 Post 모델 추가
model Post {
  id        Int     @id @default(autoincrement())
  title     String
  content   String
  published Boolean @default(false)
  authorId  Int
  author    User    @relation(fields: [authorId], references: [id])
}

// Migration 생성 및 실행
npx prisma migrate dev --name add-post-model

9. 결론

이번 강좌를 통해 Prisma를 사용하여 백엔드에서 데이터베이스를 쉽고 빠르게 관리할 수 있는 방법을 배웠습니다. Prisma의 강력한 기능을 활용하면 ORM의 복잡성을 줄이고, 데이터베이스 작업을 더욱 직관적으로 할 수 있습니다. Migrations는 데이터베이스 스키마 변경을 효율적으로 관리할 수 있도록 도와줍니다. CRUD 기능을 구현하는 과정을 통해 Prisma Client의 편리함도 경험하셨기를 바랍니다.

이와 같은 방법으로 모든 데이터베이스 관련 작업을 쉽게 수행할 수 있는 Prisma를 이용하여 반응형 웹 애플리케이션의 백엔드를 더욱 견고하게 구축해 보세요. 향후에도 Prisma와 관련된 더 많은 주제를 다뤄보도록 하겠습니다.