1. EJS란?
- Embedded JavaScript Templates의 약어
- Node 뷰 템플릿 엔진 모듈 : 서버에서 DB 또는 API에서 가져온 데이터를 미리 정의된 Template에 넣고, html을 그려서 클라이언트에 전달해주는 역할 ( Pug View Engine, EJS View Engine)
- 기존 방식의 개발언어에서는 html과 script 태그가 분리되어 있어 script를 html 에 적용하기 어려운 단점이 있음
- EJS는 html 문서에 Javascript 내용을 삽입이 가능하다는 장점으로 페이지를 동적으로 짜는 것이 기존보다 용이해짐
- 또한 서버에서 보낸 변수를 가져와 사용할 수 있다는 장점이 있음
2. EJS 설치
1) Node express 패키지 설치 시 ejs 설치하기
> express i 프로젝트명 --view=ejs
> express i nodeadminapp --view=ejs
> express install nodeadminapp --view=ejs
package.json 파일의 dependencies 안에 ejs 모듈 설치목록 확인
2) Node express 패키지 설치 완료 후 ejs 설치하기
> npm install ejs
app.js에서 app.set('view engine', 'ejs'); 설정
3. EJS 구분
1) EJS 태그
<%= %> : HTML escaped 값을 출력
<%- %> : HTML unescaped 값을 출력
<% %> : 제어흐름 태그
<%# %> : 코멘트 태그
<%_ _%> : 앞에 있는 모든 공백을 제거
2) 출력 태그
- 화면 출력
<%= "Hello World" %> // Hello World
-데이터 출력
<% let title = "제목" %>
<%= title %> // 제목
- 연산
<%= "Hello"+"World"%> // Hello World
<%= 10-2 %> // 8
- 삼항 연산자
<%= true ? "참" : "거짓" %> // 참
<%= false ? "참" : "거짓" %> // 거짓
- <%= %>, <%- %>의 차이
escape 여부에 따라 <%= %>는 escape 값 출력, <%- %>는 unescaped 값 출력 됨
escape(탈출) 한다는 것은 html문에서 사용하는 특정 문자열들을 단순한 문자열로서 출력한다는 의미
unescape 한다는 것은 html문에서 사용하는 특정 태그들의 속성을 그대로 받아들여서 출력한다는 의미
<%= "<h3>escaped</h3>" %> // <h3>escaped</h3>
<%- "<h3>unescaped</h3>" %> // unescaped
3) 제어 흐름 태그
<%은 Scriptlet Tag로 출력 없이 제어 흐름을 위해서만 사용되는 태그
<% let str = "문자" %>
<%= str %> // 문자
4) 가정문
- if문
<% if (true) { %>
<h2> 출력하기 </h2>
<% } %>
출력하기
-if-else 문
<% if (true) {%>
<p2> 참 </p2>
<%} else{%>
<p2>거짓</2>
<%} %>
참
실제 사용 예시
<div class="col-sm-4">
<div class="form-group">
<label class="control-label">게시여부</label>
<select name="isDisplayCode" id="isDisplayCode" class="form-control">
<option value="9" <% if(article.is_display_code == "9"){ %> selected <% } %> >선택</option>
<option value="1" <% if(article.is_display_code == "1"){ %> selected <% } %> >게시함</option>
<option value="0" <% if(article.is_display_code == "0"){ %> selected <% } %> >게시안함</option>
</select>
</div>
</div>
5) 반복문
- for 문
<% for(let i=0; i<=3; i++) {%>
<a href="/test/<%= i %>" > 경로 <%= i %>로 이동 </a>
<%}%>
경로 1로 이동
경로 2로 이동
경로 3로 이동
실제 사용 예시
<tbody class="hoverTblBody">
<% for(var i =0;i<articles.length;i++){ %>
<tr>
<td><%=articles[i].article_id%></td>
<td>
<% if(articles[i].board_type_code ==1){%>
공지게시판
<% } else{ %>
기술블로깅
<% }%>
</td>
<td><a href="/article/modify/<%=articles[i].article_id%>"><%=articles[i].title%></a></td>
<td><%=articles[i].view_count%></td>
<td><%=articles[i].ip_address%></td>
<td>
<% if(articles[i].is_display_code ==1){%>
게시함
<% } else{ %>
게시안함
<% }%>
</td>
<td><%=articles[i].reg_date%></td>
</tr>
<% } %>
</tbody>
2. EJS 뷰 파일로 데이터 전달하기
1) router 설정에서 변수 받기
index.js에서 설정한 {title:'화이팅입니다.'}는 index.ejs에서 변수로 전달됨
index.js
router.get('/', function(req, res, next) {
res.render('index', { title: '화이팅입니다.' });
});
index.ejs
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<p>환영합니다. <%= title %></p>
</body>
</html>
출력화면
2) 객체 전달 전달 하기
.js 파일
router.get('/modify/:aid',async(req,res) =>{
// 1)선택한 게시글 고유번호를 파라메터 방식ㅇ로 URL을 통해 전달 받음
var articleIdx = req.params.aid;
// 2)해당 게시글 번호에 해당하는 특정 단일게시글 정보를 DB article테이블에서 조회해 온다.
var article ={
article_id:1,
board_type_code:1,
title:"공지게시글 1번글입니다.",
contents:"공지게시글 1번 내용입니다.",
view_count:10,
ip_address:"111.111.124.44",
is_display_code:1,
article_type_code:1,
reg_date:"2023-12-12",
reg_member_id:"gowoon"
};
// 3) 단일 게시글 정보를 뷰에 전달
res.render('article/modify', {article});
});
ejs 파일
<!-- 글내용 입력영역 -->
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label class="control-label">글내용</label>
<textarea class="form-control" name="contents" id="contents" rows="10" cols="5"><%=article.contents%></textarea>
</div>
</div>
</div>
3) 2개 이상의 데이터 받기
// 게시글 등록 조회 웹페이지 요청 및 응답 라우팅 메소드
router.get('/list',async(req,res) =>{
var searchOption = {
boardTypeCode:"0",
title:"",
isDisplayCode:"9"
}
// 1) DB에서 모든 게시글 데이터 목록을 조회해 오기
const articles =[
{
article_id:1,
board_type_code:1,
title:"공지게시글 1번글입니다.",
contents:"공지게시글 1번 내용입니다.",
view_count:10,
ip_address:"111.111.124.44",
is_display_code:1,
reg_date:"2023-12-12",
reg_member_id:"gowoon"
},
{
article_id:2,
board_type_code:2,
title:"기술블로깅 게시글 1번글입니다.",
contents:"기술블로깅 게시글 1번 내용입니다.",
view_count:20,
ip_address:"122.111.124.44",
is_display_code:0,
reg_date:"2023-12-13",
reg_member_id:"gowoon"
},
{
article_id:3,
board_type_code:2,
title:"기술 게시글 입니다.",
contents:"기술 게시글 내용입니다.",
view_count:30,
ip_address:"123.111.124.44",
is_display_code:1,
reg_date:"2023-12-14",
reg_member_id:"gowoon"
}
];
// 2) 게시글 전체 목록을 list.ejs뷰에 전달
res.render('article/list',{articles,searchOption});
});
참고
https://velog.io/@eastshine94/Ejs%EC%97%90-%EB%8C%80%ED%95%B4
