[Node.js/MongoDB] MongoDB에 데이터 확인하기 (feat . EJS)

코딩애플님의 Node.js, MongoDB로 2시간 만에 빠르게 웹서비스 만들기 강의를 듣고 복습의 목적으로 작성하였습니다

데이터 읽기

mongoDB

몽고DB에 데이터가 잘 있습니다!

ejs

이번에 list라는 html을 만들겠습니다.

이 html은 몽고DB에 존재하는 데이터를 화면에 보여주는 역할을 합니다.

<!-- list.html -->
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
          integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <title>Home</title>
</head>
<body>
<nav class="nav nav-pills flex-column flex-sm-row">
    <a class="flex-sm-fill text-sm-center nav-link " href="/">Home</a>
    <a class="flex-sm-fill text-sm-center nav-link active" href="/list">TODO</a>
    <a class="flex-sm-fill text-sm-center nav-link" href="/write">Write</a>
    <a class="flex-sm-fill text-sm-center nav-link" href="#">etc</a>
</nav>
<h4>할 일 제목 : 할일</h4>
<p>할 일 마감날짜 : 마감일</p>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
        crossorigin="anonymous"></script>
</body>
</html>

html은 혼자서 데이터를 가져와 화면에 보여줄 수 없습니다.

그래서 ejs를 사용하려 합니다.

ejs는 <%라는 기호를 사용해서 html안에서 js의 동작을 가능하게 합니다

script태그가 없어도 가능합니다

ejs파일은 views폴더 안에 있어야 합니다.

views라는 폴더를 만들고 방금 만든 list.html의 확장자를 list.ejs로 바꾸겠습니다.

ejs는 html기반이기때문에 오류는 뜨지 않습니다 !!

sever.js

이제 /list로 get요청을 보내면 데이터를 list.ejs에서 볼 수 있게 만들겠습니다.

index.js로 이동합니다 ! (서버 역할을 하고 있는 js파일)

//index.js
const dotenv = require('dotenv')
const express = require('express')
const app = express()
const port = 3001
const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({extended: true}));
dotenv.config();
let db;
const MongoClient = require('mongodb').MongoClient;
MongoClient.connect(`mongodb+srv://${process.env.MONGODB_USER_ID}:${process.env.MONGODB_USER_PW}@cluster0.pso4lve.mongodb.net/?retryWrites=true&w=majority`,
    function (err, client) {
        if (err) {
            return console.log(err)
        }
        db = client.db('todoApp');

        app.post('/add', function (req, res) {
            console.log(req.body);
            db.collection('post').insertOne({title: req.body.title, data: req.body.date}, function (err, result) {
                console.log('저장완료');
            });
            res.send('전송완료')
        });
    })

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
})
app.get('/write', (req, res) => {
    res.sendFile(__dirname + '/write.html');
})
app.listen(port, () => {
    console.log(`Example app listening on port ${port}`)
});

다음코드에서 ejs파일을 정상적으로 읽기위해 코드를 추가하겠습니다.

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

쉽게 뷰엔진이 ejs를 읽도록 하는 코드입니다.

app.get('/list', (req, res) => {
})

/list경로로 오는 get요청을 확인합니다.

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

이전에 사용한 collection을 사용해 post로 시작하는 mongoDB의 collection을 찾습니다.

이후 나온 데이터(result)를 list.ejs로 보냅니다.

보낼때 해당 데이터를 posts라는 이름으로 사용할 수 있게 보냅니다

list.ejs에서 데이터 확인하기

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

nav태그가 끝나는 곳에 다음 코드를 추가 했습니다.

<%= %>는 ejs문법으로 여기 안에서는 js문법을 사용할 수 있습니다.

reder되어 보내진 posts라는 배열을 받습니다

이 배열에는 다음 데이터가 들어있습니다.

[
  {
    _id: new ObjectId("639a8872cb0211bbe0f379a8"),
    title: '고양이 밥주기',
    data: '12월25일'
  }
]

posts의 0번쩨 인덱스의 title의 value는 '고양이 밥주기'이고, data의 value는 "12월 25일"입니다 (date를 적으려다 실수 했습니다)

이제 실행을 해봅니다!

정상적으로 작동이 됩니다.

데이터의 양이 많은경우 출력

write로 들어가 데이터를 더 추가 했습니다.

ejs로 돌아가겠습니다

js가 사용 가능하기 때문에 for문도 사용할 수 있습니다.

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

<% %> 인 경우 한 문장이

<%= %>인 경우 일부분이 js화 된다.

실행 결과를 보자

완벽하다

✍느낀점

오랜만에 html을 다뤄 본다.

데이터 받는것도, ejs를 사용하는것도 다 불편하다

빨리 강의 끝내고 react쓰고 싶다

저작자표시 (새창열림)

'백엔드 > node' 카테고리의 다른 글

[Node.js/MongoDB] MongoDB에 데이터 저장하기 (0)	2022.12.15
[Node.js/MongoDB] MongoDB 세팅 (무료호스팅) (0)	2022.12.15
[Node.js/MongoDB] Post 데이터 넘기기 (0)	2022.12.14
[Node.js/MongoDB] Html파일 전송하기 (0)	2022.12.14
[Node.js/MongoDB] nodemon (0)	2022.12.14