logo

JEONGGON

    블로그
github
mode
목 차
down-arrow
〈

Express.js MVC 패턴

2024.03.15.

post-thumbnail

MVC 패턴

1. MVC 패턴이란?

  • 소스코드의 복잡성을 해결하기 위해 패턴을 활용함
  • MVC(모델 - 뷰 - 컨트롤러)는 프로그램의 로직을 상호 연결된 3개의 요소로 나누어 사용자 인터페이스, 데이터 및 논리 제어를 개발하는 소프트웨어 아키텍처 패턴
  • 소프트웨어 비즈니스 로직과 화면을 구분

Expressjs_MVC
MVC 패턴

  1. Model : 데이터와 비즈니스 로직을 관리
  2. View : 레이아웃과 화면을 처리
  3. Controller : 명령을 모델과 뷰 부분으로 라우팅


2. 앱 소스코드 MVC 패턴으로 만들기

2-1. MVC 각 폴더 생성

  • models 폴더, views 폴더, controllers 폴더 생성

2-2. controller 파일 생성

  • controllers/posts.controller.js
  • controllers/users.controller.js

2-3. 유저 관련 로직 분류하기 - users.controller

  • user 관련 로직은 users.controller.js에 옮기기
// controllers/users.controller.js

// 유저 모델 가져오기
const model = require('../models/users.model');

// 유저 전체 데이터 가져오기
function
getUsers(req, res) {
  res.send(model);
}

// 유저 1명 데이터 가져오기
function getUser(req, res) {
  const userId = Number(req.params.userId);
  const user = model[userId];
  if (user) {
    res.status(200).json(user);
  } else {
    res.status(404).json({ error: "No User Found" });
  }
};

// 유저 데이터 추가하기
function postUser(req, res) {
  if (!req.body.name) {
    return res.status(400).json({
      error: "Missing user name"
    });
  }
  const newUser = {
    name: req.body.name,
    id: model.length
  };
  model.push(newUser);
  res.json(newUser);
};

// 생성한 함수 내보내기
module.exports = {
  getUsers,
  getUser,
  postUser
}

2-4. server.js에 users.controller 가져오기

// server.js

const express = require('express');
// 생성한 컨트롤러 모듈 가져오기
const usersController = require('./controllers/users.controller');

const PORT = 4000;

const app = express();

app.use(express.json());

// 유저 관련 라우팅
app.get('/users', usersController.getUsers);
app.get('/users/:userId', usersController.getUser);
app.post('/users', usersController.postUser);

app.listen(PORT, () => {
  console.log(`Running on port ${PORT}`);
});

2-5. 유저 모델 파일 생성 - users.model

  • models/users.model.js 파일 생성
// models/users.model.js

const users = [
  { id: 0, name: 'minsoo' },
  { id: 1, name: 'jeonggon' }
]

module.exports = users;

2-6. 포스트 관련 로직 분류하기 - posts.controller

  • post 관련 로직은 posts.controller.js에 옮기기
// controllers/posts.controller.js

function getPost(req, res) {
  res.send('<div><h1>Post Title</h1><p>This is a post</p></div>');
}

module.exports = {
  getPost
}

2-7. server.js에 posts.controller 가져오기

// server.js

const express = require('express');
const usersController = require('./controllers/users.controller');
// 생성한 컨트롤러 모듈 가져오기
const postsController = require('./controllers/posts.controller');

const PORT = 4000;

const app = express();

app.use(express.json());

app.get('/users', usersController.getUsers);
app.get('/users/:userId', usersController.getUser);
app.post('/users', usersController.postUser);

// 포스트 관련 라우팅
app.get('/posts', postsController.getPost);

app.listen(PORT, () => {
  console.log(`Running on port ${PORT}`);
});
expressjsframeworkserverMVCpattern
profile

조정곤

주니어 프론트엔드 개발자

github
linkedin
instagram
email

< 이전글

GraphQL 소개

다음글 >

Express.js Middleware

Express 포스트 (13)

down-arrow
Express.js req.params()Express.js res.json(), res.send(), res.end()Express.js 기본 구조Express.js 소개Express.js MVC 패턴Express.js MiddlewareExpress.js RESTful APIExpress.js Template Engine, Template LayoutExpress.js express.json()Express.js express.static()Express.js res.sendFile()Express.js 라우터Express.js 에러처리