[Node.js] node.js 프로젝트 - To Do App 만들기 6 (HTML에 DB데이터 넣는법)

 

HTML에 실제 데이터를 넣어서 보내주기 위해서는 EJS, Pug같은 템플릿 엔진을 사용한다

EJS는 서버 데이터를 HTML에 쉽게 넣을 수 있게 도와주는 HTML 렌더링 엔진이다

이것을 사용하여 DB의 데이터를 HTML에 넣어보자

 

1. EJS설치 

터미널에 npm install ejs를 하고 server.js 상단에 이 코드를 넣어준다

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

 

2. EJS파일 만들기

EJS는 HTML과 똑같이 만들어 쓰면 된다

주의할점 : 작업폴더 내에 views라는 이름의 폴더를 하나 만들고 거기에 ejs파일을 만들어야함

나는 list.ejs라는 파일을 하나 생성했다

 

3. MogoDB에서 데이터 꺼내기

db.collection('post').find()

db.collection('post).findOne()

이런식의 문법을 쓰면 데이터를 꺼낼 수 있는데, 'post컬렉션에 있는 모든 데이터를 가져와주세요'라고 코드를 짜려면 .find().toArray()를 사용하면 collection('post')안의 모든 데이터를 array 자료형으로 가져온다

app.get('/list', function (요청, 응답) {
  db.collection('post').find().toArray(function (에러, 결과) {
    console.log(결과);
    응답.render('list.ejs', { posts: 결과 }); //랜더링해주는 문법
  });
});

그리고 가져온 자료형을 list.ejs파일에 넣어주기 위해 .render()라는 함수에 두번째 파라미터에 이렇게 적으면 list.ejs파일을 렌더링함과 동시에 {post: 결과}라는 데이터를 함께 보내준다

 

 

3. EJS기본 문법

 <!-- ejs 문법: <% %>여기 안은 자바스크립트 문법을 실행하는 곳임 -->
  <div class="container-md mt-5">
    <h2 class="my-3">서버에서 가져온 To Do List</h2>
    <ul class="list-group">
      <% for (var i=0; i < posts.length; i++){ %>
        <li class="list-group-item">
          <h4>
            제목 : <%= posts[i].title %>
          </h4>
          <p>
            내용 : <%= posts[i].text %>
          </p>
          <button>삭제</button>
        </li>
        <% } %>
    </ul>
  </div>

반복문을 함께 사용해서 post갯수만큼 반복문이 돌면서 데이터를 넣어준다