MVC 디자인 패턴

MVC란 Model View Controller의 약자로 애플리케이션을 세 가지의 역할로 구분한 개발 방법론이다. 사용자가 Controller를 조작하면 Controller는 Model을 통해서 데이터를 가져오고 그 정보를 바탕으로 시각적인 표현을 담당하는 View를 제어해서 사용자에게 전달하게 된다. 

 

---

1. Model

• 데이터 처리 역할이다.
• Database와 소통한다.
• Controller에게 데이터를 전달한다.
• View와 직접 소통하는 일은 없다.

---

2. View

• 유저에게 화면을 보여주는 역할이다.
• 데이터를 받고 그리는 역할을 수행한다.
• Model과 소통하지 않고 Controller와 소통한다.
• Controller에게 액션이나 데이터를 전달하고 전달받기만 한다.

---

3. Controller

• View에서 액션과 이벤트에 대한 인풋 값을 받는다.
• Model에게 전달해주기 전 데이터를 가공할 수 있다.
• View와 Model에게 받은 데이터를 가공할 수 있다.

---

4. 적용

- 폴더구조 (controllers, models, routes 폴더 생성)

 

- server.js 수정 전

const express = require('express');
const app = express();
const path = require('path');
const PORT = 5000;

app.use(express.json());
var cors = require('cors');
app.use(cors());

app.get('/user', function (req, res) {
    res.json({ 
        name: "song",
        gender: "male"
    });
});

app.listen(PORT, () => {
    console.log(`Listening on port ${PORT}`)
});

 

- server.js 수정 후

$ npm install body-parser

 

const express = require('express');
const app = express();
const bodyParser = require("body-parser");
const PORT = 5000;

app.use(express.json());
var cors = require('cors');
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

require("./routes/user.routes.js")(app);

app.listen(PORT, () => {
    console.log(`Listening on port ${PORT}`)
});

 

 

- routes/user.routes.js 생성

module.exports = app => {
    const users = require("../controllers/user.controller.js");
    app.get("/user", users.findAll);
};

 

 

- /controllers/user.controller.js 생성

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

exports.findAll = (req, res) => {
    User.getAll((err, data) => {
        if (err)
            res.status(500).send({
                message:
                    err.message || "Some error occurred while retrieving users."
            });
        else res.send(data);
    });
};

 

 

- /models/user.model.js 생성

const User = function (user) {
    this.name = user.name;
    this.gender = user.gender;
};

User.getAll = result => {
    result(null, {
        name: "song",
        gender: "male"
    })
};

module.exports = User;

---

5. 결과

$ nodemon server.js

$ npm start