Node.js를 사용한 MVC 패턴 이해-JS 튜토리얼-php.cn

Understanding the MVC Pattern with Node.js

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

MVC 패턴이란 무엇입니까?

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

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

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

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

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

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}`));

로그인 후 복사