728x90
반응형
SMALL
템플릿 엔진의 필요성을 이해하고, EJS 템플릿 엔진을 설치하고 사용하는 방법을 익힌다.
1. 템플릿 엔진의 필요성
템플릿 엔진이란?
· 템플릿 엔진은 서버 사이드에서 HTML을 동적으로 생성하기 위해 사용되는 도구이다.
· JavaScript 변수와 로직을 사용하여 HTML 템플릿을 생성할 수 있다.
728x90
템플릿 엔진의 필요성
· 서버에서 데이터를 HTML에 삽입하여 동적인 웹 페이지를 생성할 수 있다.
· 재사용 가능한 템플릿을 통해 코드의 중복을 줄이고, 유지보수성을 높일 수 있다.
2. EJS 설치 및 사용법
EJS란?
· EJS(Embedded JavaScript)는 간단하고 사용하기 쉬운 템플릿 엔진으로, HTML 내에 JavaScript 코드를 삽입할 수 있다.
반응형
EJS 설치
· 먼저 Express 프로젝트에서 EJS를 설치한다.
npm install ejs
EJS 설정
· Express 애플리케이션에서 EJS를 템플릿 엔진으로 설정한다.
const express = require('express');
const app = express();
const port = 3000;
// EJS를 템플릿 엔진으로 설정
app.set('view engine', 'ejs');
// 뷰 디렉토리 설정 (기본값은 'views' 디렉토리)
app.set('views', './views');
EJS 템플릿 작성
· views 디렉토리에 EJS 템플릿 파일을 생성한다. 예를 들어, index.ejs 파일을 생성한다.
<!-- views/index.ejs -->
<!DOCTYPE html>
<html>
<head>
<title>My EJS Page</title>
</head>
<body>
<h1>Welcome to <%= title %>!</h1>
<p>This is a simple EJS template example.</p>
</body>
</html>
SMALL
EJS 템플릿 렌더링
· Express 라우트에서 EJS 템플릿을 렌더링한다.
app.get('/', (req, res) => {
res.render('index', { title: 'EJS Example' });
});
app.listen(port, () => {
console.log(`Server is running at http://localhost:${port}`);
});
· 서버를 시작하고 브라우저에서 http://localhost:3000을 열어 EJS 템플릿이 렌더링된 결과를 확인한다.
3. EJS 사용 예제
동적 데이터 삽입
· EJS 템플릿에서 동적으로 데이터를 삽입하는 방법을 알아보자.
<!-- views/index.ejs -->
<!DOCTYPE html>
<html>
<head>
<title>My EJS Page</title>
</head>
<body>
<h1>Welcome to <%= title %>!</h1>
<ul>
<% users.forEach(user => { %>
<li><%= user.name %> - <%= user.age %></li>
<% }); %>
</ul>
</body>
</html>app.get('/', (req, res) => {
const users = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 35 }
];
res.render('index', { title: 'User List', users });
});
조건문과 반복문
· EJS 템플릿에서 조건문과 반복문을 사용하여 동적 콘텐츠를 생성할 수 있다.
<!-- views/index.ejs -->
<!DOCTYPE html>
<html>
<head>
<title>My EJS Page</title>
</head>
<body>
<h1>Welcome to <%= title %>!</h1>
<ul>
<% if (users.length > 0) { %>
<% users.forEach(user => { %>
<li><%= user.name %> - <%= user.age %></li>
<% }); %>
<% } else { %>
<p>No users found.</p>
<% } %>
</ul>
</body>
</html>
- 이전 수업 목록
728x90
반응형
LIST
'프로그래밍 > Node.js' 카테고리의 다른 글
| [Next.js14 강의] 16강 - React의 useState와 useEffect 사용법 (0) | 2024.09.09 |
|---|---|
| [Node.js 강의 시리즈] 22강 - RESTful API 설계 (0) | 2024.07.23 |
| [Node.js 강의 시리즈] 20강 - 미들웨어 (0) | 2024.07.19 |
| [Node.js 강의 시리즈] 19강 - 라우팅 (0) | 2024.07.18 |
| [Node.js 강의 시리즈] 18강 - Express를 사용한 웹 서버 구축 (1) | 2024.07.17 |