항해99 37일차 TIL : axios put 사용 코드.

백엔드 서버에 컨텐츠 수정을 위해서 axios를 이용해서 PUT 요청을 구현하는데 애를 먹었다. 해결하고 나니 간단한 코드 같지만 고민을 많이 했던 코드다.

const editPostAX = (id = null, edit = {}) => {
  return function (dispatch, getState){
    if(!id) {
      console.log("게시물이 없어요!")
      return;
    }
    
    let _edit = {
      contents: edit.contents,
      imgUrl: edit.image_url,
    }

    axios.put(`http://15.164.217.16/api/contents/${id}`, {
      ..._edit
    })
    .then((doc) => {
      console.log(doc)
      let edit_list = {..._edit, id: doc.data.id}
      dispatch(editPost(edit_list))
      dispatch(imageActions.setPreview("http://via.placeholder.com/400x300"))
      history.replace("/")
    }).catch((err) => {
      window.alert("게시물 작성에 문제가 있어요!")
    })
  }
}

먼저 서버쪽에 데이터를 넘겨주며 요청(Request)를 하는 것이므로 클라이언트쪽에서 넘겨주는 데이터를 설정하는 것임을 깨닫지 못한것이 오래 헤매게 된 원인이다. 원인을 알고 나서 let _edit로 데이터를 설정해주었다. edit.contents 할때 edit은 수정 페이지에서부터 넘겨받는 수정데이터 딕셔너리이다. 그리고 then 이후로 지정해주는 비동기처리 코드는 POST 요청에서 했던 코드를 거의 똑같이 썼는데, 어차피 수정은 원래 업로드 데이터의 일부를 바꿔끼우는 것이니 특별히 다른 코드를 쓸 필요가 없기 때문이다.