EJS는 "Embedded JavaScript"의 약자로, 서버에서 클라이언트로 전송되기 전에 서버 측에서 HTML 문서와 JavaScript 코드를 결합하는 템플릿 엔진입니다. Express에서 많이 사용되며, HTML 내에서 JavaScript를 사용할 수 있게 해줍니다. 이 글에서는 EJS에서 자주 사용하는 문법과 예제를 함께 소개합니다.
기본 문법
EJS에서는 다음과 같은 기본 문법을 사용합니다.
- <% ... %>: JavaScript 코드 실행
- <%= ... %>: JavaScript 표현식의 결과를 문자열로 변환하여 출력
- <%- ... %>: 이스케이프되지 않은(raw) 데이터 출력, HTML태그를 웹 브라우저에서 해석해서 보여주고 싶을 때 주로 사용합니다.
- <%# ... %>: 주석 처리, 클라이언트 웹 브라우저에서는 보이지 않게 됩니다.
- <%% ... %>: 리터럴 구문 출력 (예: <%%는 <%로 출력됩니다.)
예제:
<% for (let i = 0; i < items.length; i++) { %>
<li><%= items[i] %></li>
<% } %>for문을 사용해서 "li" HTML Element를 생성하는 예제입니다.
변수 사용
EJS 템플릿에서 변수를 사용하려면, <%= 변수명 %> 구문을 사용합니다.
예제:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1><%= title %></h1>
<p><%= content %></p>
</body>
</html>서버에서 넘겨받은 title, content 변수를 출력하는 예제입니다.
조건문 사용
EJS에서 조건문을 사용하려면, 일반 JavaScript 코드와 동일한 방법으로 작성하면 됩니다.
예제:
<% if (user) { %>
<h2>Welcome, <%= user.name %>!</h2>
<% } else { %>
<h2>Welcome, guest!</h2>
<% } %>
반복문 사용
EJS에서 반복문을 사용하려면, 일반 JavaScript 코드와 동일한 방법으로 작성하면 됩니다.
예제:
<ul>
<% items.forEach(function(item) { %>
<li><%= item %></li>
<% }); %>
</ul>
템플릿 포함(include)
EJS에서는 템플릿 파일을 다른 템플릿 파일에 포함할 수 있습니다. 이를 사용하면 중복 코드를 줄이고, 코드 재사용성을 높일 수 있습니다.
예제:
header.ejs
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>footer.ejs
<footer>
<p>© 2023 My Website. All rights reserved.</p>
</footer>main.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
</head>
<body>
<%- include('header') %>
<main>
<h2>Welcome to my website!</h2>
<p>This is the homepage of my awesome website.</p>
</main>
<%- include('footer') %>
</body>
</html>위 예제에서는 header.ejs와 footer.ejs를 각각 포함하는 방식으로 main.ejs 파일을 구성했습니다. 이렇게 하면 공통적으로 사용되는 헤더와 푸터를 별도의 파일로 관리할 수 있습니다.
레이아웃(Layout) 사용
레이아웃은 페이지의 공통 구조를 정의하는 데 사용되며, 각 페이지에서 변경되는 부분만 삽입하여 완성합니다.
예제:
layout.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= title %></title>
</head>
<body>
<%- include('header') %>
<main>
<%- body %>
</main>
<%- include('footer') %>
</body>
</html>index.ejs
<%
let title = "Home";
let body = `
<h2>Welcome to my website!</h2>
<p>This is the homepage of my awesome website.</p>
`;
%>
<%- include('layout') %>위 예제에서는 layout.ejs 파일을 기본 레이아웃으로 사용하고, index.ejs에서 변경되는 부분만 삽입하여 페이지를 완성했습니다. 이렇게 하면 페이지별로 공통되는 부분을 중복 없이 작성할 수 있습니다.
더 많은 문법은 아래의 링크에서 확인 하시기 바랍니다.
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
감사합니다.
댓글