nodejs console.log(req.body) undefined 가 나오는 경우

nodejs의 기초를 공부하며 간단한 채팅 기능을 가진 게시판을 만드는 도중 이상한 문제가 발생했다.

 

      $(".chatBtn").click(function (e) {
        window.location.href = "/chat";
        $.ajax({
          method: "POST",
          url: "/chat",
          data: {
            writerName: e.target.dataset.writerName,
            writerId: e.target.dataset.writerId,
          },
        });
      });
    </script>

AJAX를 통해 POST요청을 할 때, req.body로 클릭 태그의 두 개의 dataset을 전달하는 도중, 이상하게 한 dataset은 멀쩡히 사용이 되는 반면 한 dataset은 undefined가 나왔다.

정확히는 writerName은 서버로 전송이 안됐지만 writerId는 서버로 전송이 되었다.

 

참 이상한 점은, 서버에서 console.log(req.body)를 하였을 때 빈 객체로 출력이 되었지만, writerId를 가지고 몽고db의 document에 데이터를 추가하는 과정은 정상적으로 이루어졌다는 것이었다.

const { ObjectId } = require("mongodb");
app.post("/chat", function (req, res) {
  console.log(req.body); // {}
  db.collection("chat").insertOne({
    memberId: [ObjectId(req.body.writerId), req.user._id],
    memberName: [req.body.writerName, req.user.id],
    date: new Date(),
    title: new Date() + "채팅방",
  });
});

여기서 req.body에서 받은 데이터를 바탕으로 memberId와 memberName을 만들어서 mongodb에 객체를 만들어 올리는데, memberId는 정상적으로 생성이 되는 반면 memberName의 req.body.writerName은 null 이었다.

 

대체 왜 그렇지? 하고 한참을 고민했다.

오탈자를 꼼꼼하게 체크했으나 문제없었고, 검색을 해보니 bodyParser에 문제가 있을 수 있겠다 싶어 확인해보았지만 그 또한 문제는 아니었다.

 

<button class="chatBtn" 
	data-writerName="<%=posts[i].writerName%>" 
    data-writerId="<%=posts[i].writerId%>">
	<%=posts[i].writerName%>에게
	1:1 채팅 신청하기
</button>

한참을 고민한 결과, html에서 dataset 속성에 대문자가 들어갈 경우 자동으로 소문자취급되어 불러올 때는 소문자로 불러와야했다.

 

여기서 의문이 생기는데 그럼 대체 writerId는(I가 대문자) 어떻게 정상적으로 사용할 수 있었던걸까?

이유는 너무 간단했는데, req.body.writerId로 writerId를 프론트로 받아올 때 req.body.writerName과 마찬가지로 undefined 이지만, mongodb에서 제공하는 자료형인 ObjectId로 변환해주는 과정에서 undefined값을 랜덤한 ObjectId값으로 만들어주는 생각지도 못한 기능이 있었기 때문이었다. 즉 정상적으로 writerId 값이 전달되었던 것이 아니었던것...