MVC (Model, View, Controller)

🎃 MVC

Model, View, Controller의 약자로, 소프트웨어 설계와 관련된 디자인 패턴이다.

---

🌈 Model

데이터를 처리하는 부분으로, model의 상태에 변화가 있을 때 controller에 이를 통보한다. 이와 같은 통보를 통해 view는 최신의 결과를 보여줄 수 있고, controller는 model의 변화에 따른 적용 가능한 명령을 추가, 제거, 수정 등을 할 수 있다.

🎲 View

UI와 관련된 것을 처리하는 부분으로, 사용자가 볼 결과물을 생성하기 위해 controller로 부터 정보를 얻어 온다.

🎀 Controller

view와 model을 연결해주는 부분으로, model에 명령을 보냄으로써 model의 상태를 변경할 있다. 또, 관련된 view에 명령을 보내 사용자에게 보여질 결과물을 바꿀 수 있다.

---

🔨 MVC 이용 웹 프레임 워크

---

💡 MVC의 장단점

👍 장점

1. 패턴들을 구분해 개발한다.
2. 유지보수가 용이하다.
3. 유연성이 높다.
4. 확장성이 높다.
5. 협업에 용이하다.

👎 단점

1. 완벽한 의존성 분리가 어렵다.
2. 설계 단계가 복잡하다.
3. 설계 시간이 오래 걸린다.
4. 클래스가 많아진다.

---

⏳ MVC 흐름

📁 폴더 구조

Controller 📂 컨트롤러 관련 파일
Model 📂 모델 관련 파일
routes 📂 라우트 파일
uploads 📂 이미지와 같은 동적 파일 관리
views 📂 뷰 관련 ejs 파일
index.js 📄 main 파일

---

💎 express 프로젝트로 MVC 알아보기

1. Client가 Browser에 접속한다.

2. Browser: 해당 프로젝트의 index.js (main)파일을 읽는다.

3. Router: app.use()를 통해 현재 들어온 경로에 대한 처리가 있는지 여부를 확인한다. 있으면 해당 라우터 폴더 안의 라우터 파일을 읽는다. 따로 라우터 파일 명까지 경로를 적어주지 않으면 기본적으로 index.js 파일을 읽는다. 만약 app.use()가 없으면 app.get()으로 넘어가서 실행한다.

/* index.js */

const express = require("express");
const app = express();
const port = 8080;
const bodyParser = require("body-parser"); 

app.set("view engine", "ejs");
app.use( express.static( "uploads" ));
app.use(express.urlencoded({extended: true}));
app.use( bodyParser.json() );

// 라우트 모듈을 불러온다.
const router = require("./routes");
// /user 경로로 들어왔을 때 라우트의 index.js 파일을 읽는다.
app.use("/user", router); 

app.get("/", function(req,res){
  res.send("Index");
})

app.listen(port, () => {
  console.log( "Server Port: ", port);
}) 

4. express의 Router()를 이용해서 각각의 경로에 대해 처리를 할 수 있게 한다.

/* ./routes/index.js */
const express = require("express");
const userRouter = express.Router();
const user = require("../controller/UserController");

// /user로 접속했을 때 UserController의 index 함수가 실행
userRouter.get("/", user.index);
// /user/register로 접속했을 때 UserController의 register 함수가 실행
userRouter.get("/register", user.register);
// /user/register 에서 post 요청으로 접속하면 UserController의 post_register 함수가 실행
userRouter.post("/register", user.post_register); 
// /user/login 에서 접속하면 UserController의 login 함수가 실행
userRouter.get("/login", user.login);
// /user/login 에서 post 요청으로 접속하면 UserController의 post_login 함수가 실행
userRouter.post("/login", user.post_login); 

module.exports = userRouter; 

5. 각각의 경로로 요청이 들어오면 어떤 view를 호출할 것인지를 Controller에서 관리한다.

/* ./controller/UserController.js */
const User = require("../model/User");

exports.index = (req, res) => {
  	// views 폴더의 index.ejs 파일을 rendering 한다.
    res.render("index");
}

exports.register = (req, res) => {
  	// views 폴더의 register.ejs 파일을 rendering 한다.
    res.render("register");
}

exports.post_register = (req, res) => {
  	// User model post_user()로 req.body 데이터를 넘겨준다.
    User.post_user(req.body);
    res.send( "success_join" );
}

exports.login = (req, res) => {
  // views 폴더의 login.ejs 파일을 rendering 한다.
    res.render( "login" );
}

exports.post_login = async (req, res) => {
   // User model의 get_user() 함수를 실행하고 값을 받아온다.
    var data = await User.get_user();

    var info = data.split("//");


    if (info[0] != req.body.id) {
        res.send("아이디 다름");
    } else if (info[2] != req.body.password) {
        res.send("비밀번호가 다름")
    } else {
        res.send("로그인 성공!");
    }

    console.log( data );
}

6. User 모델로 넘어온 req.body 데이터를 어떻게 처리는지를 User.js 파일에 작성한다.

/* ./model/User.js */
const fs = require("fs").promises;

exports.post_user = function( data ){
    console.log( data );
    const {id, password, name, age} = data;

    fs.writeFile("./info.txt", `${id}//${password}//${name}//${age}`, (err) => {
        if (err) {
            console.log(err);
            res.status(400).send("err!!");
        }
    });
}

exports.get_user = async function( data ){
    var buffer = await fs.readFile("./info.txt");
    return buffer.toString();
}

---