HTML에 DB데이터 넣기

MongDB에 넣은

<h4>할일 제목 : ?</h4>
<p>할일 마감날짜 : ?</p>

 

 

 

 

 

 

 

이런 데이터들을 위의 html에 직접 넣어 이쁜 UI를 만들 때 EJS라는 라이브러리를 사용한다.

EJS는 html을 좀 더 쓰기 쉽게 도와주는 전처리엔진이다.

npm install ejs

터미널에 이렇게 입력해 우선 라이브러리를 설치해준다. 

그 다음, server.js 상단에

app.set('view engine', 'ejs');

이렇게 입력해주면 준비가 된다.

그리고 사용하려던 list.html파일 이름을 list.ejs로 바꿔준다.

 

그 다음, server.js에 아래처럼 입력한다.

// /list로 GET요청으로 접속하면 
// 실제 DB에 저장된 데이터들로 예쁘게 꾸며진 html로 보여줌
app.get('/list', function(요청, 응답) {
    응답.render('list.ejs') //ejs파일 랜더링 해줌
});

응답에 render함수를 붙여서 list.ejs파일을 랜더링해달라고 하면 에러가 뜨는데, list.ejs파일처럼 .ejs 파일은 views라는 폴더를 만들어서 그 안에 넣어놓아야 한다.

 

이제 html에 데이터를 사용하기 위해 가져와보자

app.get('/list', function(요청, 응답) {
	
    //db.collection('post').find().toArray(); 이렇게만 쓰면 모든데이터를 다 찾아주세요라는 뜻
    
    db.collection('post').find().toArray(function(에러, 결과){
        console.log(결과);
        응답.render('list.ejs', { posts : 결과 })
    });
    //디비에 저장된 post라는 collection안에 제목이 뭐인 데이터를 꺼내주세요

    
});

먼저, 위처럼 server.js로 데이터를 불러와야 한다. 그 다음, render함수에 오브젝트 형식으로 posts라고 작명해서 posts에 결과를 집어넣어주면 된다. 그리고 응답.render문장은 db.collection의 콜백함수 내에 있어야한다.

 

이제 list.ejs에 삽입해야 하는데 <%= %>가 서버에서 받은 데이터를 html에 삽입하는 기본 문법이다.

그리고 posts라는 변수는 오브젝트이므로 posts[0].제목 이런 식으로 데이터바인딩 해주면 된다.

<h4>할일 제목 : <%= posts[0].제목 %></h4>
<p>할일 마감날짜 : <%= posts[0].날짜 %></p>

만약, posts라는 변수에 저장된 오브젝트가 많아지면 ejs반복문을 사용할 수 있는데,

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

이런 식으로, <% %>안에 js문법을 담아주면 된다. 여기선 =(등호)를 빼고 사용한다.