[AJAX로 삭제요청하기 2] ajax는 되는데 axios랑 fetch가 안됩니다

[대영]

안녕하세요
강의 잘 보고있습니다.

해당 강의를 보면서 그냥 제가 알고있던 fetch를 사용하는데,
ajax로 data:{name:Number} 는 잘 보내지지만
fetch는 보내지지 않습니다

아예 빈 body가 도착합니다.

구글링해보니
스택오버플로우에 막 영어로 body parser가 json 객체 이외에는 
정보를 받을 수 없어서 안된다는 말이 있던데,

제가 알기로는 ajax나 fetch나 http프로토콜로 통신하는 원리는 똑같은 것으로 알고있습니다
심지어 fetch 보낼 때 header에 json을 추가해줘도 해결이 안됩니다.
그럼 json과는 관련이 없다는 말인데,
도대체 원인이 무엇인지 궁금합니다.


[되는코드]
const onDelete = (e) => {
      let id=e.target.getAttribute('data-id')
      $.ajax({
        method:'DELETE',
        url:'/delete',
        data: {_id:id}
      }).done(function(res){
        console.log(res)
      })
    }


[안되는 코드]
const onDelete = (e) => {
      let id = e.target.getAttribute('data-id')
      console.log(id)
      
      fetch('/delete',{method:'DELETE',data:{_id: id}})
    .then(rs=>{
      console.log(rs.data)
    })
    .catch(err=>console.log(err))
    }
encodeURI도 써보고 별거 다써봤지만 안됩니다.

그냥 body가 {} 빈상태로 와요

여기서 질문입니다.

1. fetch로 안되는 원인이 무엇인지
2. 해결 방법은 무엇인지 
(실제 육감으로 느껴지는 속도차이는 미미하다고 하지만 jquery는 되도록 안쓰고 해결해보고 싶습니다.)

3. 아시겠지만,
mysql 기능중에 tail이라는 기능이 있어서 
실시간으로 어떤 쿼리가 요청됐는지 볼 수 있습니다.
"어! 분명히 댓글 수정을 눌렀는데 실제로는 수정이 안되네?"
하고 tail을 보면 UPDATE 댓그르="새댓글"
아! 댓글 컬럼을 댓그르 컬럼이라고 잘못적엇구나! 하고 알게되죠.
mongoDB도 그와같이 쿼리 요청을 볼 수있는 기능이 있는지 궁금합니다.
감사합니다.

[대영]

2번은 구글링 임시로 해결했습니다만 
App.use에 바디파서.json 으로 바꾸면 됩니다
그러면 write에서 body를 못보내게 돼서 진퇴양난이네요

[codingapple]

data : 어쩌구 말고 body : 어쩌구로 보냅시다 
atlas의 경우 로그볼 수 있는 메뉴가 있는데 무료티어는 없을걸요 
아마 mongodb shell로 접속해서 로그 출력해보거나 그래야합니다 어짜피 서버에서 쿼리문 console.log 가능해서 큰상관은 없습니다

[대영]

body로 당연히 바꿔봤습니다만, 역시나 빈 body가 갑니다

fetch('/delete',{method:'DELETE',body:{_id: id},headers: {
            "Content-Type": "application/json"
          }})
바디로 바꿔도 같습니다.

[codingapple]

서버파일 상단에 app.use(express.json()) 추가해야 유저가 보낸 json 데이터 해석가능합니다 
body: 오른쪽에 있는 것도 JSON으로 바꿔서 보냅시다

[대영]

당연히 그것도 해봤습니다. 윗윗윗 댓글 참고바랍니다.
그 해결책을 사용하면 이번에는 write기능이 작동안합니다.
form에서 값을 못읽어오게  변해버려요 그렇게 하면..

[codingapple]

서버파일 상단을 그 코드로 수정이 아니라 추가만 하면 됩니다

[대영]

오 감사합니다 그냥 추가만하면되는군요

[대영]

이 건에 대해 궁금하신 분들을 위해 자답 추가합니다.

걍 ajax랑 axios만 쓰세요
fetch 쓰니깐 온갖 생각지도 못한 문제에 부딛치네요
fetch 버리세요

[오은]

같은 시도, 같은 문제에 봉착했었는데.. 감사합니다.

[글쓴이]

글