nodejs에서 html을 동적으로 수정하는 방법
- PHPz원래의
- 2023-04-26 09:10:53788검색
웹 애플리케이션이 성숙하고 발전함에 따라 점점 더 많은 개발자가 Node.js를 사용하여 백엔드 애플리케이션을 구축하기 시작하고 있습니다. Node.js는 확장 가능한 고성능 웹 애플리케이션을 구축하기 위한 오픈 소스 서버측 JavaScript 환경입니다. HTML을 생성할 수 있는 템플릿 엔진을 포함하여 몇 가지 매우 유용한 모듈과 라이브러리를 제공합니다.
이 기사에서는 Node.js를 사용하여 HTML을 동적으로 수정하는 방법을 살펴보겠습니다. 먼저 일반적으로 사용되는 몇 가지 템플릿 엔진을 소개한 다음 이를 Node.js와 함께 사용하는 방법에 대해 논의하겠습니다. 마지막으로 이러한 기술을 더 잘 이해하고 실습하는 데 도움이 되는 몇 가지 실제 사례를 보여 드리겠습니다.
일반적으로 사용되는 템플릿 엔진
템플릿 엔진을 사용하기 전에 다양한 템플릿 엔진의 차이점과 장단점을 이해해야 합니다. 다음은 일반적으로 사용되는 템플릿 엔진입니다.
- EJS: EJS는 JavaScript 구문을 사용하여 HTML 코드에 동적 데이터를 삽입하는 데 도움이 되는 JavaScript 기반 템플릿 엔진입니다. 주요 장점은 배우고 사용하기 쉽고 클라이언트 측 및 서버 측 렌더링에도 사용할 수 있다는 것입니다.
- Handlebars: Handlebars는 핸들바 구문을 사용하여 HTML 코드에 동적 데이터를 삽입할 수 있는 또 다른 JavaScript 기반 템플릿 엔진입니다. 주요 장점은 클라이언트측 렌더링과 서버측 렌더링 모두에 사용할 수 있고 성능이 매우 뛰어나므로 뛰어난 호환성입니다.
- Jade: Jade는 들여쓰기와 공백을 사용하여 HTML 코드에 동적 데이터를 삽입하는 데 도움이 되는 문자 기반 템플릿 엔진입니다. 장점은 간결한 구문과 쉬운 유지 관리입니다.
Node.js와 함께 템플릿 엔진 사용
이제 다양한 템플릿 엔진을 이해했으므로 이를 사용하여 HTML을 동적으로 수정할 수 있습니다. Node.js에서 템플릿 엔진을 사용하는 몇 가지 단계는 다음과 같습니다.
- 템플릿 엔진 설치: 먼저 선택한 템플릿 엔진을 설치해야 합니다. 이 예에서는 EJS를 템플릿 엔진으로 사용합니다. EJS를 설치하려면 다음 명령을 실행합니다.
npm install ejs --save
- Express 애플리케이션 구성: 애플리케이션을 생성하기 위해 Node.js용 Express 프레임워크를 사용합니다. Express를 사용하려면 Express를 설치한 다음 애플리케이션에서 설정해야 합니다. 샘플 코드는 다음과 같습니다.
const express = require('express');
const app = express();
app.set('views', './views');
app.set('view engine', 'ejs');
app.get('/users', (req, res) => {
const users = [
{ name: 'Alice', email: 'alice@example.com' },
{ name: 'Bob', email: 'bob@example.com' },
{ name: 'Charlie', email: 'charlie@example.com' },
];
res.render('users', { users });
});
app.listen(3000, () => {
console.log('listening on port 3000');
});
이 애플리케이션에서는 애플리케이션의 뷰 디렉터리와 뷰 엔진을 설정하고 "users"라는 뷰를 렌더링하는 간단한 경로 핸들러를 제공하며, 이름이 지정된 배열이 포함된 뷰에 개체를 전달합니다. "사용자".
- 뷰 파일 생성: 다음으로 “users.ejs”라는 뷰 파일을 생성해야 합니다. 이 파일에는 동적 데이터와 HTML 코드가 포함됩니다. 다음은 샘플 코드입니다.
<!doctype html>
<html>
<head>
<title>Users</title>
</head>
<body>
<h1>Users</h1>
<ul>
<% users.forEach(user => { %>
<li><%= user.name %> - <%= user.email %></li>
<% }); %>
</ul>
</body>
</html>
이 뷰 파일에서는 EJS 템플릿 엔진의 구문을 사용하여 동적 데이터를 삽입합니다. forEach 루프를 사용하여 사용자 배열을 반복하고 HTML 코드의 <% %> 태그를 사용하여 JavaScript 코드를 실행했습니다. 또한 <%= %> 태그를 사용하여 사용자 데이터를 삽입합니다.
- 애플리케이션 실행: 마지막으로 애플리케이션을 실행해야 합니다. 애플리케이션을 실행하려면 다음 명령을 실행하세요.
node app.js
그런 다음 브라우저를 열고 http://localhost:3000/users를 방문하세요. 이름과 이메일 주소가 포함된 세 명의 사용자가 포함된 페이지를 볼 수 있습니다.
요약
이 기사에서는 Node.js와 템플릿 엔진을 사용하여 HTML을 동적으로 수정하는 방법을 살펴보았습니다. 우리는 일반적으로 사용되는 몇 가지 템플릿 엔진을 소개하고 EJS를 사용하여 이를 결합하는 방법을 보여주었습니다. 이러한 기술을 사용하면 웹 애플리케이션에서 동적 HTML을 쉽게 생성하고 강력한 사용자 경험을 제공할 수 있습니다.
위 내용은 nodejs에서 html을 동적으로 수정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!