---

MongoDB Atlas

---

remind

DB서버에 접속할 때는 무조건 클라이언트가 있어야한다.
mongodb Client라는 객체를 통해서 접속을 하게 됨.

스키마(데이터베이스) - 테이블
데이터베이스 - 컬렉션

DB의 데이터를 받아오려면 템플릿 엔진을 사용해야 한다.
ex) pug, 넌적스, ejs

mongodb 접속에러

MongoServerSelectionError: connection <monitor> to ~~ closed
https://velog.io/@qeiqiem/%EC%98%A4%EB%8A%98%EC%9D%98-%EC%97%90%EB%9F%AC-MongooseError-MongooseServerSelectionError-connection-monitor-to-18.176.21.12927017-closed

ip주소가 달라서 접근제한

---

ejs

데이터 삭제

1. 삭제 버튼 클릭
2. ajax로 삭제를 요청
3. 서버에서 삭제 요청한 데이터를 삭제 (성공 시 상태코드 200 넘겨줌)
4. ajax의 done 함수에서 fadeout 처리

server.js

app.delete('/delete', function(req, res) {
    console.log(req.body)
    req.body._id = parseInt(req.body._id);
    // req.body에 담겨온 게시물 번호를 가진 글을 db에서 찾아 삭제해주세요.
    db.collection('post').deleteOne(req.body, function(err) {
        if(err) return console.log(err);
        console.log('삭제완료');
        res.status(200).send({message: '성공'})
    })
})

list.ejs

    <h1 class="ml-2 my-3">서버에서 가져온 할일 리스트</h1>
    <ul class="list-group">
      <% for (let i = 0; i < posts.length; i++) { %>
      <li class="list-group-item">
        <p>글번호 : <%= posts[i]._id %></p>
        <h4>할일 제목 : <%= posts[i].todo %></h4>
        <p>날짜 : <%= posts[i].date %></p>
        <button class="btn btn-danger delete" data-id="<%= posts[i]._id %>">삭제</button><p></p>
      </li>
      <% } %>
    </ul>
    <script src="https://code.jquery.com/jquery-3.6.1.js"></script>
    
    <script>
      $('.delete').click(function(e) {
        var btnClick  = $(this);

        $.ajax({
          method : 'DELETE',
          url : '/delete',
          data : {_id : e.target.dataset.id} // 삭제할 게시물 번호
        }).done(function(result){
          // 요청 성공 시 실행
          console.log('삭제성공')
          // 삭제 대상을 안보이게 처리하는 루틴
          btnClick.parent('li').fadeOut();

        }).fail(function() {
          // 요청 실패 시 실행
          console.log('삭제실페')

        })
      })
    </script>

데이터 조회

id를 url의 파라미터로 전달

webserver.js

app.get("/detail/:id", (req, res) => {
    console.log('상세페이지');
    db.collection('post').findOne({_id : parseInt(req.params.id)}, function(err, result) {
        if(err) return console.log(err);
        console.log(result);
        res.render('detail.ejs', {data : result});
    })
})

detail.js

 <div class="container mt-4">
        <h2>상세 페이지</h2>
        <div class="card" style="width: 100%;">
          <div class="card-body">
            <h5 class="card-title"><%= data.todo %></h5>
            <h6 class="card-subtitle mb-2 text-muted"><%= data.date %></h6>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="card-link">Card link</a>
            <a href="#" class="card-link">Another link</a>
          </div>
        </div>

정적 파일 사용

app.use('/public', express.static('public')); 

: static 파일(변하지 않는 파일, 정적파일)을 보관하기 위해 public 폴더를 사용하겠다.

페이지 include

여러 페이지에 동일하게 들어가는 html 코드를 하나의 파일로 관리하여 동시에 적용시켜준다.

nav.html

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Todolist</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="/write">Write</a>
        <a class="nav-link" href="#">Temp</a>
      </div>
    </div>
  </div>
</nav>

nav 파일을 만든 후, 각 페이지에<%- include('nav.html') %> 을 삽입.

데이터 수정

webserver.js

app.put("/edit", function(req, res) {
    // 폼에 담긴 todo 데이터, date 데이터를 가지고 db.collection(post)를 업데이트 시킴
    console.log('업데이트')
    db.collection('post').updateOne(
        { _id : parseInt(req.body.id) },
        { $set : { todo : req.body.title , date : req.body.date }},
        
        function(err, reuslt) {
        if(err) return console.log(err);
        console.log('수정완료');
        })
})

<% %> : ejs에서 데이터를 가져올 때
<%= %> : ejs에서 변수를 가져올 때

edit.ejs

    <%- include('nav.html') %>

    <h2 class="container mt-4"><strong>글 수정 페이지</strong></h2>
    
    <div class="container mt-3">
      <form action="/edit?_method=PUT" method="post">
        <div class="form-group">
          <label>오늘의 할일</label>
          <input type="text" name="id" style="display:none;" value=<%= post._id %>>
          <input type="text" name="title" class="form-control" value=<%= post.todo %>>
        </div>
        <div class="form-group">
          <label>날짜</label>
          <input type="text" name="date" class="form-control" value=<%= post.date %>>
        </div><p></p>
        <button type="submit" class="btn btn-outline-danger">수정</button>
      </form>
    </div>