-
[TIL] 0213 EJS카테고리 없음 2024. 2. 13. 20:33
EJS (Embedded JavaScript Template)
: 일반 JS 로 HTML 마크업을 생성할 수 있는 간단한 템플릿
: 스크립트 내용을 하나의 요소처럼 사용할 수 있고, 서버에서 보낸 변수를 가져와 사용할 수 있음.
: ejs라는 파일 안에 HTML 문법과 EJS 문법을 사용하여 동적인 화면을 제공할 수 있음.
: node.js 에서 구축한 서버에서 데이터를 받아 바로 뿌려주고 싶은 경우 사용하면 좋음.
: html 일부만 ejs 로 대체해주면 되기에 편리함.
yarn 이나 npm 을 이용하여 ejs 설치
yarn add ejs
npm i ejs
app.js 에 ejs 설정 추가
app.set('view engine', 'ejs');
app.set('views', '/views');
*** 경로 설정 시 루트폴더 부터 대부분 시작함
루트폴더에 'view' 폴더 추가, index.ejs 파일을 생성
기본 html 코드 작성 후 받아온 데이터를 보여줄 부분에 ejs 문법을 적용한다.
기존에 구축해둔 Node.js express 서버에서
return res.send('데이터'); 를
return res.render('view/notices', {data: {데이터}); 로 바꿔준다.
index.ejs 반복문 예시
<body>
<table>
<th>index</th>
<th>제목</th>
<th>내용</th>
<th>관리자이름</th>
<th>작성일</th>
<th>고정</th>
<th>공개</th>
<% for(var i = 0; i<5; i++){ %>
<tr>
<td><%= i %></td>
<td><%= data.result[i].title %></td>
<td><%= data.result[i].contents %></td>
<td><%= data.result[i].adminName %></td>
<td><%= data.result[i].createdAt %></td>
<td><%= data.result[i].pinned %></td>
<td><%= data.result[i].status %></td>
</tr> <% } %> </table>
</body>
이러한 형식으로 서버의 데이터를 뿌려줄 수 있다.