본문 바로가기
웹개발/Node.js

[Node.js] DB에서 데이터를 가져와 사용하기

by 철없는민물장어 2023. 2. 14.
728x90
반응형

DB에 저장한 데이터를 꺼내와 사용해보자.

 


앞서서... DB에 데이터를 저장했었다
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: true }));

.
.
.

app.post('/add', function (req, res) {


    res.send('전송완료')
    //console.log(req.body.title)
    db.collection('post').insertOne({'title':req.body.title,'date':req.body.date},function(에러,결과){
        console.log(저장완);
    })
})

이전에

서버 코드를 짜기 위해 express 라이브러리를 설치했고

bodyParser를 설치해서 데이터를 가져오기 쉽게 했다.

 

그리고 /write페이지에서 form에 데이터를 입력하고 submit을 하면 

/add로 이동하게되는데,(action=/add)

 

/add에서 post요청이 발생하면 해당 내용을 제어할 수 있게

server.js파일에서 app.post메소드를 사용했다.

 

이 때 db.collection('콜렉션 명').insertOne({데이터},function(에러,결과){});

메소드로 db에 데이터를 저장해놓았다.

 


DB에서 데이터를 가져와 사용하기

우선 db에서 가져온 데이터로 html파일을 쉽게 만들기 위해서

ejs를 사용했다.

(ejs를 npm install ejs로 설치하고

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

서버 코드 맨 위에 이 코드를 추가함)

 

 

그리고 /list라는 페이지를 만들고, 여기다가 DB에서 가져온 데이터를 보여줄 것이기 때문에

app.get('/list',function(){})을 썼다.

app.get('/list',function(req,res){
    db.collection('post').find().toArray(function(에러,결과){
        console.log(결과);
        res.render('list.ejs', {posts: 결과});
    });
    //디비에서 데이터 다 꺼내기
    
})

앞서 db에 저장할 때는 db.collection('콜렉션명').insertOne() 메소드를 사용했다면

이번에는 db의 모든 데이터를 꺼내기 위하여 db.collection('콜렉션명').find() 메소드를 사용했다.

그리고 찾은 값을 Array형으로 변환하기 위해 toArray()메소드를 사용하였다.

마지막 메소드 안 콜백함수의 인자로 에러,결과가 있는데

결과값이 '결과'변수에 있게 된다.

 

이제 list.ejs파일에 이 변수를 사용할 수 있게 보내는데,

res.render('list.ejs', {posts: 결과}); 라고 작성해서

결과값이 list.ejs 파일에서 posts라는 변수명으로 사용되도록 하였다.

 

 

이제 list.ejs파일로 가 보자.

내용은 여느 html파일과 동일한데 확장자명만 .ejs가 된다.

<div class="container mt-4">
  <p>서버에서 가져온 내용</p>


  <% for(let i=0;i<posts.length;i++){ %>
    <div class="card mt-2">
      <h5 class="card-header">할 일</h5>
      <div class="card-body">
        <h4>제목: <%= posts[i].title%>
        </h4>
        <p>마감일 : <%=posts[i].date %>
        </p>
      </div>
    </div>
  <%} %>

</div>

이 코드는 list.ejs의 중간부분만 뗀 것이다.

posts라는 변수에 db에서 가져온 값들이 담겨있다.

 

반복문을 사용하였는데,

 반복문은 JS에서 사용가능한 것이므로

양 끝을 <% %>로 감싸서 반복문이 작동할 수 있도록 하였고,

가져온 posts변수를 사용하는 부분은 <%= posts...%>로 작성해야했다.

 

728x90
반응형

댓글