웹페이지를 만들면서(데이터타입, currentTarget, ...등)

정창민·2023년 1월 16일

1. 데이터타입-원시타입

다른 사용자가 남기 글을 삭제하기 못하게 구현하다 발생한 이슈

// 게시글 삭제
router.delete('/post/:postId', authMiddleware, async (req, res) => {
  const {postId} = req.params

  try {
    const post = await Post.findById(postId)

    if(!post.writer.equals(res.locals.user._id)) return res.status(400).json({message : '다른 사용자의 게시글은 삭제할 수 없습니다.'})

    if(post) {
      await Post.deleteOne({_id : postId})
      return res.status(200).json({message : '게시글을 삭제하였습니다.'})
    }
  } catch (err) {
    return res.status(500).json({message : err})
  }
})

post.writer !== res.locals.user._id 일 때, 삭제할 수 없다는 메세지를 보내려는 상황
콘솔 창에 두 정보를 비교해보면 값은 완전히 일치한다.
두 값이 같아 보이나 다른 경우이다.
mongodb의 유니크한 _id는 ObjectId('63c2a444d12cda2df3b9d190')
데이터타입이 원시타입이기 때문이다.
변수에 값을 할당하게 되면 메모리 셀에 값이 들어가게 되고, 변수는 값이 들어있는 메모리셀의 주소를 가리키게 된다.
서로 다른 메모리셀의 주소를 가리키고 있기 때문에 if조건문 상에서 일치하지 않는다는 결과를 보여준다.

해결

equals() 메소드를 사용하여 변수에 할당된 순수한 값만을 비교하였다.

참조 블로그 : https://seons-dev.tistory.com/entry/JAVASCRIPT-%EC%9B%90%EC%8B%9C-%ED%83%80%EC%9E%85%EA%B3%BC-%EA%B0%9D%EC%B2%B4-%ED%83%80%EC%9E%85-%EC%B0%A8%EC%9D%B4-%EC%A0%95%EB%A6%AC#google_vignette

2. mongoose.SchemaTypes.ObjectId

db에 유니크한 _id를 value값으로 저장하려했을 때, string타입으로 저장되었다.

const { ObjectId } = require('mongoose').Types

// 채팅방 정보 저장
router.post('/chatroom', authMiddleware, async (req, res) => {
  const {writer} = req.body
  const data = { member : [ObjectId(writer), res.locals.user._id], title : '무슨무슨채팅방' }

  try {
    await Chatroom.create(data)
    res.status(200).json({message : '채팅방에 정보를 보냈습니다.'})
  } catch (err) {
    return res.status(500).json({message : err})
  }
})

상단에 객체 구조 분해 할당으로 값을 가져왔다.
value에 ObjectId() 함수를 감쌌다.

3. e.target과 e.currentTarget의 차이

차이를 몰라 몇시간 동안 고생하였다.

상황

// 채팅방 정보 불러오기
function reloadChat() {
  $.ajax({
    type : 'GET',
    url : '/api/chatroom',
    data : {},
    success : function (response) {
      let chatroomData = response['chatroomData']
      $('#chatroom').empty()

      for(let i = 0; i < chatroomData.length; i++) {
        let chatroomId = chatroomData[i]['chatroomId']
        let user1 = chatroomData[i]['member'][0]
        let user2 = chatroomData[i]['member'][1]
        let title = chatroomData[i]['title']

        let template = `<li class="list-group-item chatroom" data-id="${chatroomId}">
                          <h6 style="font-weight : bold;">${title}</h6>
                          <h6 style="font-size: 12px;">${user1}에게 ${user2}가 채팅을 요청하였습니다.</h6>
                        </li>`

        $('#chatroom').append(template)
      }
    },
    error : function (response) {
      alert(response.responseJSON.message)
      window.location.reload()
    }
  })
}

// 메세지 발행
let targetChatroomId

function getChatroomId(e) {
  targetChatroomId = e.currentTarget.dataset.id
  console.log(targetChatroomId)
}