[Node.js / MongoDB] 회원 기능을 포함한 게시판 기능 만들기

💡 실습 포인트!

💜 회원가입 기능 만들기

• 이전에 건너뛴 회원가입 기능을 만들어 사용자를 추가해보았다.
  (중복 아이디 확인 기능은 추후 만들 예정)

---

💜 게시물 작성자만 게시물 삭제 권한 주기

• 로그인한 사용자만 본인의 게시글을 삭제할 수 있는 기능을 만들어보았다.
  (로그인하지 않고 게시물 등록하는 경우 오류가 발생하는 부분은 추후 수정 예정)

---

💜 회원가입 기능 만들기

🤍 회원가입 EJS 파일 만들기

<h4 class="container mt-5"><strong>회원가입</strong></h4>
<div class="container mt-4">
  <form action="/register" method="POST">
    <div class="form-group my-4">
      <label class="mb-2">아이디</label>
      <input type="text" class="form-control" name="id">
    </div>
    <div class="form-group my-4">
      <label class="mb-2">비밀번호</label>
      <input type="password" class="form-control" name="pw">
    </div>
    <button type="submit" class="btn btn-danger fw-bold">회원가입</button>
  </form>
</div>

• 강사님은 빠른 수업을 위해 로그인 페이지에 회원가입 레이아웃을 추가 작성하셨는데, 나는 회원가입 페이지를 따로 만들었다. (역시 회원가입 페이지와 로그인 페이지는 분리해주어야 마음이 편안하다.)
• 레이아웃 자체는 로그인 페이지와 동일하게 하고 내용과 action 속성만 수정해주었다.

---

🤍 회원가입 기능 관련 JavaScript 코드 작성하기

app.get('/register', function(req, res){
    res.render('register.ejs');
})

app.post('/register', function(req, res){
    db.collection('login').insertOne({id : req.body.id, pw: req.body.pw}, function(err, result){
        res.redirect('/login');
    })
})

• 일단, 누군가가 /register 경로로 GET 요청을 하면 회원가입 페이지가 보이도록 해주었다.
• 그 다음으로 누군가가 폼을 작성한 후에 회원가입 버튼을 클릭하면 작성한 아이디와 비밀번호를 db.collection 의 login 에 추가하고 로그인 페이지로 이동하게끔 설정해주었다.
• 간이로 만든 형식이므로 굉장히 간소화되었지만 실질적으로 이 회원가입 기능을 구현할 때에는 생각해봐야할 부분들이 꽤 있다.
  • 회원가입하려고 하는 아이디가 이미 DB 에 존재하는 아이디인지 확인한다. (아이디 중복 확인)
  • 회원가입하려고 하는 아이디가 아이디 생성 양식을 잘 지키고 있는지 확인한다.
  • 비밀번호를 DB 에 전송하기 전에 암호화를 했는지 확인한다. (보안 문제 방지)

---

💜 게시물 작성자만 삭제 권한 주기

🤍 게시물 등록할 때, 게시물 작성자 정보 넣기

// 누군가가 폼에서 /add 로 POST 요청을 하면
app.post('/add', function(req, res){

    // 게시물마다 번호를 달아 저장하기
    // DB.counter 내에서 '총게시물개수'를 찾아서
    db.collection('counter').findOne({name : '총게시물개수'}, function(err, result){
        // console.log(result.totalPosts);

        // '총게시물개수' 의 totalPosts 값을 totalPosts 변수에 저장
        var totalPosts = result.totalPosts;

        // 전송받아 저장할 데이터들을 submitData 변수에 저장
        var submitData = {
            _id : totalPosts + 1, 
            할일: req.body.content, 
            마감일 : req.body.date, 
            작성자: req.user._id
        }

        // 이제 DB.post 에 번호를 단 새로운 게시물을 추가
        db.collection('post').insertOne(submitData, function(err, result){
            console.log('게시물 저장 완료!');

            // DB.counter 의 '총게시물개수' 의 totalPosts 값을 1씩 증가
            db.collection('counter').updateOne({name : '총게시물개수'},{ $inc : {totalPosts: 1} }, function(err, result){
                console.log('총 게시물 개수 업데이트 완료!');
            });
        });
    });

    // res.send('게시물 추가 완료');
    res.redirect('/list') 
})

• 기존에 작성했던 코드의 경우, 게시물을 작성 후 등록하면 _id, 할일, 마감일 만 DB 로 전송되도록 구현했었기에 작성자는 알 수 없었다.
• 따라서, 게시물을 등록할 때 작성자 를 추가해줌으로서 게시물 작성자를 구별할 수 있도록 하였다.
• 주의할 점은 req.user 관련 정보들을 deserializeUser() 함수가 제공하므로 passport 관련 코드들보다 아래쪽으로 코드를 이동시켜주어야 한다. 
• 위 코드에서는 코드의 가독성을 위해 submitData 라는 변수에 전송받아 DB 에 저장할 데이터들을 담아준 후, 해당 변수로 기존의 코드를 수정해주었다.

• 이제 게시물을 새로 등록하면 작성자 정보도 post collection 에 저장되는 것을 볼 수 있다.

---

🤍 게시물 작성자만 게시글 삭제하는 권한 주기

// 누군가가 삭제 버튼을 클릭하여 /delete 로 DELETE 요청을 하면
app.delete('/delete', function(req, res){
    // DB 에서 게시글 삭제하기
    req.body._id = parseInt(req.body._id);

    var delData = {_id : req.body._id, 작성자 : req.user._id}
    
    db.collection('post').deleteOne(delData, function(err, result){
        console.log('게시물 삭제 완료');
        res.status(200).send({message : '성공했습니다.'});
    })
})

