[WIL] 미니프로젝트 (FormData로 이미지 url이랑 다른 content랑 같이 서버로 보내기 with. AXIOS)

FormData로 이미지 url이랑 다른 content랑 같이 서버로 보내기

//POSTWRITE.js

const [imageUrl, setImageUrl] = React.useState(""); //보내는 image
  const [title, setTitle] = React.useState("");
  const [content, setContent] = React.useState("");
  const [category, setCategory] = React.useState("");
  const [price, setPrice] = React.useState(0);


const changeContent = (e) => {
    setContent(e.target.value);
  } 
  const changePrice = (e) => {
    setPrice(e.target.value);
  } 
  const changeTitle = (e) => {
    setTitle (e.target.value);
  }
  const changeCategory = (e) => {
    setCategory(e.target.value); 
  }
  const changeImageUrl = (e) => {
    setImageUrl(e.target.files[0]);
  }

  const submit = () => {
    if(imageUrl === "" || title === "" || category === "" || content === ""  || price === "" ){
      alert('모든 사항을 기입해주세요.');
      return;
    }else{
      dispatch(PostActions.addPost(imageUrl, title, category, content, price));
    }
    
    
    <input type="text" id="title" name="title" placeholder="글 제목" onChange={changeTitle}/> ... 
    <input id="image" name="image" type="file" 
              onChange={(e) => {changeImageUrl(e);}}/>
    <input id="price" name="price" className="has-prefix" type="number" placeholder="가격 (선택사항)" 
                onChange={changePrice}/> 

//post.js (redux store)
const addPost = (imageUrl, title, category, content, price) => {
    const formData = new FormData();
      formData.append("title", title);
      formData.append("category", category);
      formData.append("content", content);
      formData.append("price", price);
      formData.append("image", imageUrl);
  return async function (dispatch, getState, {history}){
      try{
          await axios.post("http://----server url ----/api/write", formData, {
            headers: {
               "content-type": "multipart/form-data",
              Authorization: `BEARER ${sessionStorage.getItem("token")}`
            },
          },
          { withCredentials: true } // cors Error 방지
          );
          window.alert('게시글 작성을 성공하였습니다.');
          dispatch(getPost(1));
          history.replace('/');
      }
      catch(err){
        window.alert('게시글 작성에 실패하였습니다.')
        console.log(err);
        return;
      }
  }
}

데이터들을 onChange이벤트로 데이터를 모아서 post.js로 넘겨줘서 formData로 묶어서 서버로 content-type을 바꿔서 보내주었다.

미니프로젝트에서 로그인, 회원가입, 메인페이지 (CRUD의 Read부분)을 맡았었다. 처음엔 순조롭게 잘 진행되었고 화요일쯤엔 다 마무리가 되는 듯하였다. 하지만 일은 수요일에 벌어지고 말았다. 갑자기 팀원이 못하겠다고 하면서 연습하던/공부하던 파일을 슬랙에 던져놓았다. 청천벽력같은 말이었다. 그 때부터 백엔드팀원들의 도움을 받아서 C와 R,D를 부랴부랴하였지만 결국 U를 하지 못하고 마치게되었다.

이번 프로젝트 주차로 소통의 중요성을 크게 깨달았다. 너무 안일하게 믿고만 있었던 것 같다. 다음주차부터는 팀원들과 어디까지 진행이 되었는지 상세히 소통하도록 할 것이다.