Express MongoDB 데이터 불러오기

게시글을 볼수 있는 창을 구현

앞전에 설치하였던 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를 사용하여 자바스크립트를 사용하기 위해서는 문법을 사용해야 하는데 문법은 다음과 같다

• 주석 : <%# ... %>
• JS 코드 : <% ... %>
• 변수 출력 : <%= ... %>
• 태그 내부 공백 제거 : <% ... %>
• html escape 안하고 변수 출력 : <%- ... %>

이에 따라서 수정하면 다음과 같다

<%= for ( var i = 0; i < posts.length; i++){ %>
	<h4> 제목 : posts[i].Title </h4>
    <p> 날짜 : posts[i].Date </p>
<%= }); %>