[Node.js] Node.js에 MVP 패턴을 적용하기

디자인 패턴이란?

프로그램이나 어떤 특정한 것을 개발하는 중에 발생했던 문제점들을 정리해서 상황에 따라 간편하게 적용해서 쓸 수 있는 것을 정리하여 특정한 "규약"을 통해 쉽게 쓸 수 있는 형태로 만든 것.

즉, 더 쉽고 편리하게 개발을 할 수 있는 특정한 방법들이다.

 

MVP패턴이란?

어플리케이션을 3가지로 나눠서 구축하는 개발 방법론이다. MVC패턴에서 파생된 디자인 패턴중에 하나이다.

Model : 데이터를 처리하고 가공하는 핵심 알고리즘 및 로직

View : 그래프, 그림 등 사용자에게 보여지는 UI

Presenter : View에서 들어오는 요청을 받고 Model에 데이터를 요청후, 다시 View에 응답

 

Node.js에 MVP 패턴 적용.

Node.js에서는 Router에서 요청을 받고 DB에 접근해 데이터를 받고 가공한 후, 다시 응답해주는 방식을 사용한다.

그냥 Router에서 모든 로직을 처리하면 좋지만 코드가 길어짐에 따라 코드의 질이 떨어질 수 있다.

이를 방지하기 위해 디자인 패턴을 적용하려고 했고, 우리 프로젝트에서는 MVP를 적용하였다.

 

기존 소스코드에서는 다음처럼 로직이 구성되어있었다.

// index.js

const express = require('express');
const router = express.Router();

let mailer = require('../auth/mail');

router.post('/mail', async(req, res) => {
  const { email }  = req.body;
  const min = 111111;
  const max = 999999;
  const ranNum = Math.floor(Math.random() * (max - min - 1)) + min;

  let emailParam = {
    toEmail: email, // 수신할 이메일
    subject: `[slack_clone]인증 관련 메일 입니다`, // 메일 제목
    text: `오른쪽 숫자 6자리를 입력해주세요 : ${ranNum}` // 메일 내용
  };

  mailer.sendGmail(emailParam);

  res.status(200).send("성공");
});

module.exports = router;

해당 소스코드는 메일을 전송하는 Router라 DB에 접근하는 부분은 없다. 그리고 소스코드의 길이를 봤을때에도 별 문제가 없어보인다. 하지만 ranNum을 DB에 접근하게 되어 저장하게 된다면 데이터를 가공하고 저장하는 코드의 길이가 매우 많아져서 코드의 질이 떨어질 수 도있다.

 

그렇기 때문에 다음처럼 소스코드를 변경하였다.

// index.js

const express = require('express');
const router = express.Router();

const indexService = require('../service/indexService');

router.post('/mail', async(req, res) => {
  const ranNum = await indexService.sendMail(req.body);
  res.status(200).send(ranNum);
});

module.exports = router;

let mailer = require('../auth/mail');

module.exports = {
  async sendMail(params) {
    const { email }  = params;
    const min = 111111;
    const max = 999999;
    const ranNum = Math.floor(Math.random() * (max - min - 1)) + min;

    let emailParam = {
      toEmail: email, // 수신할 이메일
      subject: `[slack_clone]인증 관련 메일 입니다`, // 메일 제목
      text: `오른쪽 숫자 6자리를 입력해주세요 : ${ranNum}` // 메일 내용
    };

    mailer.sendGmail(emailParam);

    return { ranNum }
  }
}

이렇게 코드를 짜게되면 요청과 응답에 대해서는 Router에서만 처리할 수 있게 된다

또한 Service단에서는 데이터에 관련된 핵심 로직만 만지게 되면서 코드의 재활용이 가능해진다.

 

Work Flow

정리하자면 전체적인 흐름은 다음과 같다.

View는 React로 대체를 하고, Model은 단순히 모델만 있는 것이 아닌 데이터를 처리하고 가공하는 Service단, 데이터를 가져와주는 Model로 구분을 지을 수 있고, Model은 Sequelize로 대체한다.

 

MVP패턴으로 개발하는데에 더 나은 코드가 있을수도 있겠다는 생각이 들었다.

계속 공부해나가면서 프로젝트를 개선해야겠다.

 

참고

https://codingcoding.tistory.com/1308

Node js + Express에서 MVC 같이 써보기 - 라우터 예제

https://beomy.tistory.com/43

[디자인패턴] MVC, MVP, MVVM 비교