EJS 란?
EJS는 Embedded JavaScript templating의 약어로서, 자바스크립트로 HTML 마크업을 생성할 수 있는 간단한 템플릿 언어입니다.
(java개발자라면 익숙한 JSP와 동일한 역할을 한다고 보시면 됩니다.)
<% %> 형태의 태그를 이용해서 HTML 중간중간 필요한 로직 및 데이터를 추가할 수 있으며,
특히, for, if 문을 통해 서버 데이터를 바로 html로 만들 수 있다는 게 가장 좋습니다.
EJS를 이용해서 Node.js 서버로부터 가져온 데이터를 html을 생성할 때 바로 사용할 수 있습니다.
필요한 서버 데이터는 ajax 형태로 호출해서 json으로 받은 후에 html 에 추가하는 방법도 있긴 하지만 매번 이런 식으로 데이터를 세팅하는 것은 은근히 귀찮습니다.
EJS 모듈 설치
앞선 강좌에서 웹개발을 위한 필수 모듈을 설치하지 않았다면 아래 방법으로 ejs 모듈을 설치합니다.
명령 프롬프트에서 프로젝트 폴더로 이동 후 npm install ejs --save 명령어 실행
EJS 설정
web.js 에 아래 내용 추가
//html 템플릿 엔진 ejs 설정
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
clubList.js 에 res 함수를 render() 함수로 변경
render( 'ejs파일 경로', 'json 형태 데이터');
var clubList = {
//클럽목록
list : function(req, res){
//res.send('club list');
res.render('club/clubList', {data : 'testData list ejs'});
}
};
module.exports = clubList;
views/club 폴더에 clubList.ejs 파일 생성
<!DOCTYPE html>
<html lang="ko">
<head>
</head>
<body>
<p>js data : <%=data%></p>
</body>
</html>
아래와 같이 URL을 입력해보면 화면에 서버로부터 받아온 data가 표시됩니다.
이제 ejs를 사용할 준비는 되었으니 좀 더 다양한 ejs 함수를 알아보도록 하겠습니다.
EJS 자주 사용하는 함수
ejs에서 자주 사용하는 함수는 몇 개 없습니다. 실제로 웹사이트를 개발하다보니 ejs 보다 ajax를 통해 json 으로 리턴해서 사용하는 경우가 많더군요.
1. 데이터를 화면에 바로 표시
<%= 변수명%>
<small><%=clubList[i].CLUB_AREA%></small>
2. if 조건문, for 루프문
<% if (조건) { %>
...html 소스
<% } else { %>
... html 소스
<% } %>
<% for (조건) { %>
... html 소스
<% } %>
실제 ejs 사용한 예시
<section id="mberClubListSection">
<h3>가입한 클럽</h3>
<% if(clubList != null && clubList.length > 0){ %>
<ul class="band-club-list">
<% for ( var i = 0; i < clubList.length; i++){ %>
<li><a href="/club/detail/<%=clubList[i].CLUB_SN%>" data-ajax="false" data-bandkey="<%=clubList[i].BAND_KEY%>">
<img src="<%=clubList[i].COVER_IMAGE%>" alt="<%=clubList[i].CLUB_NM%> 밴드 커버 이미지"><div><%=clubList[i].CLUB_NM%></div>
<small><%=clubList[i].CLUB_AREA%></small></a>
</li>
<% } %>
</ul>
<% }else{ %>
<p>가입한 클럽이 없습니다. 아래에 표시된 네이버밴드 중 하나를 선택해주세요.</p>
<% } %>
</section>
for문을 사용하기 위해서는 당연히 서버에서 res.render 를 통해 ejs 파일로 데이터를 넘길 때 list 형태의 json 데이터를 넘겨야 합니다.
차후에 알아보겠지만 mysql 모듈을 이용해서 DB에서 데이터를 가져온 객체가 list형태의 객체이기 때문에 아래와 같이 별도로 변환하지 않고 ejs 로 바로 넘겨서 사용하면 됩니다.
//clubList.ejs에 DB에서 조회한 클럽목록을 넘기는 예제소스
var execSql = dbconn.query(sql1 + sql2, function(err, results, field){
res.render('club/clubList', {clubList : results[0], cnfrncList : results[1], resultCd : resultCd});
});
3. include
<% include 'include할 ejs파일 경로/이름' %>
아래와 같이 head, header, footer 등 공통적으로 들어가는 파일은 include를 이용해서 별도로 관리하는게 좋습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<% include ../layout/head %>
</head>
<body>
<% include ../layout/header %>
<p>js data : <%=data%></p>
<% include ../layout/footer %>
</body>
</html>그리고 파일경로는 include를 선언한 파일을 기준으로 찾아가시면 됩니다. '../'은 현재파일 위치의 상위폴더로 이동한다는 의미입니다. 위의 경우는 views/club/clubList.ejs 파일에서 include를 선언한 경우이기 때문에 경로가 '../layout/head'가 된 겁니다.
그리고 include한 header.ejs 나 footer.ejs에서도 서버에서 넘어온 데이터를 사용할 수 있습니다.
//header.ejs에서 ejs 함수를 사용한 예제
<div id="naverLogout" class="header-profile">
<% if(isLogin){ %>
<div>
<img src="<%=loginObj.profileImage%>" alt="회원 이미지"/>
<div style="font-size:10pt;">
<span><%=loginObj.mberNm%>님</span><br/>
<a href="/logout" data-ajax="false" style="font-size:8pt;color:#888;"><i class="fas fa-sign-out-alt"></i> 로그아웃</a>
</div>
</div>
<% }else{ %>
<div>
<img src="/css/images/myInfo.gif" alt="회원 이미지"/>
<div style="font-size:10pt;">
<span>Guest모드</span><br/>
</div>
</div>
<% } %>
</div>
하지만 공통적으로 매번 호출하는 페이지이니 반드시 모든 URL에서 ejs에서 사용하고자 하는 변수가 선언되어 있어야 합니다. (위의 예에서는 isLogin 변수)
모든 URL에서 사용할 수 있는 변수를 선언하고 세팅하는 방법은 다른 포스팅에서 알아보도록 하겠습니다.
제가 주로 사용한건 저렇게 3가지 밖에 없습니다. 단순히 DB 데이터를 핸들링하는 경우만 있어서 그런지 다른함수는 사용할 일이 없었어요.
혹시라도 개발하면서 다양한 함수를 사용해야 한다면 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
다음강좌
2019/04/03 - [Node.js] - [Node.js 7강] 클라이언트-서버간 데이터(파라미터) 전송 방법과 REST방식 URL 설계
'Node.js' 카테고리의 다른 글
| [Node.js 5강] express 서버 설정 및 기본 구조 설계 (0) | 2019.04.02 |
|---|---|
| [Node.js 4강] NPM을 이용해서 웹개발을 위해 필요한 모듈 설치 (1) | 2019.04.02 |
| [Node.js 3강] 이클립스(eclipse)에 node.js(NodeJS) 개발환경 설정 따라하기 (0) | 2019.04.02 |
| [Node.js 2강] 이클립스(eclipse) + nodejs + github + cafe24호스팅을 이용해서 실제 개발한 웹사이트 소개 (0) | 2019.04.02 |
| [Node.js 1강]node js 란? 장점, 단점, 어떤 웹서비스에 사용해야할까? (0) | 2019.04.02 |
