[DAY - 107] Node / MVC 디자인 패턴

node를 이용해 backend의 구조를 설계할 때 어제처럼 index.js에 모두 넣는 것보다 나누어 설계하는 것이 유지보수, 관리하기에 유용하다.

따라서 어제 만들었던 Todo 예제를 MVC 디자인 패턴을 적용하여 총 3개의 폴더를 추가로 만들 것이다.

 

MVC

 

1) index

node express에 기본 내장된 Router 기능을 이용하기 위해 index 코드를 수정해야 한다.

 

app.get('/todos', (req, res) => {
    res.send(todos)
})
app.delete('/todos/:id', (req, res) => {
    todos = todos.filter(item => item.id !== Number(req.params.id))
    res.send(todos)
})
app.post('/todos', (req, res) => {
    const newTodo = {
        id: no++,
        text: req.body.text,
        isChk: false
    }
    todos.push(newTodo)
    res.send(todos)
})
app.put('/todos/:id', (req, res) => {
    const todo = todos.find(item => item.id === Number(req.params.id))
    if (todo) {
        todo.isChk = !todo.isChk
    }
    res.send(todos)
})

 

위에 여러 기능을 하는 코드를 아래처럼 간단하게 바꿀 수 있다.

대신 app.use를 사용해야 모든 경우에서 작동한다.

 

app.use('/todos', todosRouter)

const todosRouter = require('./routers/todos.router');

 

이후에 todosRouter를 호출하게 된다. (todos.router.js)

 

 

2) routers

기존 코드에서 use 대신 사용했던 get, post 등은 router파일에 작성하면 된다.

index에서 호출시에 /todos를 이미 작성했으므로 중복되는 부분은 제거해 준다.

 

const express = require('express')
const { getTodos, deleteTodos, postTodos, putTodos } = require('../controllers/todos.controllers')
const todosRouter = express.Router()

todosRouter.get('/', getTodos)
todosRouter.delete('/:id', deleteTodos)
todosRouter.post('/', postTodos)
todosRouter.put('/:id', putTodos)

module.exports = todosRouter

 

그리고 각각 기능에 맞는 getTodos, postTodos 등을 호출하게 된다. (todos.controllers.js)

 

3) controllers

controllers에선 매개변수가 없는 경우 함수만 호출하고 있는 경우 매개변수와 함께 호출하게 된다.

마지막에 modue.exports를 추가해 주어야 routers에서 import 할 수 있다.

 

let { data } = require('../models/todos.models')
let no = 6

const getTodos = (req, res) => {
    res.send(data)
}
const deleteTodos = (req, res) => {
    data = data.filter(item => item.id !== Number(req.params.id))
    res.send(data)
}
const postTodos = (req, res) => {
    const newTodo = {
        id: no++,
        text: req.body.text,
        isChk: false
    }
    data.push(newTodo)
    res.send(data)
}
const putTodos = (req, res) => {
    const todo = data.find(item => item.id === Number(req.params.id))
    if (todo) {
        todo.isChk = !todo.isChk
    }
    res.send(data)
}

module.exports = {
    getTodos,
    deleteTodos,
    postTodos,
    putTodos
}

 

맨 위에 작성된 data는 models 폴더에 있다.  (todo.models.js)

 

4) models

models안에 초기 data를 넣어준다.

let data = [
    { id: 1, text: '리액트 공부', isChk: true },
    { id: 2, text: '프로젝트 계획 수립', isChk: false },
    { id: 3, text: '노드 공부', isChk: false },
    { id: 4, text: '서점 가기', isChk: true },
    { id: 5, text: '마트 가기', isChk: false }
]

module.exports.data = data;