---

MongoDB Atlas

---

npm install mongodb

mysql 포트문제해결
https://0ver-grow.tistory.com/m/194?category=841784

mongoDB 서버
https://cloud.mongodb.com/v2/6374a09b39c3e61fda9563c0#clusters

---

템플릿 엔진

---

템플릿 엔진의 종류

1. pug
2. nunjuks
3. ejs

문법이 비스하고 서버의 데이터를 표현하기 용이하다.

Pug(구 Jade)

• 문법이 Ruby와 비슷해 코드 양이 많이 줄어듦
  HTML과 많이 달라 호불호가 갈림
  익스프레스에 app.set으로 퍼그 연결
  

Html 표현

변수

render의 첫번째 전달인자 : 수행경로
render의 두번째 전달인자 : 전달할 데이터 (형식은 객체형식으로 전달)

• res.render에서 두 번째 인수 객체에 Pug 변수를 넣음
  

• res.locals 객체에 넣는 것도 가능 (미들웨어 간 공유됨)
  

• =이나 #{}으로 변수 렌더링 가능(=뒤에는 자바스크립트 문법 사용 가능)
  

---

넌적스

Pug의 문법에 적응되지 않는다면 넌적스를 사용하면 좋음

변수

• 내부 변수 선언 가능 {%set 자바스크립트 구문 %}
  

---

ejs

npm install ejs

list.html ⇒ list.ejs 변경

<%= 데이터 %>
<%= 자바스크립트 구문 %>

    <h1>서버에서 가져온 할일 리스트</h1>

    <% for (let i = 0; i < posts.length; i++) { %>
      <h2>할일 제목 : <%= posts[i].todo %></h2>
      <h2>날짜 : <%= posts[i].date %></h2>
    <% } %>

id 설정

id = 총 개시물 갯수 + 1 (auto_increment)
Count라는 함수를 사용하면 게시물 개수를 얻어올 수 있지만 좋은 방법은 아니다.

mongoDB Cluster의 counter Collection을 추가한다.

기존 DB의 총 데이터 개수 정보를 얻어온다.
총 데이터 개수 = result.totalPost;
데이터 추가 할 때 _id 값으로 사용

app.post('/add', (req, res) => {
    db.collection('counter').findOne({name: 'postcnt'}, function(err, result) {
        if (err) return console.log(err);
        console.log(result.totalPost);

        var totalCount = result.totalPost

        db.collection('post').insertOne({_id: totalCount + 1, todo: req.body.title, date: req.body.date}, function(err, result) {
            if(err) return console.log(err);
            console.log('저장완료');
        });
      
        // counter라는 컬렉션에 있는 totalPost 항목도 1 증가시켜야 함.    
        db.collection('counter').updateOne({name: 'postcnt'}, { $inc : {totalPost: 1}}, function(err, result) {
            if (err) return console.log(err);
        })
    });
     res.send('전송완료');
})

1. /add로 post 요청을 하면?
2. db.counter에서 totalPost를 찾는다.
3. totalPost를 변수에 저장한다.
4. DB에 새로운 게시물을 기록한다. (id, todo, date)
5. 완료되면 totalPost에 +1 한다.

operator 4가지

set(변경) - 세팅
inc(증가) - 증가의 단위
min(기존값보다 적을 때만 변경)
rename(key의 이름 변경

사용 시 앞에 $ 표시를 붙여줌.

{$set : {totalPost: 바꿀 값}}
{$inc : {totalPost: 기존 값에 더해줄 값}}

데이터 삭제

삭제 버튼을 클릭하면 서버에 해당 글 삭제 요청을 한다.
삭제 요청은 delete를 사용한다.

get / post
put / delete

1. method-override 라이브러리 사용
2. ajax 사용

ajax

• ajax란?
  서버랑 통신할 수 있게 도와주는 자바스크립트 문법
  • 특징: 서버에 요청하는데 새로고침이 없다. ex) sns 좋아요 버튼
    get/post 요청하여 처리하면 나도 모르게 페이지는 새로고침 된다. 하지만 ajax는 새로고침 없이 처리함.

서버에 새로고침 없이 /delete 경로로 DELETE 요청을 함.

    <script>
      $.ajax({
        method : 'DELETE',
        url : '/delete',
        data : '1'
      }).done(function(result){
        // 요청 성공 시 실행
      })
    </script>

참고: jquery
프론트엔드 개발을 쉽게 도와주는 자바스크립트 문법