[node.js] MVC 패턴

MVC 패턴

MVC 패턴은 소프트웨어 아키텍처 디자인 패턴 중 하나이며, 각각의 역할을 분리하여 코드를 구성함으로써 유지보수 및

확장이 용이하게 되는 장점이 있는 모델 입니다.

 

MVC는 모델(Model), 뷰(View), 컨트롤러(Controller)로 구성됩니다. 각각의 역할을 다음과 같이 정리 됩니다.

 

• 모델(Model): 데이터를 관리하고 처리합니다.
• 뷰(View): 사용자에게 보여지는 인터페이스를 제공합니다.
• 컨트롤러(Controller): 사용자의 요청을 처리하고, 모델과 뷰를 연결합니다.

 

 

 

아래는 간단한 예시 코드입니다. 대충 MVC 패턴이 각각 어떠한 느낌으로 이루어지는지 아는게 중요하다고 생각합니다.

참고) 참고로 예시는 MVC패턴의 이해를 위한 간단한 예시를 보여줄 뿐 실제 개발에서 아래와 같이 데이터를 보관하는 것은 피해야 합니다.

모델(Model)

유저의 데이터를 보관하고, 해당 데이터를 어떻게 사용하는지에 대한 기능이 정의되어 있습니다.

const User = {
  users: [],

  getAllUsers() {
    return this.users;
  },

  addUser(user) {
    this.users.push(user);
  },

  findUserById(id) {
    return this.users.find(user => user.id === id);
  }
};

module.exports = User;

 

뷰(View)

모델에서 관리하고 있는 유저의 데이터를  users 라는 파라미터에 받아와서 사용자에게 보여주는 역할을 합니다.

const UserView = {
  renderUserList(users) {
    const userList = users.map(user => `
      <li>${user.name}</li>
    `).join('');

    return `
      <ul>
        ${userList}
      </ul>
    `;
  },

  renderUser(user) {
    return `
      <div>
        <h2>${user.name}</h2>
        <p>Age: ${user.age}</p>
        <p>Email: ${user.email}</p>
      </div>
    `;
  }
};

module.exports = UserView;

 

컨트롤러(Controller)

사용자의 요청을 받은 후, 모델과 뷰를 연결하여 처리토록 하고, 그 정보를 res 객체의 send 메서드에 담아서 사용자에게 전달합니다.

const express = require('express');
const User = require('../models/user');
const UserView = require('../views/userView');

const router = express.Router();

// 모든 사용자 정보 가져오기
router.get('/', (req, res) => {
  const users = User.getAllUsers();
  const userListHtml = UserView.renderUserList(users);

  res.send(userListHtml);
});

// 사용자 정보 상세 보기
router.get('/:id', (req, res) => {
  const userId = parseInt(req.params.id);
  const user = User.findUserById(userId);

  if (user) {
    const userHtml = UserView.renderUser(user);
    res.send(userHtml);
  } else {
    res.status(404).send('User not found');
  }
});

module.exports = router;