ejs란?
Express에서 사용되는 템플릿 엔진이다. Pug는 HTML코드를 최소화했다면 ejs는 HTML코드를 그대로 살리고 <%= %>와 같은 구문을 넣어 서버의 데이터를 사용할 수 있다.
위와 같은 구문은 JAVA/JSP를 공부할 때 자주 사용했었기 때문에 꽤나 익숙하다.
Express 연결하기
우선은 app에 ejs를 셋팅한다. 그 후 ejs를 활용할 곳에 render함수를 활용하여 값을 넣어 보내면 된다.
// app.js
app.set('view engine', 'ejs');
app.set('views', 'views');
...
// admin.js
res.render("add-product", {
pageTitle: "Add Product",
path: "/admin/add-product"
});
그리고 .ejs 확장자로 파일을 만들어주면 된다. 그래야 ejs 구문을 랜더링할 수 있다.(아래와 같은 파일 형식)
ejs 구문설명
<%- include('includes/shop-head.ejs') %>
</head>
<body>
<%- include('includes/navigation.ejs')%>
<main>
<% if (prods.length > 0) { %>
<div class="grid">
<% for (let product of prods) { %>
<article class="card product-item">
<header class="card__header">
<h1 class="product__title"><%= product.title %></h1>
</header>
<div class="card__image">
<img src="image" alt="A Book">
</div>
<div class="card__content">
<h2 class="product__price">$19.99</h2>
<p class="product__description">A very interesting book about so many even more interesting things!</p>
</div>
<div class="card__actions">
<button class="btn">Add to Cart</button>
</div>
</article>
<% } %>
</div>
<% } else { %>
<h1>Product Not Found!</h1>
<% } %>
</main>
<%- include('includes/end.ejs') %>1. <%- %> include
<%- %> 구문은 페이지를 레이아웃처리 할 때 include를 활용하기 위한 구문이다.(아직 이것만 배웠다.) 형식은 아래와 같다.
<%- include('레이아웃 저장폴더/파일명') %>
ejs는 pug나 handlebar와는 다르게 main-layout을 설정할 수 없고 레이아웃을 헤더, 푸터와 같이 나눠서 레이아웃을 설정해야한다.
2. <% %> 함수내장
<% %>은 Javasrcipt함수를 내장할 수 있는 구문이다.
<% if(prods.length > 0) { %>
원하는 내용
<% } %> //열었으면 닫아줘야 한다.
위와 같은 형식으로 사용가능하며 ejs의 핵심이라고 생각되는 구문이다. Javascript코드를 활용하여 HTML을 보다 동적으로 사용할 수 있기 때문이다.
3. <%= %> 변수값 표현
<%= %>은 서버에서 지정한 변수값(객체값)을 ejs에서 보여주는 구문이다.
<%= prods.title %>
형식은 위와 같으며 동적으로 활용되는 것에 가장 기본이라 생각한다.
개인 끄적임
ejs는 처음 봤을 때 JSP와 똑같다고 생각들었다. 그래서 배우는 것에 있어서 어렵지는 않았다. 그래서 앞으로 동적 템플릿은 주로 ejs를 활용할 것 같다. 레이아웃에 있어 부분적으로 해야 하는 것이 조금은 아쉽기는 하지만 이 또한 장점이 될 수 있다고 생각한다.
음악을 좋아하는 사람이 음악을 만들 듯, 개발을 좋아하게 될 사람이 쓰는 개발이야기