728x90
EJS는 Node.js에서 사용되는 템플릿 엔진으로, HTML 문법을 그대로 사용할 수 있는 특징이 있습니다. EJS를 사용하면 정적인 HTML에 동적인 기능을 추가할 수 있으며, 자바스크립트 문법을 사용할 수 있습니다.
EJS의 주요 특징
* 동적 페이지 생성: EJS를 사용하면 서버에서 보낸 변수를 가져와 동적으로 페이지를 생성할 수 있습니다.
* 자바스크립트 코드 삽입: EJS의 기본 문법에는 주석, JS 코드, 변수 출력, 파일 분할 등이 포함되어 있습니다.
* 레이아웃 기능 지원: EJS는 Pug와 달리 레이아웃 기능을 지원하지 않지만, 부분 템플릿 기능을 제공합니다.
EJS 사용 방법
1. Node.js 프로젝트에 'ejs' 패키지를 설치합니다.
2. 뷰 엔진을 설정하여 EJS를 사용하도록 구성합니다.
3. EJS 문법을 사용하여 동적 HTML 페이지를 생성합니다.
EJS 설치
npm install ejs
Express 서버 설정
Express 웹 프레임워크를 사용하여 서버를 구축하고, EJS를 뷰 엔진으로 설정합니다.
const express = require('express');
const app = express();
// EJS 뷰 엔진 설정
app.set('view engine', 'ejs');
// 데이터 준비
const users = [
{ name: 'John', age: 30 },
{ name: 'Jane', age: 25 },
{ name: 'Bob', age: 35 }
];
// 라우트 설정
app.get('/', (req, res) => {
res.render('index', { users: users });
});
EJS 템플릿 작성
'index.ejs' 파일에서 EJS 문법을 사용하여 동적 HTML 페이지를 작성합니다.
<!DOCTYPE html>
<html>
<head>
<title>User List</title>
</head>
<body>
<h1>User List</h1>
<ul>
<% users.forEach(user => { %>
<li><%= user.name %> (age: <%= user.age %>)</li>
<% }); %>
</ul>
</body>
</html>
'웹개발 > front-end' 카테고리의 다른 글
| 웹어셈블리(WebAssembly) (0) | 2024.06.20 |
|---|---|
| [CSS]bakcground-position (0) | 2024.05.18 |
| [React]useState (0) | 2024.04.22 |
| 자바스크립트 참조타입과 원시타입 그리고 깊은 복사(DeepCopy) (0) | 2024.04.22 |
| [CSS]@Keyframes (0) | 2024.04.21 |