mvc 패턴

mvc란?

Model-View-Controller의 약자로 소프트웨어 디자인 패턴 중 하나

 

# 장점

분리된 역할 - 모델, 컨트롤러, 뷰로 분리하여 각각의 역할에 집중할 수 있음 → 재사용성, 유지보수성 향상

 

• Model - 데이터의 저장, 관리, 처리를 담당, DB와 상호작용하여 DB 쿼리를 처리하고 결과를 반환
• View  - 컨트롤러로부터 전달 받은 데이터로 화면 구상 (ejs)
• Controller - 모델과 뷰를 연결, 모델로부터 데이터 가져와 가공하고 가공된 데이터를 뷰에 전달

 

mvc 흐름

 

라우터(url)요청 들어오면 모델이 데이터를 컨트롤러에게 전달하고 컨트롤러는 받은 데이터를 가공하여 뷰로 전달

 

 

1. 모델에 데이터를 넣는다

2. 컨트롤러가 모델에 있는 데이터를 가져와 가공하여 뷰에 보낸다 + 컨트롤러(함수)와 라우터(라우터)와 index.js를 분리한다 *작업순서 : 컨트롤 파일 -> 라우터 파일 -> 인덱스 파일

→ 컨트롤러 파일을 먼저 작성하고 해당 컨트롤러의 함수들을 라우터 파일에 매핑한다

→ 인덱스 파일에서 라우터 파일을 등록하여 해당 경로로 요청이 들어올 때 컨트롤러 함수가 실행되도록 설정한다

3. 컨트롤러로부터 받은 데이터를 뷰에서 출력한다

 

 

 

메인화면 라우터, 컨트롤러 분리하기

경로 → 라우터

함수 → 컨트롤러

 

 

원래 코드

//route 폴더의 index로 분리
app.get("/", function (req, res) {
  res.render("index");
});

 

 

 

# 컨트롤러

exports.main = (req, res) => {
	res.render('index'); //뷰의 index.ejs 파일
}

*res.render 메서드를 사용하여 index.ejs를 렌더링하고 데이터를 전달하는 것

 

 

 

# 라우터 코드

const express = require("express");
const controller = require("../controller/visitor"); //controller 모듈을 가져옴
const router = express.Router(); //Router 함수 사용해서 라우터 객체 생성

router.get('/', controller.main); // 컨트롤러의 main

 

 

 

#  index.js 코드

const indexRoute = require("./routes/index"); //index.js는 생략이 가능해서 경로에 라우터 폴더만
app.use("/", indexRoute);

 

주의할 점은 컨트롤러 파일과 라우터 파일 내에서 사용되는 함수의 이름이 일치하는지 확인!

위의 코드에선 컨트롤러의 main을 라우터에서 실행시킴