앞전에 설치하였던 ejs를 사용하여 자바스크립트를 사용할것이다.
npm install ejs
server.js 추가
app.set('view engine', 'ejs');
app.get('/list', function(req, res){
db.collection('post').find().toArray(function(error, result){
res.render('list.ejs', { posts : result })
})
})
이렇게하면 /list에 post데이터를 추출하여 html에서 데이터를 추출할수 있게 된다.
res.render()는 express에서 제공하는 메서드로, 지정한 views 파일을 클라이언트로 보내기 위해 사용된다.
그리고 { posts : result }는 db에서 찾은 데이터를 posts라는 형태로 불러올수 있게 된다.
list.ejs에서 간단하게 데이터를 추출하는 html
<h4> 제목 : posts[1].Title </h4>
<p> 날짜 : posts[1].Date </p>
이렇게 하면 Object 첫번째 내용의 Title과 Date가 입력되는것을 볼수 있다.
이제 자바 스크립트를 이용해서 posts의 갯수를 추출하고 그것을 반복문을 생성한다.
for ( var i = 0; i < posts.length; i++){
<h4> 제목 : posts[i].Title </h4>
<p> 날짜 : posts[i].Date </p>
});
이런식으로 구현이 가능하다.
하지만 ejs를 사용하여 자바스크립트를 사용하기 위해서는 문법을 사용해야 하는데 문법은 다음과 같다
이에 따라서 수정하면 다음과 같다
<%= for ( var i = 0; i < posts.length; i++){ %>
<h4> 제목 : posts[i].Title </h4>
<p> 날짜 : posts[i].Date </p>
<%= }); %>