#1 ejs란?
Embedded JavaScript Template
HTML을 조금 더 쉽게 사용할 수 있도록 도와주는 템플린 엔진입니다.
리액트와 뷰처럼 서버에서 데이터를 가져와서 HTML에 바로 적용하여 사용할 수 있게 되는데 예를 들면 다음과 같습니다.
(더러운 클래스들은 부트스트랩용이니 무시하시고 중간중간의 <% %> 부분만 확인하시면 됩니다)
<div class="container">
<ol class="list-group list-group-numbered">
<% for (var i=0; i < posts .length; i++){ %>
<li class="list-group-item d-flex justify-content-between align-items-start" >
<div class="ms-2 me-auto">
<a href="/detail/<%= posts[i]._id %>"><div class="fw-bold"> <%= posts[i].title %> </div></a>
<%= posts[i].contents %>
</div>
<button class="badge bg-danger delete" data-id="<%= posts[i]._id %>">DELETE</button>
</li>
<% } %>
</ol>
</div>위와 같이 HTML문서에 for를 이용한 반복문을 서버에서 가져온 데이터의 수만큼 반복하고,
내용 또한 서버에서 가져온 제목과 설명으로 수십, 수백 개의 글을 한 번에 쉽게 처리할 수 있습니다.
(블로그 글, 쇼핑몰 아이템들 등)
ejs는 새로운 문법을 배울 필요 없이 거의 모든 명령을 <%로 시작해서 %>로 끝내면 되기에 매우 간편하게 사용할 수 있는 것이 특징입니다.
#2 설치하기
(1) ejs 설치
터미널을 열어 ejs를 설치합니다.
npm install ejs
(2) ejs 등록
js파일을 열어 상단부분에 다음 코드를 입력하면 ejs를 사용할 준비가 끝납니다..
app.set('view engin', 'ejs');*app 부분은 express와 함께 쓸때 상단 부분에 const app = express();이라고 적혀있을 건데 자신에게 맞는 이름으로 변경해 주면 됩니다.
#3 사용할때 참고할 것들
(1) 주요 태그
<% 'Scriptlet' 태그, 제어 흐름용, 출력 없음
<%= 템플릿에 값을 출력합니다(이스케이프 처리).
<%- 이스케이프 처리되지 않은 값을 템플릿에 출력합니다.
<%# 주석 태그, 실행 없음, 출력 없음
<%% 리터럴 '<%' 출력
%%> 리터럴 '%>' 출력
%> 일반 종료 태그
-%> 트림 모드('newline slurp') 태그, 줄 바꿈 다음에 오는 트림
_%> '공백 슬러핑' 종료 태그, 그 뒤의 모든 공백 제거
(2) views 폴더 생성
ejs 파일은 views 폴더 안에 생성해줘야 합니다.
ejs 형식으로 코드를 작성하기 위해선 html문서의 확장자를 ejs로 변경하면 되는데, ejs 파일은 views 폴더 안에 있어야 합니다.
views 폴더를 생성한 후 그 안으로 파일을 옮겨주시면 됩니다.
(3) 사용 예
DB에서 데이터 가져와서 ejs파일에서 가져다 쓰는 패턴 예
app.get('/list', function(req, res){
//데이터 베이스의 'post'라는 collection에서 모든 자료를 배열(array)형식으로 찾아주세요
db.collection('post').find().toArray(function(error, result){
// ejs 파일을 랜더링해서 보여주세요. 그리고 위에서 찾은 결과(result)를 ejs로 보내주세요
res.render('list.ejs', { 작명 : result });
});
})
① DB에 저장 해당 위치(post라는 collection)에서 어떠어떠한 자료를 찾아 달라고 요청
.find().toArray() = 모든 데이터를 배열로
② 찾은걸 ejs로 보내달라고 요청. (오브젝트 형식으로 넣어주기때문에 이름은 원하는대로 작명)
③ HTML에서 <%= 작명 %> 형식으로 사용.
오브젝트 형식이기 때문에 실질적으론 <%= 작명[i].title %> 등으로 적용