ejs와 레이아웃(express template)

 

ejs

(Embedded JavaScript)

 

JavaScript로 HTML 마크 업을 생성 할 수있는 간단한 템플릿 언어

다시말해 view를 동적으로 생성하는 템플릿 언어이다!

 

(HTML안에서 자바스크립트(함수,변수) 사용한다고 생각하면됨)

 

(HTML을 알고있다면 다른 템플릿 언어보다 훨씬 쉽게 익힐 수 있다.)

 

 

템플릿 엔진

 

.ejs파일을 HTML로 변환 시켜준다.

app.set메소드로 템플릿 엔진을 설정해주면 된다.

 

app.set('view engine','ejs');

 

 

ejs 문법

 

<% %>	흐름 제어문 ex) <% if(user.name) %>
<%=  %>	변수 값 ex) <%= user.name %>
<%-  %>	예약어 ex) <%- body %>
<%- include('view의 상대주소') %>	다른 view파일을 불러 옴

 

 

 

ejs 예시

 

아래 코드들은 ejs를 사용하여 HTML내에서 javascript를 실행하는 예시다,

(.ejs파일에서만 ejs문법을 쓸수있다)

 

 

controller, users객체를 전달하면서 index.js를 렌더링.

controller.js

 

view, users 객체를 받아서 forEach로 출력

index.ejs (.ejs파일이다)

 

결과:

 

 

 

ejs 레이아웃

모든 페이지에 포함되는 HTML 요소들 ex) 메뉴바, 헤더, 푸터

 

I. 패키지 설치

 

npm i express-ejs-layouts

 

II. 미들웨어 선언

const layouts = require("express-ejs-layouts");
app.use(layouts); // 라우터 미들웨어 위에 선언해야됨

 

III. 레이아웃 예시

//layout.ejs

<%- include('헤더 view파일의 상대주소') %> // layout.ejs파일의 위치를 기준으로 상대위치를 정한다
	<h1>컨텐츠 </h1> //얘는 고정 요소
    <%- body %> // res.render("view 파일 주소")에서 view파일의 요소들이 들어간다. 
<%- include('푸터 view파일의 상대주소') %>