MVC:
기존의 코드에서 라우팅 부분을 routes와 controller에,
UI(눈에 보이는 부분)를 view에,
데이터를 model에 각각 나누어 놓은 것이다.
기존 방식과 다른 점은,
routes폴더로부터 require로 불러오는 과정이 필요하다는 것이다.
const forRouting = require("./routes/login");
app.use("/", forRouting);
라우팅을 위해서 필요한 부분.
'routes' 폴더 안에 있는 것들을 불러온다는 의미인 것 같다.
라우팅 주소만 적은 뒤, 두 번째 인수로 모듈을 담은 변수명을 적는다.
※get이나 post가 아니라 use로 적어야 한다!
※작성할 때 어디에 뭘 어떻게 써야 할지 헷갈린다면,
일단 원래 작성하던대로 작성한 다음 분리하는 것도 방법이다.
예시 코드
app.get('/', (req, res)=>{
res.render('index',{
userName: 'sally',
userAge: 20,
userLike: 'cake'
});
})
View
: 눈에 보이는 부분. 프론트. 페이지 디자인 및 데이터 바인딩을 담당하는 부분.
컨트롤러를 통해 모델과 교류.
res.render('index'); 안에 있는
=>'index'
이 부분을 담당한다
Model
: 백엔드. 데이터 베이스의 데이터를 불러오고 관리하는 부분.
데이터베이스와 연동하여 데이터를 가져오는 경우가 보통이지만,
객체 배열을 반환하는 함수나 문자열을 사용하기도 한다.
컨트롤러를 통해 뷰와 교류.
{ userInfo: form.name.value }
이 부분을 담당한다.
exports를 사용해서 내보내야 한다.
exports.getUserInfo = () => {
return {
realId: "banana",
realPw: "1234",
};
};
그래야 controller에서 사용할 수 있다.
getUserInfo 부분은 함수 이름으로, 마음대로 써도 된다.
Controller
: 경로를 설정한다. 무엇이 보일지를 결정한다.
(req, res)=>{
res.render('index')}
이 부분을 담당한다.
require로 모델 안의 데이터를 불러와야 한다.
const userLogin = require("../model/User");
각 함수들을 exports를 통해 내보내야 한다.
exports.main = (req, res) => {
res.render("index");
};
main 부분은 함수 이름으로, 마음대로 써도 된다.
Routes
: 뷰와 모델을 이어준다. 주소만 설정해준다.
app.js('/')
이 부분을 담당한다.
express 내부에 있는 Router()라는 함수를 사용한다.
그래서 express도 반드시 호출한 다음 써야 한다.
const express = require('express');
const router = express.Router();
컨트롤러를 불러와야 한다.
const controller = require("../controller/Cuser");
그 다음 라우팅 주소를 적고, 그 주소로 이동했을 때 실행할
컨트롤러 함수를 적어주면 된다.
router.get("/", controller.main);
라우터를 내보내야 한다. 그래야 app.js에서 사용가능하다.
module.exports = router
그 외
※app.js는 routes를 필요로하고,
model은 DB를 필요로 하고,
controller는 model(데이터)을 필요로 하고,
routes는 controller(함수)를 필요로 한다.
※exports는 문법의 일종이다.
exports는 함수를 내보내기 위해서 사용한다.
객체 같은 게 아니라 그냥 문법. for문 if 문처럼.
점(.)으로 이어야 한다.
