[Node.js / MongoDB] HTML 에 DB 데이터 넣어보기

💡 실습 포인트!

• 글쓰기 페이지에서 작성한 새로운 데이터를 Submin 버튼을 클릭함과 동시에 서버의 DB 로 전송하고, 서버에 저장된 DB 에서 리스트보기 페이지로 데이터를 불러오는 일련의 과정을 만들어보았다.

---

💜 HTML 렌더링 엔진 EJS 사용해보기

• 이전에 sendFile() 함수를 사용해서 HTML 파일만 전송해주는 실습을 했었는데, 해당 방법으로 HTML 파일만 보내주면 실제 DB 데이터를 넣어 보낼 수 없으므로 Static 페이지가 된다.
• 따라서 서버의 데이터를 HTML 에 쉽게 삽입할 수 있게 해주는 일종의 HTML 렌더링 엔진이 필요한데 그 중 하나인 EJS 를 사용해보았다.
• 우선, 터미널에서 npm install ejs 라고 입력하여 ejs 를 설치해준 다음 아래의 코드를 JavaScript 파일 상단에 넣어준다.

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

• 이제 EJS 파일을 만들어주면 되는데, 파일은 그냥 html 파일처럼 만들되 확장자만 ejs 로 바꾸어주면 된다.
  (주의할 점은은 ejs 파일은 작업폴더 내에 무조건 views 라는 이름의 폴더를 만든 후 그 폴더에 넣어주어야 한다.) 

---

💜 EJS 파일 기본 문법 사용해보기

현재 배열형태의 posts 

<p class="mb-2">할일 : <%= posts[0].할일 %></p>

• HTML 중간중간 서버의 데이터를 넣고 싶을 때는 위와 같이 <%= 데이터 변수명 %> 의 형태로 사용하면 HTML 글자로 렌더링된다.
• EJS 파일에서 '할일 : ' 글자 뒤에 DB 에서 받아온 할일 내용을 넣고 싶다면 배열의 0번째 객체의 '할일' 의 값을 가져와야한다. (posts[0].할일)

---

• EJS 를 사용하면 HTML 에 여러가지 JavaScript 문법을 사용할 수 있다.

<% for(let i = 0; i < posts.length; i++){ %>
    <div style="background: rgb(247, 247, 247); padding: 10px; margin: 10px 0;">
      <p class="mb-2">할일 : <%= posts[i].할일 %></p>
      <p class="mb-2">마감일 : <%= posts[i].마감일 %></p>
    </div>
<% } %>

 

• HTML 에 if 문을 적용하거나 for 문과 같은 반복문을 적용하고 싶을 때에는 <% %> 내부에 JavaScript 문법을 담아주면 된다.

---

💜 GET 요청 시 DB 에서 데이터를 가져와서 브라우저를 통해 보여주기

• 코드짜는 순서는 다음과 같다.
  1. 누군가가 /list 경로로 GET 요청을 하면
  2. MongoDB 에서 데이터를 꺼내어
  3. list.ejs 파일에 데이터를 삽입하여 브라우저를 통해 보여준다.
• MongoDB 에서 데이터를 꺼내는 방법은 다음과 같다.

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

• 나의 경우, .find().toArray() 를 이용하여 post collection 에 저장된 모든 데이터를 Array 형태로 가져왔다.

// 누군가가 /list 경로로 GET 요청을 하면
app.get('/list', function(req, res){
	// db.collection 에 있는 post 에서 모든 데이터를 찾아 배열의 형태로 가져온다.
    db.collection('post').find().toArray(function(err, result){
        console.log(result); // console 창을 통해 가져온 데이터 배열 확인
        res.render('list.ejs', {posts : result});
    });

• .render() 함수의 두번째 파라미터로 { posts : result } 와 같이 적어주면 DB 에서 가져온 모든 데이터를 담은 배열인 result 를 posts 라는 변수에 담아 EJS 파일로 보내준다.
• 그러면 EJS 파일에서 필요한 부분에 EJS 문법을 활용하여 posts 변수에 담긴 데이터를 삽입해주면 된다.

<% for(let i = 0; i < posts.length; i++){ %>
    <div style="background: rgb(247, 247, 247); padding: 10px; margin: 10px 0;">
      <p class="mb-2">할일 : <%= posts[i].할일 %></p>
      <p class="mb-2">마감일 : <%= posts[i].마감일 %></p>
    </div>
<% } %>

• 모든 과정이 제대로 이루어졌다면 리스트보기 페이지에서 아래와 같은 화면을 볼 수 있다.