Microsoft Student (2023)728x90
728x90
EJS(Embedded JavaScript)
들어가며
- EJS(Embedded JavaScript)에 대해 알아보자.
EJS(Embedded JavaScript)
개념
- JavaScript 기반의 템플릿 엔진
- 서버 측(Server-side)에서 동적인 웹 페이지를 생성하기 위해 사용된다.
- EJS를 사용하면 HTML 코드 안에 JavaScript 코드를 삽입하여 동적으로 페이지를 생성할 수 있다.
특징
① 편리한 문법
- EJS는 간단하고 직관적인 문법을 제공한다.
- HTML 안에 @<% %>@와 같은 태그를 사용하여 JavaScript 코드를 삽입할 수 있다.
② 템플릿 재사용
- EJS를 사용하면 템플릿을 생성하여 코드를 재사용할 수 있다.
- 이것은 웹 애플리케이션에서 일관된 레이아웃을 유지하는 데 도움이 된다.
③ 변수 삽입
- EJS를 사용하면 서버에서 전달된 데이터를 템플릿에 쉽게 삽입할 수 있다.
- 이것을 통해 동적으로 데이터를 표시할 수 있다.
설치
- @npm@을 이용하여 간단하게 EJS를 설치할 수 있다.
> npm install ejs
(참고) VS Code 확장 프로그램 설치 : EJS language support
사용 방법
방법 1
index.js
app.post("/submit", (req, res) => {
res.render("index.ejs",
{ name: req.body["name"] }
);
});
index.ejs
- 진행하는 프로젝트의 @views@ 폴더 안에 다음과 같이 @ejs@ 파일을 생성해준다.
<body>
<h1>
Hello <%= name %>
</h1>
</body>
방법 2
index.js
let bowl = ["Apples", "Oranges", "Pears"];
app.get("/", (req, res) => {
res.render("index.ejs", { fruits: bowl });
});
index.ejs
<body>
<ul>
<% for (let i = 0; i < fruits.length; i++) { %>
<li>
<%= fruits[i] %>
</li>
</ul>
</body>
EJS 태그(Tag)
① @<% %>@
- 일반적인 코드 블록
- 이 안에는 JavaScript 코드가 들어가며, 해당 JavaScript 코드가 실행(Execution)된다.
<% if (user) { %>
<p>Welcome, <%= user.username %>!</p>
<% } else { %>
<p>Welcome, Guest!</p>
<% } %>
② @<%= variable %>@
- 변수를 출력하는 데 사용된다.
- 서버에서 전달된 데이터를 템플릿에 동적으로 삽입할 때 유용하다.
<p>Page Title: <%= pageTitle %></p>
③ @<%- %>@
- HTML 이스케이프를 해제하여 원시 HTML을 출력(렌더링)할 때 사용된다.
- 주로 사용자가 입력한 HTML을 표시할 때 유용하다.
<p>Description: <%- <h1>Hello</h1> %></p>
④ @<%% %%>@
- EJS 태그 내에서 @<% %>@를 표현하는 방법 중 하나
- EJS에서는 코드 블록을 나타내기 위해 @<% %>@를 사용하는데, 만약 그 자체로 문자열로 표현하고 싶을 때, @<%% %%>@와 같이 중복해서 사용한다.
<%% var message = "This is a message"; %%> <!-- 출력: <% var message = "This is a message"; %> -->
⑤ @<%# %>@
- 주석(Comment)을 추가할 때 사용한다.
- 클라이언트쪽에서는 렌더링되지 않는다.
<%# This is a comment %>
⑥ @<% include("<FILE_NAME>") %>@
- 다른 EJS 파일을 현재 파일에 포함시킬 때 사용한다.
- 코드를 재사용하고 템플릿을 모듈화할 수 있다.
<% include partials/header.ejs %>
사용 예
index.js
import express from "express";
const app = express();
const port = 3000;
app.get("/", (req, res) => {
const today = new Date();
const day = today.getDay(); // 0(일요일) ~ 6(토요일)
let type = "a weekday";
let advice = "it's time to work hard";
if (day === 0 || day === 6) { // 토요일 or 일요일
type = "the weekend";
advice = "it's time to have some fun";
}
res.render("index.ejs", {
dayType: type,
advice: advice,
});
});
app.listen(port, () => {
console.log(`Server running on port ${port}.`);
});
index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Weekday Warrior</title>
</head>
<body>
<h1>Hey, it's <%= dayType %>, <%= advice %>!</h1>
</body>
</html> |
 |
참고 사이트
EJS -- Embedded JavaScript templates
Simple syntax JavaScript code in simple, straightforward scriptlet tags. Just write JavaScript that emits the HTML you want, and get the job done!
ejs.co
ejs
Embedded JavaScript templates. Latest version: 3.1.9, last published: 8 months ago. Start using ejs in your project by running `npm i ejs`. There are 13009 other projects in the npm registry using ejs.
www.npmjs.com
728x90
728x90
'Programming > Node.js' 카테고리의 다른 글
| [Node.js] 모듈 설치 시 의존성 문제 해결하기 (npm-check-updates) (1) | 2023.11.27 |
|---|---|
| [Node.js] PostgreSQL 설치 및 사용해보기 (0) | 2023.11.17 |
| [Node.js] morgan 패키지 (0) | 2023.11.09 |
| [Node.js] body-parser 패키지 (0) | 2023.11.09 |
| [Node.js] 노드몬(nodemon) 패키지 (0) | 2023.11.08 |
| [Node.js] Express.js (0) | 2023.11.08 |
| [Node.js] URL QR 코드 생성기 만들기 (0) | 2023.11.07 |
| [Node.js] 모듈 불러오는 방식 (require, import) (0) | 2023.11.07 |