[ 코딩온 ] KDT 웹 풀스택 13기 / 7월 2주차 회고 / MVC(MySQL 연결x)

2024.07.10 수

 

MVC란?
- Model, View, Controller
- 소프트웨어 설계와 관련된 디자인 패턴.
- 코딩 방법론.

 

MVC 흐름

 

Model : 데이터 처리
View : UI관련된 것 처리. 프론트엔드
Controller : View, Model 연결. 라우터의 콜백함수 수행. 백엔드

 

실습 : 동적폼전송 코드를 MVC 로 바꾸기

• server.js : 동적 폼전송. MVC분리X

//server.js
//동적 폼전송 ( MVC 분리 X )

const express = require('express');
const app = express();
const PORT = 8000;

//설정
//view engine
app.set('view engine', 'ejs');
//body-parser
app.use(express.json());

//router
//===페이지
app.get('/', (req, res) => {
	res.render('index');
});
app.get('/get', (req, res) => {
	res.render('get');
});
app.get('/post', (req, res) => {
	res.render('post');
});

//===get방식 회원가입. 데이터 요청, 응답
app.get('/resultGet', (req, res) => {
	console.log(req.query); //get으로 요청한 데이터 req.query 확인용도. 
	res.json({ response : req.query });
});
//===post방식 로그인. 데이터 요청, 응답
const id = 'kdt13';
const pw = '1234';
app.post('/resultPost', (req, res) => {
	console.log(req.body); //post로 요청한 데이터 req.body 확인 용도.
    const {id : reqId, pw : reqPw} = req.body; //post view페이지에서 axios로 전송된 데이터(id, pw)를 객체구조분해로 받아온다. 
    if(id === reqId && pw === reqPw) {
    	res.json({ result : true, userId : id });
    } else {
    	res.json({ result : false,  userId : null});
    }
});

//port열어주기
app.listen(PORT, () => {
	console.log(`http://localhost:${PORT}`);
});

 

 

• MVC로 바꾸기

view : 이전부터 파일을 분리해 작성했기 때문에 따로 손대지 않음.

model, controller, router : server.js에서 분해하기.

//model/indexModel.js
//Model
const id = 'kdt13';
const pw = '1234';

module.exports = {id, pw};

//server.js

const express = require('express');
const app = express();
const PORT = 8000;

//셋팅
app.set('view engine', 'ejs');
app.use(express.json());

//라우터
const indexRouter = require('./routes/indexRouter');
router.use('/', indexRouter);

//port열기
app.listen(PORT, () => {
	console.log(`http://localhost:${PORT}`);
});

//routes/indexRouter.js
//Router

const express = require('express');
const controller = require('../controller/indexController');
const router = express.Router();

// 페이지 
router.get('/', controller.main);
router.get('/get', controller.get);
router.get('/post', controller.post);

//요청, 응답
router.get('/resultGet', controller.resultGet);
router.post('/resultPost', controller.resultPost);

module.exports = router;

//controller/indexController.js
//Controller

const userModel = require('../model/indexModel');

//페이지
const main = (req, res) => {
	res.render('index');
};
const get = (req, res) => {
	res.render('get');
};
const post = (req, res) => {
	res.render('post');
};

//요청, 응답
const resultGet = (req, res) => {
	console.log(req.query); //req.query 확인 용도
	res.json( {response: req.query} );
};
const resultPost = (req, res) => {
	console.log(req.body); //req.body 확인 용도
	const {id : reqId, pw : reqPw) = req.body;
	if(userModel.id === reqId && userModel.pw === reqPw) {
    	res.json({result : true, userId : userModel.id});
    } else {
    	res.json({result : false, userId : null});
    }
};

module.exports = {main, get, post, resultGet, resultPost};

---

[정리]

view -> 페이지. 프론트엔드. ejs파일

model -> DB. MySQL과 연동하는 부분

controller -> 라우터의 콜백함수, model, view를 연결하는 부분.

router -> express.Router모듈 필요. controller 호출.

server.js -> express 모듈 필요.