Node.js를 사용한 MVC 패턴 이해
- Patricia Arquette원래의
- 2024-11-07 03:04:02697검색
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}`));
7단계: CSS를 사용한 스타일 지정
스타일링을 추가하려면 public/css/ 폴더에 styles.css 파일을 만드세요. 기본 스타일을 추가하여 애플리케이션을 시각적으로 매력적으로 만들 수 있습니다.
8단계: 애플리케이션 실행 및 테스트
다음을 사용하여 애플리케이션을 시작하세요.
node app.js
브라우저에서 http://localhost:3000을 방문하세요. MVC 아키텍처를 사용하여 보기 간을 탐색하고, 새 작업을 추가하고, 작업을 삭제할 수 있습니다.
Node.js의 MVC 아키텍처 모범 사례
- 컨트롤러를 얇게 유지: 비즈니스 로직은 주로 모델에 있어야 합니다.
- 재사용 가능한 코드를 위해 미들웨어 사용: 예를 들어 인증이나 요청 로깅을 위해 미들웨어를 사용하세요.
- 컨트롤러와 별도의 경로: 컨트롤러를 깔끔하고 집중적으로 유지하려면 별도의 파일에 경로를 정의하는 것이 좋습니다.
- 코드 모듈화: 모델, 뷰, 컨트롤러를 별도의 파일과 폴더에 보관하여 구조를 유지하세요.
위 내용은 Node.js를 사용한 MVC 패턴 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!