찾다

집 >웹 프론트엔드 >JS 튜토리얼 >Node.js를 사용한 MVC 패턴 이해

Node.js를 사용한 MVC 패턴 이해

Patricia Arquette
Patricia Arquette원래의
2024-11-07 03:04:02804검색

Understanding the MVC Pattern with Node.js

MVC(Model-View-Controller) 패턴은 웹 개발에서 가장 널리 사용되는 아키텍처 패턴 중 하나입니다. MVC는 애플리케이션을 모델, 뷰 및 컨트롤러의 세 가지 상호 연결된 구성 요소로 나누어 체계적이고 유지 관리 가능하며 확장 가능한 코드를 촉진합니다. 비동기 처리 및 광범위한 생태계를 갖춘 Node.js는 MVC 기반 애플리케이션, 특히 웹 및 API 개발을 구축하는 데 탁월한 선택입니다. 이 가이드에서는 Node.js를 사용한 MVC 패턴을 살펴보고 그 이점과 실제 구현 방법을 안내합니다.

MVC 패턴이란 무엇입니까?

MVC 패턴은 애플리케이션을 세 가지 별개의 부분으로 나눕니다.

  1. 모델: 애플리케이션의 데이터 및 비즈니스 로직을 나타냅니다. 데이터베이스와 상호 작용하고 사용자 인터페이스와 독립적으로 데이터를 처리합니다.
  2. 보기: 애플리케이션의 프레젠테이션 레이어를 처리합니다. 사용자에게 데이터를 표시하고 사용자 명령을 컨트롤러로 보냅니다.
  3. 컨트롤러: 모델과 뷰 사이의 중개자 역할을 합니다. 사용자 입력을 받아 모델과 상호작용하고 그에 따라 뷰를 업데이트합니다.

이러한 관심사 분리는 관리, 테스트 및 확장이 쉬운 방식으로 코드를 구성하는 데 도움이 됩니다.

Node.js에서 MVC를 사용하면 얻을 수 있는 이점

  1. 유지관리성: MVC를 사용하면 코드를 레이어로 구성하여 복잡한 애플리케이션을 더 쉽게 관리할 수 있습니다.
  2. 확장성: 구조를 통해 개별 구성요소를 독립적으로 확장하거나 수정할 수 있습니다.
  3. 재사용 가능한 코드: MVC를 사용하면 구성 요소가 애플리케이션의 여러 뷰나 일부에서 재사용 가능한 경우가 많습니다.
  4. 효율적인 팀 협업: 프론트엔드와 백엔드 개발자는 최소한의 중복으로 동시에 작업할 수 있습니다.

Node.js로 MVC 프로젝트 설정

여기에서는 Node.js와 Express를 사용하여 간단한 MVC 애플리케이션을 구축하겠습니다. 우리의 예는 사용자가 작업을 보고, 추가하고, 삭제할 수 있는 기본 "작업 관리자"입니다.

1단계: 프로젝트 초기화

새 Node.js 프로젝트를 생성하고 필요한 종속 항목을 설치하는 것부터 시작하세요.

# Create a project folder
mkdir mvc-task-manager
cd mvc-task-manager

# Initialize Node.js
npm init -y

# Install Express and other dependencies
npm install express ejs mongoose body-parser
  • Express: 컨트롤러 및 경로 설정에 이상적인 Node.js용 미니멀리스트 웹 프레임워크입니다.
  • EJS: 동적 HTML 뷰를 렌더링할 수 있는 템플릿 엔진
  • Mongoose: 데이터베이스의 데이터를 모델링하는 MongoDB용 인기 라이브러리입니다.
  • Body-parser: 미들웨어에서 들어오는 요청 본문을 구문 분석하는 미들웨어입니다.

2단계: 프로젝트 구조 설정

애플리케이션을 모델, 뷰 및 컨트롤러 폴더로 구성합니다. 이 구조는 MVC 패턴에 필수적입니다.

mvc-task-manager/
│
├── models/
│   └── Task.js
│
├── views/
│   ├── index.ejs
│   └── tasks.ejs
│
├── controllers/
│   └── taskController.js
│
├── public/
│   └── css/
│       └── styles.css
│
├── app.js
└── package.json

3단계: 모델 구성

모델은 애플리케이션의 데이터 구조를 나타냅니다. 이 작업 관리자의 경우 Mongoose를 사용하여 MongoDB에서 작업 모델을 정의합니다.

// models/Task.js

const mongoose = require('mongoose');

const taskSchema = new mongoose.Schema({
    title: { type: String, required: true },
    description: { type: String },
    completed: { type: Boolean, default: false }
});

