먼저 번들링 툴은 vite웹팩을 사용해서 구성했고 DB는 mysql을 사용했습니다
프론트엔드 기준에서 보자면 백엔드도 결국 db랑의 연동과 서버를 구성할뿐 코드를 빌드하고 배포하는 점에선 나름 구조는 동일합니다
프론트엔드 ➡ React // 백엔드 ➡ Nest.js / Java Spring
웹팩 ➡ Vite // 프론트 백 동일하게 사용
DB 연동 ➡ mysql
ORM ➡ Prisma (SQL Simplification)
-> 구조에서 이같은 차이점이 있으며, 사용하게될 스택입니다.
데이터베이스는 구조화된 데이터의 집합을 효율적으로 저장, 관리, 검색할 수 있는 시스템입니다. 다양한 유형의 데이터베이스가 있으며, 각각의 용도와 환경에 맞게 설계되었습니다. 데이터베이스는 일반적으로 데이터베이스 관리 시스템(DBMS)을 통해 관리됩니다.
-> 온라인 쇼핑몰의 고객 정보 관리
{
"_id": "507f191e810c19729de860ea",
"name": "홍길동",
"email": "hong@example.com",
"addresses": [
{"type": "home", "address": "서울시 강남구"},
{"type": "work", "address": "서울시 서초구"}
]
}
ORM은 객체 관계 매핑을 의미합니다. 이는 객체와 관계형 데이터베이스의 테이블을 연결할수 있으며, ORM을 사용하면 데이터베이스의 데이터를 객체로 변환하여 개발자는 SQL 쿼리를 직접 작성하는 대신, 객체의 메소드와 속성을 사용하여 데이터를 관리할 수 있게 됩니다.
장점:
프리즈마는 최신 ORM 중 하나로, 타입스크립트 및 노드.js 환경에 최적화되어 있습니다. 안전한 타입 안전성과 함께, 데이터베이스 스키마를 기반으로 CRUD(Create, Read, Update, Delete) 작업을 위한 클라이언트 API를 자동으로 생성해줍니다. 프리즈마는 데이터 모델을 정의하는 스키마 파일을 통해 작동하며, 이를 통해 데이터베이스 마이그레이션과 실시간 데이터베이스 관리를 용이하게 합니다.
장점:
전통적인 SQL 쿼리 방식과 ORM, 특히 프리즈마의 가장 큰 차이점은 개발자가 데이터를 조작하는 방식에 있습니다.
SQL을 사용한 데이터 조회:
SELECT name, email FROM users WHERE id = 1;
// SQL 사용한 데이터 조회
const user = await prisma.user.findUnique({
where: { id: 1 },
select: { name: true, email: true },
// 프리즈마를 사용한 데이터 조회
});
SQL은 데이터베이스와 직접적으로 소통하기 위한 선언적 언어입니다. 반면, ORM과 프리즈마는 개발자가 객체 지향 프로그래밍 패러다임 내에서 데이터를 조작할 수 있도록 해주며, 이 과정에서 복잡한 SQL 쿼리 작성을 추상화합니다.
소개는 여기까지하고 실제 개발환경을 구성해보겠습니다
개발을 시작하기 전, Node.js가 설치되어 있어야 합니다.
Node.js는 JavaScript를 서버 사이드에서 실행할 수 있게 해주는 런타임 환경입니다. 설치 여부와 버전은 터미널에서 node -v 명령어로 확인해보시고 설치되어 있지않다면 설치하시면됩니다
Nest.js는 TypeScript 기반의 백엔드 프레임워크로, 효율적인 개발과 유지보수를 가능하게 합니다. 설치는 다음의 명령어로 간단히 할 수 있습니다.
npm i -g @nestjs/cli
//Nest.js CLI를 사용하여 새 프로젝트를 생성합니다. 다음 명령어를 실행하면 프로젝트 폴더가 생성됩니다.
nest new movie-selctor
//project-name 부분에는 원하는 프로젝트 이름을 입력합니다.
Prisma는 타입 안전성과 개발 편의성을 제공하는 ORM입니다. Prisma를 프로젝트에 추가하기 위해 다음 명령어를 실행합니다.
cd movie-selctor
npm install prisma --save-dev
npx prisma init
//이 명령어들은 Prisma를 설치하고, 프로젝트에 필요한 기본 설정 파일을 생성합니다.
prisma/.env 파일에서 데이터베이스 연결 설정을 합니다. 예를 들어, MySQL을 사용하는 경우, 다음과 같이 설정할 수 있습니다.
DATABASE_URL="mysql://username:password@localhost:3306/mydb"
여기서 username, password, mydb 부분을 실제 데이터베이스 정보로 변경합니다.
prisma/schema.prisma 파일에서 데이터 모델을 정의합니다. 예를 들어, 책 정보를 관리하는 Book 모델을 다음과 같이 생성할 수 있습니다.
model Book {
id Int @id @default(autoincrement())
title String
author String
year Int
}
//모델 정의 후, 데이터베이스에 반영하기 위해 마이그레이션을 실행합니다.
npx prisma migrate dev --name init
이 명령어는 정의된 스키마를 바탕으로 데이터베이스 테이블을 생성합니다.
Nest.js는 모듈, 컨트롤러, 서비스의 구조로 애플리케이션을 구성합니다. 먼저, Book에 대한 이 세 가지 요소를 생성해보겠습니다.
nest g module book
nest g controller book
nest g service book
//위 명령어는 각각 Book 모듈, 컨트롤러, 서비스를 생성합니다. 이 구조를 통해 코드를 체계적으로 관리할 수 있습니다.
Book 모델을 다루기 위해, Prisma 클라이언트를 서비스에 통합합니다. 먼저, Prisma 서비스 클래스를 생성합니다.
// prisma.service.ts
import { Injectable } from '@nestjs/common';
import { PrismaClient } from '@prisma/client';
@Injectable()
export class PrismaService extends PrismaClient {
constructor() {
super();
}
}
//
이제 생성된 PrismaService를 BookService에 주입합니다.
// book.service.ts
import { Injectable } from '@nestjs/common';
import { PrismaService } from './prisma.service';
@Injectable()
export class BookService {
constructor(private prisma: PrismaService) {}
// 책 정보 조회
async findAll() {
return this.prisma.book.findMany();
}
// 책 정보 추가
async create(data: { title: string; author: string; year: number }) {
return this.prisma.book.create({ data });
}
}
서비스에서 정의한 기능을 외부에 노출하기 위해 컨트롤러를 구현합니다.
// book.controller.ts
import { Controller, Get, Post, Body } from '@nestjs/common';
import { BookService } from './book.service';
@Controller('books')
export class BookController {
constructor(private readonly bookService: BookService) {}
@Get()
findAll() {
return this.bookService.findAll();
}
@Post()
create(@Body() bookData: { title: string; author: string; year: number }) {
return this.bookService.create(bookData);
}
}
//이 컨트롤러는 /books 엔드포인트에서 GET 요청을 통해 모든 책 정보를 조회하고, POST 요청을 통해 새로운 책 정보를 추가하는 기능을 제공합니다.
Nest.js와 Prisma를 활용하여 Book 모델 기반의 RESTful API 엔드포인트를 성공적으로 만들었습니다. 엔드포인트 /boos으로 진입가능하며 포스트맨 또는 브라우저에서 get을 통해 불러올수있고 Post를 사용하면 값을 추가할수있습니다.