[express.js] MVC Pattern

MVC(Model View Controller) Pattern이란?

• 소스 코드가 길어지면 복잡해지고 관리도 힘들어지기 때문에 사용하는 소스 코드를 정리하는 패턴

• 관련 프로그램 로직을 상호 연결된 3개의 요소로 나누는 사용자 인터페이스를 개발하는 데 일반적으로 사용되는 소프트웨어 아키텍처 패턴

• 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 디자인 패턴이다. 소프트웨어의 비즈니스 로직과 화면을 구분하는데 중점을 두고 있다.

• 사용자가 controller를 조작하면 controller는 model을 통해서 데이터를 가져오고 그 정보를 바탕으로 시각적인 표현을 담당하는 View를 제어해서 사용자에게 전달한다.

  1. Model: 데이터와 비즈니스 로직을 관리한다.
     • 앱이 포함해야 할 데이터가 무엇인지를 정의한다. 데이터의 상태가 변경되면 모델을 일반적으로 뷰에게 알리며 가끔 컨트롤러에게도 알린다.
     • 주로 모델은 DB에 포함되어있다.
  2. View: 레이아웃과 화면을 처리한다.
     • 앱의 데이터를 보여주는 방식을 정의한다.
     • 항목이 사용자에게 보여지는 방식을 정의하며, 표시할 데이터를 모델로부터 받는다.
  3. Controller: 명령을 모델과 뷰 부분으로 라우팅한다.
     • 앱의 사용자로부터 입력에 대한 응답으로 모델 및 뷰를 업데이트하는 로직을 포함한다.

MVC Pattern 사용 방법

1. views / controllers / models 폴더를 프로젝트에 생성한다.
   

2. controllers 폴더에 각 controller.js 파일을 생성한다.
   

3. controller에 맞는 로직을 함수로 만들어준다.

// users.controller.js
const User = require("../models/users.model");

// 전체 유저
function getUsers(req, res) {
  res.json(User);
}

// 하나의 유저
function getUser(req, res) {
  const userId = Number(req.params.userId);
  const user = User[userId];
  res.send(user);
}

// 유저 생성
function postUser(req, res) {
  const newUser = {
    id: User.length,
    name: req.body.name,
  };
  User.push(newUser);
  res.json(newUser);
}

// exports를 해준다.
module.exports = {
  getUser,
  getUsers,
  postUser,
};

4. controller에서 생성한 함수를 사용하려면 app.js에 require를 하고 각 라우터에 설정을 해줘야한다.

// 서버를 실행하는 파일

const express = require("express");
const usersController = require("./controllers/users.controller");
// controller 불러오기

const port = 3000;

const app = express();

app.use(express.json());

app.use((req, res, next) => {
  console.log("Time", Date.now());
  next();
});


app.get("/users", usersController.getUsers);
// 전체 유저 controller 사용

app.get("/users/:userId", usersController.getUser);
// 하나의 유저 controller 사용

app.post("/users", usersController.postUser);
// 유저 생성 controller 사용

app.get("/", (req, res) => {
  res.send("Hello world");
});

app.listen(port, () => {
  console.log("listening on 3000");
});

5. model에 유저의 데이터를 넣고 users.controller.js에서 사용해야한다.

// models 폴더에 users.model.js 파일
const User = [
  {
    id: 0,
    name: "happy",
  },
  {
    id: 1,
    name: "sad",
  },
];

module.exports = User;