이 자습서에서는 MVC (Model-view-controller) 소프트웨어 디자인 패턴을 사용하여 노드 백엔드를 만드는 방법을 배웁니다. 이 디자인 패턴은 세 가지 다른 요소로 분리 된 사용자 인터페이스를 만드는 기능을 제공합니다. 비즈니스 로직은 데이터, 사용자 인터페이스 및 사용자 입력이 함께 혼합되지 않도록 분리됩니다. 이를 통해 서로 다른 계층이 분리되어 훨씬 더 깔끔한 아키텍처가 가능하여 변경이 더 빠르고 쉽게 수행 될 수 있습니다.
그러나 여기서 언급해야 할 한 가지 중요한 주의 사항은 요즘 이 소프트웨어 디자인 패턴의 보기 부분이 수년 전처럼 더 이상 관련성이 없다는 것입니다. 이는 애플리케이션의 프런트 엔드를 구축하는 데 사용되는 React, Vue, Angular 및 Svelte와 같은 프런트 엔드 프레임 워크가 있기 때문입니다. 그럼에도 불구하고 백엔드 개발자가 일종의 데이터를 반환하는 REST 및 GraphQL API를 빌드 할 때 모델과 컨트롤러가 오늘날에도 여전히 사용되기 때문에 이러한 개념은 여전히 알아두면 유용합니다. API에서 사용되며 fetch 또는 Axios API를 사용하여 검색되는 JSON (JavaScript Object Notation)과 같은 데이터입니다.
전제 조건
아래 도구와 패키지가 설치되어 있는지 확인하십시오.
디자인 패턴
모델
모델은 이 디자인 패턴의 주요 구성 요소입니다. 구조 내부의 모든 데이터를 처리합니다. 여기에서 모든 데이터, 비즈니스 로직 및 원칙이 정의됩니다.
View
기본적으로 보기는 사용자 인터페이스입니다. 이것은 사용자가 시각적으로 보게 될 애플리케이션의 일부입니다. 그래서 기본적으로 설계된 프런트 엔드입니다. React, Vue, Angular 및 Svelte와 같은 프런트 엔드 프레임 워크가 존재하기 전에 백엔드 개발자는 EJS, PUG 및 Handlebars와 같은 템플릿 언어를 사용했습니다.
Controller
컨트롤러는 애플리케이션의 두뇌로 간주 할 수 있습니다. 사용자가 요청하는 입력을 받아 모델과 뷰가 해석 할 수 있는 명령으로 변환합니다.
프로젝트 설정
데스크탑이나 디렉토리에 my-app __라는 폴더를 만든 다음 그 안에 __cd를 만듭니다. 또한 코드 편집기에서 폴더를 엽니다. my-app 폴더에 있는지 확인한 다음 터미널 앱에서 아래 명령을 실행하십시오.
mkdir backend
cd backend
npm init -y
npm i express nodemon ejs
mkdir controllers models public routes src
mkdir src/pages
touch index.js이렇게 하면 프로젝트의 기본 설정이 생성됩니다. 이제 간단한 익스프레스 서버를 만들어 보겠습니다. 아래 코드를 복사하여 index.js 파일에 붙여 넣으십시오.
const express = require('express');
const app = express();
app.get('/', (req, res) => res.send('Home Route'));
const port = process.env.PORT || 5000;
app.listen(port, () => console.log(`Server running on port ${port}, http://localhost:${port}`));이제 이러한 실행 스크립트를 package.json 파일에 추가하십시오.
"scripts": {
"start": "node index.js",
"dev": "nodemon index.js"
},터미널 앱에서 아래 실행 코드 중 하나를 실행하여 웹 브라우저에서 실행 중인 앱을 확인합니다. 첫 번째 실행 코드는 노드를 사용하므로 변경 사항을 보려면 서버를 다시 시작해야 합니다. 두 번째 실행 코드는 핫 리로딩을 수행하는 Nodemon을 사용합니다. 즉, 새로운 변경 사항을 보려면 웹 브라우저를 다시 로드 하기 만하면 됩니다.
npm run startnpm run devMVC 컨트롤러 만들기
컨트롤러를 만들 차례입니다. admin.js라는 두 개의 파일을 만들고 하나는 controllers 폴더에, 다른 하나는 routes 폴더에 넣습니다. 다음으로 AnimeData.json 파일을 만들고 모델 폴더에 넣습니다. 이제 index.ejs 파일을 만들고 src/pages 폴더에 넣습니다. index.ejs 파일에 아래 코드를 추가하십시오.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home Route</title>
</head>
<body>
<h1>Home Route</h1>
</body>
</html>아래 코드를 AnimeData.json 파일에 넣으십시오.
[
{
"id": "1",
"type": "Anime",
"name": "Boku no Hero Academia"
},
{
"id": "2",
"type": "Anime",
"name": "Jujutsu Kaisen"
},
{
"id": "3",
"type": "Anime",
"name": "Shingeki no Kyojin"
}
]controllers 폴더 안의 admin.js 파일에 아래 코드를 추가합니다.
const AnimeData = require('../models/AnimeData.json');
exports.getIndex = (req, res) => {
res.render('index');
};
exports.getAnime = (req, res) => {
res.json(AnimeData);
};다음으로 routes 폴더 내의 admin.js 파일에 아래 코드를 추가하십시오.
const express = require('express');
const adminController = require('../controllers/admin');
const router = express.Router();
router.get('/', adminController.getIndex);
router.get('/anime', adminController.getAnime);
module.exports = router;마지막으로 루트 폴더의 index.js 파일을 아래 코드로 업데이트하십시오.
const express = require('express');
const path = require('path');
const adminRoute = require('./routes/admin');
const app = express();
// EJS template engine setup
app.set('view engine', 'ejs');
app.set('views', './src/pages');
// Setting up the directory on the server for CSS, JavaScript and media files
app.use('/static', express.static(path.join(__dirname + '/public')));
// Configuring the server to work with form submissions and json files
app.use(express.urlencoded({ extended: false }));
app.use(express.json());
// Connecting all of the routes
app.use('/', adminRoute);
const port = process.env.PORT || 5000;
app.listen(port, () => console.log(`Server running on port ${port}, http://localhost:${port}`));페이지를 다시로드하거나 서버를 다시 시작해야 합니다. 이제 홈 경로 http://localhost:5000으로 이동하면 index.ejs 파일을로드해야합니다. http://localhost:5000/anime로 이동하면 브라우저에 반환 된 json 파일의 데이터를 볼 수 있습니다.
CSS 및 JavaScript 파일을 프런트 엔드에 연결
마지막 단계는 CSS 스타일 시트와 JavaScript 파일을 index.ejs 파일에 연결하는 것입니다. 공용 폴더 안에 두 개의 폴더를 만듭니다. 하나는 css이고 다른 하나는 js입니다. 이제 styles.css 파일을 만들고 아래 코드를 사용하여 css 폴더에 넣으십시오.
body {
background: #bada55;
}다음으로 scripts.js 파일을 만들고 아래 코드로 js 폴더 안에 넣으십시오.
console.log('Hello World');마지막으로 이제 CSS 및 JavaScript 파일에 대한 링크가 있는 아래 코드로 index.ejs 파일을 업데이트하십시오.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home Route</title>
<link rel="stylesheet" href="http://localhost:5000/static/css/styles.css" />
</head>
<body>
<h1>Home Route</h1>
<script src="http://localhost:5000/static/js/scripts.js"></script>
</body>
</html>브라우저를 다시로드 하거나 서버를 다시 시작하십시오. 홈 경로로 이동하면 녹색 배경이 표시되고 브라우저 콘솔로 이동하면 Hello World 코드가 표시됩니다. 그리고 이것이 MVC 소프트웨어 디자인 패턴을 사용하여 노드 백엔드 서버를 만들기 위한 기본 사항입니다. 백엔드를 React와 같은 프레임 워크에 연결할 계획이라면 src 폴더가 필요하지 않습니다. 대신 데이터를 json으로 반환하기 위해 models 폴더를 사용합니다. 모델 폴더는 백엔드를 mongodb, postgresql 및 HarperDB와 같은 데이터베이스에 연결하는 데 사용되는 프로그래밍 논리를 만드는 장소이기도 합니다.
마지막 생각들
이 기사를 즐겁게 읽고 그로부터 무언가를 배웠기를 바랍니다. 콘텐츠 제작자이자 기술 작가로서 저는 제 지식을 공유하고 다른 사람들이 목표를 달성하도록 돕는 데 열정적입니다. 링크 트리에서 내 모든 소셜 미디어 프로필과 블로그를 찾을 수 있는 소셜 미디어를 통해 연결합시다.
https://dev.to/andrewbaisden/creating-a-node-back-end-using-the-mvc-software-design-pattern-5d82
등록된 댓글이 없습니다.
