1. MVC에 대해
1.1 MVC란...
1.2 Model
1.3 View
1.4 Controller
2. MVC적용예시
2.1 mysql을 이용한 MVC
1. MVC에 대해
1.1 MVC란...
- MVC패턴은 디자인 패턴중 하나이다.
- 디자인 패턴이란 개발과정중 발생하는 문제점들을 확인하기 쉽게하기 위한것이며 유지보수 측면에서도 용이하게 설계할 수 있다.
- MVC(Model,View,Controller)은 프로젝트를 구상할때 3가지 역할을 구분한 패턴입니다.
- 유저가 Browser의 Router을 통해 Controller을 이용한다.
-c controller은 Model에서 데이터를 받아와 그 정보를 바탕으로 시각적인 View를 구성하여 사용자가 사용할 수 있도록 하는 구성하는 기술입니다.
1.2 Model
- 프로그램이 무엇을 할지 처리(정보가공)하거나 정해주는 역할을 하는것입니다.
- 데이터의 정보를 가지고 있으며 DB를 통해 받아온 데이터 혹은 직접 가지고 있는 데이터를 Controller를 통해 데이터를 받아오거나 보내주는 역할을 함
- Model은 다른 컴포넌트들에 대해 알지 못한다. 자기 자신이 무엇을 수행하는지만 알고 있다.
1.3 View
- 최종 사용자에게 무엇을 화면(UI)로 보여준다. 화면에 무엇을 보여주기 위한 역할을 한다.
- 전달받은 데이터를 따로 저장하면 안된다.(정보를 유지하기 위해 임의의 View 내부에 저장하면 안된다.)
- 단지, View는 데이터를 받으면 화면에 표시해주는 역할만 한다.
1.4 Controller
- Model의 데이터를 어떻게 처리할지 알려주는 역할을 한다.
- Controller는 다른 컴포넌트들에 대해 알고 있다. 자기 자신 외에 Model과 View가 무엇을 수행하는지 알고 있다.
- 즉, 인터페이스와 데이터를 연결하는 역할을 한다.
2. MVC적용예시
- 이번에 MVC적용을 하는 예시로 저번에 사용한 데이터베이스 언어인 mysql을 이용해 Model에서 데이터를 가공해 컨트롤로 보내고 controller는 받아온 데이터를 처리해 송출하는 방법을 해볼것이다.
- 이때 Express를 활용해 분기를 나누어 줄것이고 나누어진 분기에따라 controller를 연결, controller는 Model에서 필요한 정보를 DataBase에서 가져오는것을 할것이다.
2.1 mysql을 이용한 MVC
1.Express를 사용해 '/'를 호출할시 indexRouter를 사용하겠다고 작성
애플리케이션 레벨과 라우터 레벨은 실행단계의 차이지 기능적으론 다른 점이 없다.
따라서 이번엔 애플리케이션 분기와 라우터 분기로 더 기밀하게 URL을 분리하여 제어해 보겠다.
- app.js -
const express = require('express');
const indexRouter = require('./routes');//분기마다 구분해놓은 Router들의 집합 레포
const cors = require('cors');
const morgan = require('morgan');
const app = express();
const port = 4000;
app.use(cors());
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
app.use('/', indexRouter); //'/'이 호출될시 indexRouter을 실행하도록 선언
//callback인자에 express.Router() 오브젝트를 생성하여 넣음으로 라우터 단계에서의 URL 제어도 가능 하도록 등록하였다.
module.exports = app.listen(port, () => {
console.log(`${prot}로 시작`}
});
- index라우터를 사용해 router의 분기지점에 사용할 컨트롤러를 명시해준다.
router.use('분기' , 컨트롤러 명칭);
- router/index.js -
const express = require('express');
const router = express.Router();
const itemsRouter = require('./items');
router.use('/items', itemsRouter);//'/items'가 호출되면 itemsRouter로 불러온 items를 실행
// use()는 모든 METHOD에서 동작한다는 것이고 METHOD()는 지정된 요청(GET, POST, PUT, DELETE 등)에서만 동작을 한다는 것
module.exports = router;- 'itemsRouter'분기지점에 대해 동작 호출
- routes/items.js -
const router = require('express').Router();
const controller = require('./../controllers');
//controllers를 불러온다.
router.get('/', controller.items.get);//get을 통해 컨트롤의 item.get을 통해 컨트롤러를 실행한다.
module.exports = router;- item.get에 데이터 송수신 실행
- controllers/index.js -
const models = require('../models'); //models를 통해 데이터를 가공하고 받아온다.
items: { //받아온 데이터를 실행한다.
get: (req, res) => {
models.items.get((error, result) => {
if (error) {
res.status(500).send('Internal Server Error');
} else {
res.status(200).json(result);
}
});
},
}- DB에 연결해 데이터를 보내준다.
- models/index.js -
const db = require('../db'); //db변수에 연결된 DataBase 정보를 받아온다.
module.exports = {
items: {
get: (callback) => {
const queryString = `SELECT * FROM items`; //items테이블에 있는 모든 정보를 불러오는 sql문을 작성한다.
//queryString에는 slq문으로 정리된 데이터가 담기게 된다.
db.query(queryString, (error, result) => {
callback(error, result); //작성된 sql문을 이용해 콜백함수로 에러와 결과값을 보낸다.
});
},
}
컨트롤러에서는 에러값과 결과값 두개를 인자로 사용하는 콜백함수를 받아오며 이를 이용해 데이터를 전송한다.
items: { get: (req, res) => { //1. get에 대한 콜백함수가 실행이 되고 models.items.get((error, result) => {2.모델내에서 실행된 콜백함수에따라 실행을 한다. if (error) { res.status(500).send('Internal Server Error'); } else { res.status(200).json(result); } }); }, }
느낀점
- 분기를 나누어서 네트워크를 연결하는 부분은 저번시간에 하였지만 이번엔 네트워크를 통해 데이터베이스에 연결해 데이터를 받아오는 부분이 신기했다.
- 마지막 모델에서 데이터를 보내주는 부분이 callback을 사용하는 부분에서 구동방법이 조금 막혔지만 계속해서 파고들어 마침내 이해하였다.
- 후에 mysql뿐 아니라 다양한 데이터베이스 처리를 배워 손쉽게 backend작업을 해보고 싶다.
이게 되네?