[React] 간단한 성냥퍼즐 웹 서비스 만들기 10일차 (Nest.js)

💡 핵심 기능 구현(완료)

• 성냥개비 드래그 & 드롭 (완료)
• 성냥개비 회전 (완료)
• Match 컴포넌트 분리, History 기능 (완료)
• Undo, Redo, Remove (완료)
• 게임타입 및 횟수 제한 (완료)
• 퍼즐 정답 검증 시스템 (완료)

---

 

UI와 기타 수정해야 할 부분은 많지만 빠르게 서비스 완성을 목표로 Nest를 사용해 backend를 구현해 보기로 하였다.

그럼 간단하게 NestJS에 대해서 알아보는 것으로 시작해 보자

 

---

개인적인 공부를 위해 작성하는 블로그입니다. 혹시라도 잘못되거나 부족한 부분이 있다면 댓글로 알려주시면 감사하겠습니다.

 

 

공식문서의 소개에 따르면 NestJS는 효율적이고 확장 가능한 Node.js server-side applications을 구축하기 위한 프레임워크라고 한다.

기본적으로 TypeScript를 지원하며 내부적으로 Express를 사용하고 있고 선택적으로 Fastify도 사용할 수 있다.

요약하자면 NestJS는 Express보다 더 체계적이고 유지보수가 쉬운 프레임워크이다. 모듈 기반 구조로 구성되어 있어 큰 프로젝트도 관리하기 편하며, 데코레이터를 사용해 직관적으로 코드를 작성할 수 있다고 한다.

 

💁🏻 프로젝트 세팅

공식 문서에 나와있는 방법으로 설치해 주었다.

$ npm i -g @nestjs/cli
$ nest new matchstick-backend --strict

설치된 프로젝트 src 폴더 안을 살펴보면 5개의 초기 세팅된 ts 파일이 있는데 하나씩 살펴보면

 

1. main.ts : NestJS 애플리케이션의 진입점 파일로, NestFactory를 사용하여 애플리케이션을 초기화하고 HTTP 서버를 생성하여 지정된 소켓에 바인딩합니다. 서버가 시작되기 전에 필요한 설정(서버 포트 설정, 미들웨어, 전역 필터, 전역 파이프 등)을 수행한다.

2. service.ts : 비즈니스 로직을 처리하는 파일이다. 데이터처리, 외부 API 호출, 데이터베이스 접근 등의 작업을 수행한다.

3. module.ts : NestJS의 핵심 구조 단위로 애플리케이션의 구성 요소를 정의하고 관리하는 파일이다. 

3. controller.ts : HTTP 요청(GET, POST, PUT, DELETE 등)에 따라 적절한 서비스를 호출하고 결과를 반환하는 역할을 수행한다.

4. controller.spec.ts : 컨트롤러를 테스트하기 위한 파일로 Jest를 사용하여 컨트롤러의 동작을 단위 테스트하는 데 사용된다.

 

nest에 제공하는 CRUD generator를 사용해 puzzles에 대한 리소스를 만들어보자

nest generate res puzzles

다음 명령을 입력하면 아래와 같이 나오는데 REST API로 만들 것이기 때문에 선택해 주고 CRUD entry points를 만들 것이라고 해주면 끝난다.

 

테스트를 위해 우선 src/puzzles/dto/create-puzzle.dto.ts를 다음과 같이 작성해 주었다.

export class CreatePuzzleDto {
  title: string;
  gameType: string;
  limit: number;
}

 

puzzles.controller.ts에서  /puzzles에 대한 CRUD를 구성해 주었다 (거의 다 생성되어 있어 부분적으로 수정)

import { Controller, Get, Post, Body, Patch, Param, Delete } from '@nestjs/common';
import { PuzzlesService } from './puzzles.service';
import { CreatePuzzleDto } from './dto/create-puzzle.dto';
import { UpdatePuzzleDto } from './dto/update-puzzle.dto';

@Controller('puzzles')
export class PuzzlesController {
  constructor(private readonly puzzlesService: PuzzlesService) {}

  @Post()
  create(@Body() createPuzzleDto: CreatePuzzleDto) {
    return this.puzzlesService.create(createPuzzleDto);
  }

  @Get()
  findAll() {
    return this.puzzlesService.findAll();
  }

  @Get(':id')
  findOne(@Param('id') id: string) {
    return this.puzzlesService.findOne(+id);
  }

  @Post(':id')
  update(@Param('id') id: string, @Body() updatePuzzleDto: UpdatePuzzleDto) {
    return this.puzzlesService.update(+id, updatePuzzleDto);
  }

  @Delete(':id')
  remove(@Param('id') id: string) {
    return this.puzzlesService.remove(+id);
  }
}

service.ts에서 create시 해당 데이터의 타이틀, 아이디, 게임타입을 응답하도록 바꾸고 postman으로 테스트해 보았다.

import { Injectable } from '@nestjs/common';
import { CreatePuzzleDto } from './dto/create-puzzle.dto';
import { UpdatePuzzleDto } from './dto/update-puzzle.dto';

@Injectable()
export class PuzzlesService {
  create(createPuzzleDto: CreatePuzzleDto) {
    return `This action adds a new puzzle-\n tittle: ${createPuzzleDto.title}(${createPuzzleDto.id}) type: ${createPuzzleDto.gameType}`;
  }

  findAll() {
    return `This action returns all puzzles`;
  }

  findOne(id: number) {
    return `This action returns a #${id} puzzle`;
  }

  update(id: number, updatePuzzleDto: UpdatePuzzleDto) {
    return `This action updates a #${id} puzzle`;
  }

  remove(id: number) {
    return `This action removes a #${id} puzzle`;
  }
}

 

오늘은 여기까지 하고 다음에는 Mysql설치와 prisma로 nestjs 설정하는걸 해봐야겠다.

 

 

++

오늘 내용이 너무 부족한 것 같아. 추가적으로 작성해봤다.

💁🏻 DTO 란?

DTO는 Data Transfer Object의 약자로, 데이터를 전달하기 위한 객체를 의미하고 주로 서버와 클라이언트 간 데이터 전송에 사용된다.

NestJS에서는 class-validator와 같은 라이브러리를 통해 다음과 같이 DTO를 기반으로 유효성 검사를 수행한다.

import { IsString, IsNumber } from 'class-validator';

export class CreatePuzzleDto {
  @IsString()
  title: string;

  @IsString()
  gameType: string;

  @IsNumber()
  limit: number;
}

 

👨🏻‍💻 엔티티(Entity) 란?

엔티티는 데이터베이스 테이블과 객체(object)를 매핑하기 위해 사용되는 클래스로 주로 ORM 라이프러리와 함께 사용된다.

 

엔티티와 DTO차이

엔티티(Entity)	DTO(Data Transfer Object)
데이터베이스 테이블과 매핑	클라이언트-서버 간 데이터 전송 객체
데이터베이스 작업을 위한 구조 정의	요청/응답 데이터의 구조 정의
영속성 있는 데이터(저장/조회 가능)	일시적인 데이터(요청 처리 후 사라짐)
TypeORM이나 Prisma와 같은 ORM 사용	class-validator와 같은 라이브러리와 함께 사용