오늘해야할일들
- 알고리즘 문제풀이
- TypeScript 공부하기
- Vue 공부하기
MVC패턴이란?
MVC패턴이란 Model, View, Controller 의 약자이다.
어플리케이션을 구성할 떄 각자 맡은 역할대로 소스코드를 구분하여 코딩하고 유지보수 및 신규기능 추가를 더 수월하게 하겠다는 의도이다.
자동차 공장을 예시로 들면
자동차 하나를 만드는데 모든 부품을 만드는 사람들이 한곳에서 작업을 해 하나의 완성된 자동차를 만들었다.
하지만 이제는 효율화를 위해 엔진,자동차 외부,바퀴,자동차 문 등으로 섹션을 나누어서 작업을 한다.
이런 효율성을 IT로 가져왔다고 생각하면 편할것이다.
Model은 데이터에 관련된 행위들만 담당하고
View는 화면에 관련된 행위들만 담당하고
Controllers는 사용자 요청에 대한 행위들만을 담당한다.
Model : 데이터 담당
View : 요청 담당
Controllers : 화면 담당
- NodeJS + Express MVC 구성 개념
Express에서는 Router라는 것을 제공하여 화면과 최전방에서 상호작용하는 것을 처리한다.
이것을 View단이라고 생각한다.
이후 화면에서 들어온 요청에 맞는 데이터 조회 , 수정, 삭제 등의 작업을 지휘할 controllers 부분을 따로 빼준다.
그리고 실제 DB에서 데이터를 핸들링 하는 행위를 하는 model 부분을 빼서 관리하면 된다.
이렇게 하면 필요한 로직들을 어느 모듈에 적용해 놔야 하는지 어느정도는 감이 생길 것이다.
- 실제 구성
Controller : 말 그래도 controller를 담당하는 모듈들을 가지고 있다.
Model : 혼동이 있을 수 있지만 여기는 TypeScript를 사용하기 때문에 데이터의 타입들에 대한 정의 부분이다.
Routes : View를 담당하는 부분이다.
app.ts : 실제 중심이 되는 Main 모듈이다.
app.ts Code
import express from 'express';
import adminRouter from './routes/admin';
const app = express();
app.use(express.json());
app.use(express.json({ extended:false }));
app.use("/admnin", adminRouter);
app.listen(8080, ()=> {
console.log("8080 포트")
console.log("서버가")
console.log("실행되었습니다!")
})/routes/admin.ts Code
import express,{Request, Response, NextFunction } from 'express';
import * as adminController from "../controller/admin";
const router = express.Router();
router.get("/admin", adminController.getAdmin);
router.post("/admin", adminController.createAdmin);
export default router;Router에서는 http 메소드에 따라 get으로 온 요청은 Controller의 조회쪽으로 post 요청은 생성 쪽으로 역할을 위임한다.
또한 여기서 @types/express-validator 등을 사용하여 화면에서 받은 데이터들의 유효성 검증을 미들웨어 형식으로 해주면 된다.
/controller/admin.ts 이다.
import {Request, Response} from "express";
import {PostAdmin, GetAdmin} from "../model/admin";
import * as adminData from "../data/admin";
//생성 후 insertId를 리턴하도록 설계
export async function createAdmin(req:Request, res:Response) {
const newAdminInfo : PostAdmin = req.body;
const insertId = await adminData.createAdmin(newAdminInfo);
res.status(201).json({insertId:insertId});
}
//모든 admin user 들을 배열로 전송하도록 설계
export async function getAdmin(req:Request, res:Response){
const adminInfo : Array<GetAdmin> = await adminData.getAdmin();
res.send(adminInfo)l;
}리턴하거나 Model 쪽에 넘겨줘야할 데이터의 타입을 정의한 model들(폴더명)을 import해오고 데이터를 핸들링 하는 Model에 해당하는 data를 호출해 준다.
DB조회하는 부분으로 async 방식을 활용해 동기적으로 처리 될 수 있도록 구성한다.
