Nest.js MVC 패턴 디렉토리 구조와 TypeORM 없이 mysql 연결해보기

1. Nest.js, MySQL 사용해서 MVC 패턴 구조 짜기
2. MVC 패턴
3. DTO
4. 디렉토리 구조

기존까지는 nest.js의 구조에 맞춰 아키텍처 신경 안쓰고 구현에만 신경 썼었는데 지금 회사에서 요구하는 아키텍처는 mvc 패턴이었고, TypeORM을 안써서 orm 없이 어떻게 mysql 연결할지부터 막막했다.

1. Nest.js, MySQL 사용해서 MVC 패턴 구조 짜기

- nestjs mvc 패턴 문서를 보니 왜 뷰단만 연결해주고 마는건데..(내가 궁금한건 model인디)

- 일단 참고해서 디렉토리를 구성했고 model은 빼고 service 파일 부분에 model이 담당하는 기능들을 다 추가해주었다.

- entity(typeorm 방식)는 사용하지 않았다.

- 뷰 템플릿은 ejs를 사용했다.

- fastify 사용한 부분만 있어서 다른 곳에서도 찾아봤는데 제일 도움 되었던건 이 유튜브 영상이었다.

https://youtu.be/2h5NSwZ6neA?si=ZeQfCHsLiZU2PCfJ

2. MVC 패턴

Model

- 데이터 가공 담당

View

- 사용자에게 보여지는 부분

Controller

- Model과 View를 이어주는 연결다리 역할

3. DTO

- 순수하게 데이터 전달만을 담당하는 객체

4. 디렉토리 구조

DTO(데이터 전달 객체)

- 간단하게 name, email, password만 주고 받을거다.

export class CreateUserDto {
  name: string;
  email: string;
  password: string;
}

Controller

/user/create	유저 생성
/user/all	유저 전체 조회
/user/find	특정 유저 조회(이메일 사용)

import { Controller, Get, Post, Body } from '@nestjs/common';
import { CreateUserDto } from './dto/create-user.dto';
import { UserService } from './user.service';

@Controller('user')
export class UserController {
  constructor(private readonly userService: UserService) {}

  // 유저 생성
  @Post('create')
  async create(@Body() createUserDto: CreateUserDto) {
    return await this.userService.create(createUserDto);
  }

  // 유저 전체 조회
  @Get('all')
  async findAll() {
    const users = await this.userService.findAll();
    return { users };
  }

  // 특정 유저 조회(이메일 사용)
  @Post('find')
  async findOne(@Body() data: object) {
    const email = JSON.stringify(Object.values(data)[0]);
    const user = await this.userService.findOneByEmail(email);
    return { user };
  }
}

Model, Service

- typeorm을 쓰지 않고 mysql 연결 및 사용해보는게 여러 목적중 하나였다.

- 가장 도움이 됐던 글은 공식문서였다.

https://sidorares.github.io/node-mysql2/docs/documentation/typescript-examples

Using MySQL2 with TypeScript | Quickstart

Installation

sidorares.github.io

import { Injectable } from '@nestjs/common';
import { CreateUserDto } from './dto/create-user.dto';
import { ConnectionOptions } from 'mysql2';

// mysql 연결
const mysql = require('mysql2/promise');
const access: ConnectionOptions = {
  host: '...',
  user: '...',
  password: '...',
  database: '...',
  port: 3306,
};

@Injectable()
export class UserService {
  // 유저 등록
  async create(createUserDto: CreateUserDto) {
    try {
      const { name, email, password } = createUserDto;
      const conn = mysql.createPool(access);
      const sql =
        'INSERT INTO `user`(`name`, `email`, `password`) VALUES (?, ?, ?)';
      const values = [`${name}`, `${email}`, `${password}`];
      const result = await conn.execute({
        sql,
        values,
      });
      return result;
    } catch (err) {
      console.log(err);
    }
  }

  // 유저 전체 조회
  async findAll() {
    try {
      const conn = await mysql.createPool(access);
      const findAllSql = 'SELECT * FROM user';
      const users = await conn.query(findAllSql);
      return users;
    } catch (error) {
      console.log(error);
    }
  }

  // 특정 유저 아이디 조회
  async findOneById(id: number) {
    try {
      const conn = await mysql.createPool(access);
      const findUserSql = 'SELECT * FROM `user` WHERE `id` = ' + id;
      const user = await conn.query(findUserSql);
      return user;
    } catch (error) {
      console.log(error);
    }
  }

  // 특정 유저 이메일 조회
  async findOneByEmail(email: string) {
    try {
      const conn = await mysql.createPool(access);
      const findUserSql = 'SELECT * FROM `user` WHERE `email` = ' + email;
      const user = await conn.query(findUserSql);
      return user[0];
    } catch (error) {
      console.log(error);
    }
  }
}

View

- ejs 템플릿 사용

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <title>Basic Project</title>
  </head>
  <body>
    <h1>BASIC PROJECT</h1>
    <div class="inputWrap">
      <div class="nameBox">
        <p>name</p>
        <input id="nameText" class="nameValue" type="text" />
      </div>
      <div class="emailBox">
        <p>email</p>
        <input id="emailText" class="emailValue" type="email" />
      </div>
      <div class="passwordBox">
        <p>password</p>
        <input id="passwordText" class="passwordValue" type="password" />
      </div>
      <button class="registerBtn">SIGN UP</button>
    </div>
    <br />
    <hr />
    <br />
    <div class="findWrap">
      <button class="findAllBtn">FIND ALL USER</button>
      <div class="allUserBox"></div>
      <div class="userTableWrap"></div>
      <div class="emailBox">
        <p>email</p>
        <input id="findEmailValue" class="emailValue" type="email" />
        <button class="findUserBtn">FIND USER</button>
        <div class="userBox"></div>
      </div>
    </div>

    <script src="/app.js"></script>
  </body>
</html>

- app.controller.ts 파일에서 nest.js @Render() 기능으로 뷰 페이지 렌더해줬다.

import { Body, Controller, Get, Post, Render, Req, Res } from '@nestjs/common';
import { AppService } from './app.service';
import { Response, Request } from 'express';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Get('')
  @Render('index')
  getHello(): object {
    return {};
  }
}

저작자표시 비영리 변경금지

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

Nest.js MVC 패턴 디렉토리 구조와 TypeORM 없이 mysql 연결해보기

1. Nest.js, MySQL 사용해서 MVC 패턴 구조 짜기

2. MVC 패턴

3. DTO

4. 디렉토리 구조

DTO(데이터 전달 객체)

Controller

Model, Service

View

1. Nest.js, MySQL 사용해서 MVC 패턴 구조 짜기

2. MVC 패턴

3. DTO

4. 디렉토리 구조

DTO(데이터 전달 객체)

Controller

Model, Service

View

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역