템플릿 엔진이란, 템플릿을 읽어 엔진의 문법과 설정에 따라서 파일을 HTML 형식으로 변환시키는 모듈입니다. Express에서 인기리에 사용되고 있는 Jade 템플릿 엔진은 기존의 HTML에 비해 작성법이 아주 다른데, 그에 비해 EJS는 똑같은 HTML에서 <%%>를 사용해 서버의 데이터를 사용하거나 코드를 실행할 수 있다.
EJS에서 알아야 하는 2가지 Point
<%자바스크립트 코드%>
<%출력 할 자바스크립트 객체%>
바로 여기서 자바스크립트 객체를 router에서 받아 올수도 있다.
VIEW로 데이터 넘기기
module.exports = function(app, fs) {
app.get('/', function(req, res) {
res.render('index', {
title: '예제 홈페이지'
length: 5
})
});
}JSON 데이터를 render 메소드의 두번째 인자로 전달함으로서 페이지에서 데이터를 사용가능하게 된다.
VIEW에서 데이터 접근 및 루프코드 실행
Views/index.ejs
<html>
<head>
<title><%= title %></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h1>Loop it!</h1>
<ul>
<% for(var i=0; i<length; i++){ %>
<li>
<%= "LOOP" + i %>
</li>
<% } %>
</ul>
</body>
</html>Line 3: 라우터에서 title을 받아와서 출력한다.
Line 9~13: 루프문
출력
서버를 실행하고 http://localhost:3000/에 접속
$ node server.js
EJS 분할하기
PHP나 Rail에서처럼, EJS에서도 코드를 여러 파일로 분리하고 불러와서 사용할 수 있다.
파일을 불러올땐 다음 코드를 사용한다.
<% include FILLNAME %>header.ejs 파일과 body.ejs 파일
<title>
<%= title %>
</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script>
console.log("HelloWorld");
</script><h1>Loop it!</h1>
<ul>
<% for(var i=0; i<length; i++){ %>
<li>
<%= "LOOP" + i %>
</li>
<% } %>
</ul>위 준비된 파일, index.ejs를 작성해보면 아래와 같다.
<html>
<head>
<% include ./header.ejs %>
</head>
<body>
<% include ./body.ejs %>
</body>
</html>출처
안녕하세요 주니어 프론트엔드 개발자 양윤성입니다.