module.exports = mongoose.model('Task', taskSchema);

여기서 taskSchema는 제목, 설명, 완료 필드로 작업 모델을 정의합니다.

4단계: 컨트롤러 생성

컨트롤러는 애플리케이션 로직을 처리하고, 사용자 입력을 처리하고, 모델과 상호작용하고, 뷰에 데이터 렌더링을 지시합니다.

// controllers/taskController.js

const Task = require('../models/Task');

exports.getTasks = async (req, res) => {
    const tasks = await Task.find();
    res.render('tasks', { tasks });
};

exports.createTask = async (req, res) => {
    const { title, description } = req.body;
    await Task.create({ title, description });
    res.redirect('/tasks');
};

exports.deleteTask = async (req, res) => {
    await Task.findByIdAndDelete(req.params.id);
    res.redirect('/tasks');
};

이 컨트롤러는 세 가지 주요 작업을 정의합니다.

  • getTasks: 데이터베이스에서 모든 작업을 가져옵니다.
  • createTask: 데이터베이스에 새 작업을 추가합니다.
  • deleteTask: ID별로 작업을 삭제합니다.

5단계: 뷰 설정

이 예에서는 EJS를 사용하여 HTML 뷰를 렌더링합니다. 이를 통해 브라우저에 작업 데이터를 동적으로 표시할 수 있습니다.

홈페이지용 index.ejs 파일과 작업 표시용Tasks.ejs 파일을 만듭니다.

<!-- views/index.ejs -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task Manager</title>
    <link rel="stylesheet" href="/css/styles.css">
</head>
<body>
    <h1>Welcome to Task Manager</h1>
    <a href="/tasks">View Tasks</a>
</body>
</html>

tasks.ejs 파일은 작업 목록을 렌더링하고 작업 추가 또는 삭제를 위한 양식을 제공합니다.

<!-- views/tasks.ejs -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task List</title>
</head>
<body>
    <h1>Tasks</h1>

    <ul>
        <% tasks.forEach(task => { %>
            <li><%= task.title %> - <a href="/delete/<%= task._id %>">Delete</a></li>
        <% }) %>
    </ul>

    <form action="/add" method="POST">
        <input type="text" name="title" placeholder="Task Title" required>
        <input type="text" name="description" placeholder="Description">
        <button type="submit">Add Task</button>
    </form>
</body>
</html>

6단계: 경로 설정

기본 app.js 파일에 경로를 정의하여 각 URL 끝점을 관련 컨트롤러 기능에 연결합니다.

// app.js

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const taskController = require('./controllers/taskController');

const app = express();
app.set('view engine', 'ejs');

mongoose.connect('mongodb://localhost:27017/taskDB', { useNewUrlParser: true, useUnifiedTopology: true });

app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static('public'));

// Routes
app.get('/', (req, res) => res.render('index'));
app.get('/tasks', taskController.getTasks);
app.post('/add', taskController.createTask);
app.get('/delete/:id', taskController.deleteTask);

const PORT = 3000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

7단계: CSS를 사용한 스타일 지정

스타일링을 추가하려면 public/css/ 폴더에 styles.css 파일을 만드세요. 기본 스타일을 추가하여 애플리케이션을 시각적으로 매력적으로 만들 수 있습니다.

8단계: 애플리케이션 실행 및 테스트

다음을 사용하여 애플리케이션을 시작하세요.

node app.js

브라우저에서 http://localhost:3000을 방문하세요. MVC 아키텍처를 사용하여 보기 간을 탐색하고, 새 작업을 추가하고, 작업을 삭제할 수 있습니다.

Node.js의 MVC 아키텍처 모범 사례

  1. 컨트롤러를 얇게 유지: 비즈니스 로직은 주로 모델에 있어야 합니다.
  2. 재사용 가능한 코드를 위해 미들웨어 사용: 예를 들어 인증이나 요청 로깅을 위해 미들웨어를 사용하세요.
  3. 컨트롤러와 별도의 경로: 컨트롤러를 깔끔하고 집중적으로 유지하려면 별도의 파일에 경로를 정의하는 것이 좋습니다.
  4. 코드 모듈화: 모델, 뷰, 컨트롤러를 별도의 파일과 폴더에 보관하여 구조를 유지하세요.

위 내용은 Node.js를 사용한 MVC 패턴 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

mvc css html express define for Logging using public Interface delete JS function this display input database mongodb http
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：내 Firebase 참조가 'once()' 함수 외부에서 정의되지 않은 이유는 무엇입니까?다음 기사：내 Firebase 참조가 'once()' 함수 외부에서 정의되지 않은 이유는 무엇입니까?

관련 기사

더보기