[NodeJS+Express] 7. EJS 파일 내 JS문법 사용 & 파일 내 .ejs파일 삽입

이번에는 저번 포스트에 이어서 EJS 문법에 대해서 좀 더 알아보자!

 

1. EJS 파일 내 JS문법 사용

ejs 파일 내에서는 JS문법을 그대로 사용할 수 있다!

 

사용법

<% JS문법 %>

 

위처럼 <% %>으로 JS구문을 감싸서 사용하면된다. 예시와 함께 살펴보자.

 

 

예시1

<% for (let i = 0; i < 5; i++){ %>
  <div>Hello<%= i %></div>
<% } %>

 

결과1

 

for문의 반복문을 사용하여 태그를 반복할 때

위와 같은 형식을 사용한다.

 

 

예시2

<% for (let i = 0; i < 5; i++){ %>
  <% if(i===3) {%> <div>HELLO!!</div> <% continue; }%>
  <div>Hello<%= i %></div>
<% } %>

 

결과2

 

if문도 문제없이 정상작동한다!

 

 

---

2. 파일 내 ejs 파일 삽입

ejs파일 내에 다른 ejs 파일을 가져와서 붙여넣을 수 있다.

nav바 혹은 footer 등 페이지마다 계속해서 반복되는 요소들을 ejs 파일로 따로 생성한 뒤

그 파일을 가져오는 방식으로 보다 간편하게 구현할 수 있다.

 

사용법

<%- include('파일.ejs') %>

 

<%- include('파일.ejs', {변수:데이터}) %>

server.js에서 ejs파일에 데이터를 넣어주었던 것과 같은 방식으로

include()에 {변수: 데이터}를 전달하여 ejs파일 내에서 데이터를 다룰 수 있다.