• 기존의 코드는 post collection 에서 _id 에 해당하는 게시물만을 찾아 삭제를 진행했다.
• 이번에는 게시물 작성자만 게시글을 삭제할 수 있어야 했기에, 로그인한 사용자가 req.user._id 에 담겨 있는 상태에서 삭제하려는 게시물의 작성자가 req.user._id 의 조건을 만족하면 게시물이 삭제되도록 해주었다.

---

🤍 애니메이션 효과 문제 처리를 위해 코드 수정하기

• 근데 여기까지만 했을 때 생각지 못한 문제가 발생했다.
• 바로 삭제 버튼을 누르기만 해도 실제로 데이터가 삭제되든 아니든 삭제되어보이는 이전에 설정해둔 애니메이션 효과가 나타나는 것이다.
• 강의에서는 건너뛴 부분이라 이 부분은 스스로 해결할 방법을 찾아야 했고, 역으로 추적하면서 전반적으로 수정을 하느라 시간이 좀 걸렸다.
• 일단 이 문제를 해결하기 위한 내 생각은 이러했다.
  • 할일 리스트 페이지에서 삭제 버튼을 누르면 게시물의 _id 와 함께 작성자 데이터를 /delete 경로로 전송한다.
  • 전송된 게시물 데이터의 _id 와 작성자 부분을 받아온다.
  • 게시물 데이터의 작성자와 현재 사용자의 _id 를 비교한다.
  • 만약 두 데이터가 일치하면, 게시물 _id 를 검색하여 삭제한 후 성공코드 200 을 전송하고, 일치하지 않으면 실패코드 400 을 전송한다.
  • EJS 파일이 성공코드를 전달받으면 게시물에 fadeOut 효과를 주고, 실패코드를 전달받으면 아무런 효과가 발생하지 않는다.

<h4 class="container mt-5 mb-4"><strong>할일 리스트</strong></h4>

<div class="container input-group mb-1">
  <input class="form-control" id="search-input">
  <button class="input-group-append btn btn-danger" id="search">검색</button>
</div>

<div class="container mt-3">
  <ul class="list-group">
    <% for(let i = 0; i < post.length; i++){ %>
    <li class="list-group-item mb-2" style="border-top-width: 1px">
      <p class="mb-2" style="font-size: 14px;">글번호 : <%= post[i]._id %></p>
      <p class="mb-2" style="font-size: 18px;">할일 : <%= post[i].할일 %></p>
      <p class="mb-2" style="font-size: 16px;">마감일 : <%= post[i].마감일 %></p>
      <button class="btn btn-primary edit"><a style="color: white; text-decoration: none;" href="/edit/<%= post[i]._id %>">수정</a></button>
      <button class="btn btn-danger delete" data-id="<%= post[i]._id %>" data-writer="<%= post[i].작성자 %>">삭제</button>
    </li>
    <% } %>
  </ul>
</div>

• 이전에 글쓰기 페이지에서 Submit 버튼을 누르면 게시물의 _id 와 함께 작성자의 정보도 DB 로 전송되어 저장되어야 했다.
• 그래서 html 코드 부분의 button 태그에 data-writer 를 추가해주었다. 

  $('.delete').click(function(e){

    let postNum = e.target.dataset.id;
    let writer = e.target.dataset.writer;
    let clicked = $(this);

    $.ajax({
      method : 'DELETE',
      url : '/delete',
      data : {_id : postNum, 작성자 : writer}
    }).done(function(result){
      // AJAX 성공할 경우 실행할 코드
      console.log('성공했습니다.');
      clicked.parent('li').fadeOut();
    }).fail(function(err){
      // AJAX 실패할 경우 실행할 코드
      console.log('실패했습니다.');
    })

  })

• 기존에 data-id 만 받았다면, 삭제 버튼에 추가해둔 data-writer 도 받아와서 /delete 경로로 전송 시 data 객체에 담아 같이 전송해주었다.

// 누군가가 삭제 버튼을 클릭하여 /delete 로 DELETE 요청을 하면
app.delete('/delete', function(req, res){
    // DB 에서 게시글 삭제하기
    req.body._id = parseInt(req.body._id);

    var delData = {_id : req.body._id}

    console.log(req.body);

    if (req.body.작성자 == req.user._id) {
        db.collection('post').deleteOne(delData, function(err, result){
            console.log('게시물 삭제 완료');
            res.status(200).send({message : '성공했습니다.'});
        })
    } else {
        console.log('게시물 삭제 실패');
        res.status(400).send({message : '실패했습니다.'});
    }
})

• 기존에 console.log(req.body) 를 해보았을 때 _id 만 출력되었던 반면, 이제는 _id 와 작성자가 출력된다.
• 이제 이것을 활용해서 req.body.작성자(게시물 작성자) 와 req.user._id(현재 로그인한 사용자) 를 비교할 수 있게 되었다.
• 두 데이터를 비교했을 때 일치한다면 현재 로그인한 사용자가 게시물 작성자니까 해당 게시물의 _id 를 받아와서 데이터를 삭제한다.
  • 삭제하고나서는 '게시물 삭제 완료' 라는 문구를 띄워 제대로 삭제되었는지 확인한다.
  • res.status(200).send() 까지 해주면 할일 리스트 EJS 파일의 .done() 함수 내의 fadeOut() 함수가 실행된다.
• 두 데이터를 비교했을 때 일치하지 않는다면 현재 로그인한 사용자가 게시물 작성자가 아니라는 이야기이므로 게시물이 삭제되어서는 안된다.
  • 따라서, '게시물 삭제 실패' 라는 문구를 띄워준다.
  • res.status(400).send() 를 해주어 할일 리스트 EJS 파일의 .fail() 함수가 실행되어 애니메이션 효과는 발생하지 않는다.