[MongoDB] HTML에 서버에서 데이터 가져오기

---

EJS 템플릿 엔진

웹브라우저에 컨텐츠를 보여줄 목적으로 웹서버를 구축한다면

HTML에서 파일을 읽어들일 때 실시간으로 변경되어 전달하는 방법은 어렵다.

즉 데이터 베이스 같은 외부에서 실시간으로 변경되는 값을 받아올 때 EJS 템플릿 엔진을 사용하여 편하게 작업할 수 있다.

ejs를 설치 후

npm install ejs

프로젝트 폴더 안에 views 폴더를 생성하고 확장자가 ejs인 파일을 생성한다.

 

EJS파일은 HTML파일 구조와 같지만

사용하는 문법은 조금씩 다르다.

HTML중간에 서버 데이터를 넣고 싶을 때 아래와 같이 사용한다. 

<h2><%= user.name %></h2>

HTML에 if문을 적용하거나 반복문을 적용하고 싶을때 <% %> 로 자바스크립트 문법을 담을 수 있다.

<% if (user) { %>
  <h2><%= user.name %></h2>
<% } %>

MongoDB Atlas에서 HTML로 데이터를 가져오기 위해서 server.js에서 다음 코드를 추가해야 한다.

app.get('/list',function (req,res){
    // 모든 데이터 가져오기 문법
    db.collection('post').find().toArray(function(error,result){
        console.log(result);
        res.render('list.ejs', { posts : result});
    });
})

코드 설명을 하자면

/list페이지에 접속하면 mongo db에 post collection에서 저장된 값을 가져오라 라는 뜻이다.

console에 결과값(저장된 데이터)를 출력하고

응답받은 데이터를 render해서 list.ejs파일로 보내주세요 라는 뜻이다.

이때 데이터(result)를 posts라고 명명하고, ejs파일에서 posts 변수를 사용하면 불러온 데이터를 사용할 수 있다.

아래처럼말이다.

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

태그 시작 끝에 <% %>를 붙이고 for 문으로 저장된 데이터를 반복문으로 전부 출력하는 코드이다.

post.length 즉, post수만큼 반복하고

db에 저장된 key값 제목, 날짜를 출력하였다.

 

 

참고한 글

https://araikuma.tistory.com/454

https://fred16157.github.io/node.js/nodejs-express-server-basic/

https://ichi.pro/ko/ejs-sijaghagi-wihae-al-aya-hal-modeun-geos-176170883954322

https://fibjs.org/ko/docs/awesome/module/ejs.md.html

공식문서

https://ejs.co/#docs