[Node.js MongoDB] 11-15강 정리

11강 HTML에 DB 넣기 (1)

/list로 접속하면 데이터들을 보여줄 것

EJS - html을 조금 더 쉽게 사용할 수 있도록 해주는 템플릿 엔진 / 전처리 엔진

대체품 - vue, react, angular

npm install ejs 를 통해 설치 가능

list.html 을 list.ejs 로 바꾸면 ejs 문법을 사용하여 서버데이터 삽입 가능

list.ejs 파일은 views 폴더를 만든 후 그 안에 저장해야함

server.js에서 ejs 파일을 열고싶을 때에는 render 사용

app.get('/list', function(req, res){
    db.collection('post').find().toArray(function(error, ret){
        console.log(ret); //가져온 결과 출력 //모든 데이터 가져오기
    res.render('list.ejs', {posts : ret}); //ejs 파일 렌더링
    //디비에 저장된 post라는 collection 안의 모든 데이터를 꺼내주세요
    });
});

12강 HTML에 DB 넣기 (2)

ejs 에서 자바스크립트 언어를 사용하기 위해 <% 사용

posts.length : 데이터의 갯수를 알아옴

13강 게시물마다 번호달기(1)

auto increment

{Name : 'Posts_Num'} : 쿼리문

var, let, const : 셋 다 변수 만드는 문법

• var - 재선언O, 재할당 O, 생존범위는 function
• let - 재선언 X, 재할당 O, 생존범위 {}
• const - 재선언 X, 재할당 X, 생존범위 {}

14강 게시물마다 번호달기(2)

.updateOne(요런 데이터를, {operator : 사용해야함이렇게 수정해주세욜})

db.collection('post').insertOne({_id : 100, name : 'John', age : 23}, function(error, res){ // Object 자료형
	console.log('save complete')
});

(이런식으로 {$set : {TotalPost : 1}})

{$inc : {TotalPost : 1}}

set : 바꿔주고 싶을 때 사용함

inc : 기존값에 더해줄 값

server.js 에서는 다음과 같이 구현

: 어떤 사람이 /add 경로로 POST 요청을 하면 ... ???를 해주세요

app.post('/add', function(req, res){ // req에 input에 적은 정보가 들어감 근데 꺼내쓰려면 body-parser library 필요 npm install body-parser 근데 2021년 이후 express 기본포함이라 설치할 필요 없음
    res.send('send complete');
    db.collection('counter').findOne({Name : 'Posts_Num'}, function(error, ret){
        console.log(ret.TotalPost)
        var total_num = ret.TotalPost;
        db.collection('post').insertOne({_id : total_num + 1, title : req.body.title, date : req.body.date}, function(error, res){ // Object 자료형, req.body라고 하면 요청했던 form에 적힌 데이터 수신가능
            console.log('save complete');
            //counter라는 콜렉션에 있는 TotalPost 항목도 1 증가시켜야함
            db.collection('counter').updateOne({Name : 'Posts_Num'}, {$inc : {TotalPost : 1}}, function(error, ret){
                if (error){return console.log(error)} //error 처리
            }); // 하나만 수정
        });

    }); //data 하나만 찾을 때
});

list.ejs 에서

<div class="container">
      <ul class="list-group">
        <% for (var i = 0; i < posts.length; i++){ %>
        <li class="list-group-item">
          <p>Todo Num : <%= posts[i]._id %></p>
          <h4><a href="/detail/<%=posts[i]._id%>"> Todo Title : <%= posts[i].title %> </a></h4>
          <p> Due date : <%= posts[i].date %> </p>
        </li>
        <% } %>
      </ul>
    </div>

위처럼 사용해 게시물마다 번호 할당

15강 AJAX로 삭제요청 - HTML

html 에서 delete 요청 사용하는 법

1. method-override library 이용
2. JavaScript AJAX 사용

AJAX - 서버랑 통신할 수 있도록 도와주는 문법

장점 : 새로고침 없이 사용가능

<script>
  $.ajax({
    method : 'DELETE',
    url : '요청할 경로',
    data : '요청과 함께 보낼 데이터'
  }).done(function(ret){
			요청 성공하면 이걸 실행해주세욥!!
  });
</script>

 → 서버에 새로고침 없이 DELETE 요청을 할 것이다!