시작하기전..
이번 글에서는 개념보다는 코드 작성에 중점을 둘 것이고, 구현 언어로는 노드 js를 이용한 mvc패턴 구축 방법을 정리하고자 합니다.
mvc 패턴은 소규모 웹개발 시 많이 사용되는 패턴 중에 하나이고, 익혀두시면 웹 개발하는 대부분의 언어에서(JAVA Jsp, spring, nodeJs express 등) 응용하여 사용 가능합니다.
글을 시작하기에 앞서 노드 js express 구축은 완료되어있다는 가정하에 진행합니다. 만일 안되어있으신 분은 이전 글에 포스팅해놓았으니 보시고 오시면 이해가 잘 될 겁니다.
mvc 패턴이란?
모델 뷰-컨트롤러(MVC)는 관련 프로그램 논리를 상호 연결된 요소 로직으로 나누는 사용자 인터페이스 개발에 일반적으로 사용되는 소프트웨어 설계 패턴입니다. 이는 정보를 사용자에게 제시하고 수락하는 방법과 정보의 내부 표현을 분리하기 위해 수행됩니다.
Model–view–controller - Wikipedia
From Wikipedia, the free encyclopedia Jump to navigation Jump to search Software design pattern Diagram of interactions within the MVC pattern Model–view–controller (MVC) is a software design pattern[1] commonly used for developing user interfaces that
en.wikipedia.org
위키백과에서 가져온 개념 설명입니다. mvc 패턴을 처음 공부하거나, 설명만으로 코딩을 하기엔 이해가 가지 않아 어디서부터 시작해야 할지 막막했던 학생 때의 기억이 나곤 합니다.
바로 아래 그림과 코드를 매칭 시켜 설명하고자 합니다.
- Model : 데이터(정보)를 관리합니다. 실질적으로 DB와 연관되어있고, 모든 데이터를 저장하거나 불러올 때 데이터 형식을 맞춥니다.
- View : html, pug 등과 같이 웹상에서 나타나는 표지 등을 저장합니다.
- Controller : view와 model 사이에 위치하며, 유저의 요청에 따라 데이터를 저장하기도 하고, 해당화면을 불러오기도 합니다. 컴퓨터로 치면 cpu와 같은 역할을 하네요.
간단한 예시를 들어 유저 코드를 보겠습니다.
폴더구조
main
server.js
import userRouter from "./routes/userRouter";
import apiRouter from "./routes/apiRouter";
import adminRouter from "./routes/adminRouter";
const express = require('express') // express 프레임워크 호출
const app = express()
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'ejs');
app.set("views", process.cwd() + "/views");
app.use("/user", userRouter);
app.use("/api", apiRouter);
app.use("/admin", adminRouter);
app.listen(3000) // PORT는 3000번을 기준으로 함.
Routes
userRouter.js
import express from "express";
import {usermain} from "../controller/userController";
const userRouter = express.Router();
userRouter.get("/usermain", usermain);
export default userRouter;View
login.html
<!DOCTYPE html>
<html>
<head>
<meta charset= "UTF-8">
<title>메인 페이지</title>
</head>
<body>
<form method="get" id="authForm" action="join">
<div>
<label for="loginId">아이디</label>
<input type="email" id="loginId" name="loginId" placeholder="ID" >
<label for="loginPw">비밀번호</label>
<input type="password" id="loginPw" name="password" placeholder="Password" >
</div>
<button type="submit">로그인</button>
<div>
<input type="checkbox" id="keepLogin" name="keepLogin">
<label for="keepLogin"><span>로그인 상태 유지</span></label>
</div>
</form>
</body>
</html>
controller
userController.js
export const usermain = (req, res) => {
res.render("login.html");
}
Model
userModel.js
import mongoose from "mongoose";
const userSchema = new mongoose.Schema({
password: { type: String, required: true },
id: { type: String, required: true },
createdAt: { type: Date, required: true, default: Date.now },
});
const User = mongoose.model("User", userSchema);
export default User;현재 model 코드는 직접적인 연관관계가 있지 않습니다. model 예시의 참고용으로 올렸고, DB와 연관된 model 코드는 이후 자세히 다루도록 하겠습니다.
정리
- mvc 패턴은 소규모 웹을 만들 때 유용합니다.
- mvc 패턴은 Model(데이터 관리) View(html 브라우저 문서) Controller(중앙 제어장치)로 구성됩니다.
