티스토리 뷰
EJS 템플릿 엔진
ejs는 handlebars와 마찬가지로 기존의 html코드를 유지하되, html코드 안에 바닐라 자바스크립트 코드를 넣어 생산성을 더해준 템플릿 엔진이다.
다른 두 템플릿 엔진과의 가장 두드러진 차이점은 바닐라 자바스크립트를 사용할 수 있다는 점과, 레이아웃을 제공하지 않는다는 점이다. 하지만 레이아웃을 제공하지 않는 대신 include라는 레이아웃과 유사한 기능을 제공한다.
개인적으로 EJS가 가장 편하다고 느꼈다!
render하는 방식은 역시나 다른 템플릿과 똑같다.
먼저 npm에서 ejs를 설치해준다.
$ npm install ejs
메인 파일에서 app.set을 해준다. ejs는 pug처럼 built in 엔진이므로, engine으로 설정해줄 필요 없이 바로 set하면 된다.
app.set('view engine', 'ejs'); //set up
app.set('views', 'views'); //어디에 template이 있는지 알려주는 것
그리고나서 각각 ejs 파일을 생성해주는데, 그냥 html 코드를 그대로 쓰면 된다.
여기서 알아두어야 할 점은,
- 동적변수를 html 코드에 삽입하고자 할때는 <%= %> 안에 감싸준다.
- 일반 자바스크립트 코드를 삽입하고자 할 대는 스크립트 태그인 <% %>에 감싸준다. 예를들면 if문이나 for문을 이 태그 안에 삽입해주면 된다.
- 레이아웃과 같은 기능을 하는 include를 선언할 때는 <%- include('디렉토리') %> 이렇게 선언해주면 된다.
동적변수 출력
<title><%= pageTitle %></title>
js파일의 render함수의 인자로 받아온 prods를 출력하는 구문, prdos의 길이가 0이면 출력하지 않고, prods의 길이가 1 이상이면, 안에 있는 데이터들을 for문으로 출력한다.
<% if(prods.length > 0) { %>
<% for( let product of prods) {%>
<div class="grid">
<article class="card product-item">
<header class="card__header">
<h1 class="product__title"><%= product %></h1>
</header>
<div class="card__image">
<img src="https://cdn.pixabay.com/photo/2016/03/31/20/51/book-1296045_960_720.png" 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>No products..</h1>
<% } %>
active클래스를 지정하는 구문. js 파일의 render 함수의 인자로 받아온 path에 따라 active class를 적용 여부가 달라진다.
class에다가 string을 저장하는 것이므로 <%= %> 태그를 쓴다. ( class 자체는 자바스크립트 코드에 포함이 되지 않으므로)
<li class="main-header__item"><a class="<%= path ==='/' ? 'active':''%>"href="/">shop</a></li>
<li class="main-header__item"><a class="<%= path ==='/admin/add-product' ? 'active':''%>" href="/admin/add-product">add product</a></li>
EJS 템플릿에서 includes 활용하기
먼저 각각의 ejs 템플릿에서 겹치는 부분들을 하나씩 빼줘서 따로 ejs 템플릿으로 만들어준다. 여기서 주의할점은, 레이아웃처럼 전체 부분을 한번에 main layout으로 만드는것이 아니라, head 태그가 겹치면 head.ejs를 만들고, navigation 태그가 겹치면 navigation.ejs를 만들어서 각각의 ejs 템플릿에 include해주는 것이다.
예시로 순서대로 head.ejs 템플릿, navigation.esj 템플릿, end.ejs템플릿은 아래와 같이 작성되었고,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= pageTitle %></title>
<link rel="stylesheet" href="/css/main.css"><header class="main-header">
<nav class ="main-header__nav">
<ul class="main-header__item-list">
<li class="main-header__item"><a class="<%= path ==='/' ? 'active':''%>"href="/">shop</a></li>
<li class="main-header__item"><a class="<%= path ==='/admin/add-product' ? 'active':''%>" href="/admin/add-product">add product</a></li>
</ul>
</nav>
</header>
</body>
</html>
이는 admin.ejs 템플릿에서 아래와 같이 include 된다.
<%- include('includes/head.ejs')%>
<link rel="stylesheet" href="/css/form.css">
<link rel="stylesheet" href="/css/product.css">
</head>
<body>
<%- include('includes/navigation.ejs') %>
<main>
<form class="product-form" action="/admin/add-product" method="POST">
<div class="form-control">
<input type="text" name="title" id="title">
</div>
<button type="submit">Add product</button>
</form>
</main>
<%- include('includes/end.ejs') %>
이렇게 include 기능을 통해서, 서로 겹치는 부분만 따로 ejs템플릿으로 생성하고, 그외의 겹치지 않는 고유한 부분은 각각의 ejs 템플릿에 넣어주면 된다.
참조 및 ejs 태그 정보 : https://ejs.co/
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
'web : back-end > node js' 카테고리의 다른 글
| [node js] Express: Model 에서 file형태로 데이터 저장 및 읽어오기 (0) | 2020.06.21 |
|---|---|
| [node js] Express: MVC 패턴 (0) | 2020.06.21 |
| [node js] Express: Handlebars 템플릿 엔진 (0) | 2020.06.19 |
| [node js] Express: Pug 템플릿 엔진 (0) | 2020.06.18 |
| [node js] Express : Request로 받은 데이터 전달하기 (0) | 2020.06.17 |