20230302 [미니프로젝트] - 청소대장 프로젝트

lionloopy·2023년 3월 2일

미니프로젝트

목록 보기

3/5

청소대장 프로젝트

프로젝트 설명 : 청소가 어려운 사람들을 위해 청소 꿀팁을 공유하는 커뮤니티!

Skills

React, React-query, Redux, styled-components + AWS

API

https://www.notion.so/5-SA-91ca769e62cd4fc5831fc011c5e23b87

트러블슈팅

문제 : formdata로 이미지 업로드를 할 때 서버 쪽으로 제대로 전달이 되지만 계속해서 오류가 발생했다.
해결과정 : 오류 뜨는 404, 500 메세지에 대해 구글링도 해보고, formdata를 처음써보다보니 구글링에서 나온 여러 방식을 모두 적용해보았지만 해결되지 않았다.
해결 : 원인은 formdata로 data를 보낼 때 서버가 설정해놓은 key값과 프론트쪽의 key값이 맞지 않아서였다. 백엔드 쪽에서 API명세서를 잘 지키지 않은 문제가 컸지만, 이 덕분에 API 명세서의 중요함도 알게 되고, formdata의 전체적인 로직을 이해할 수 있게 되었다.

  const onSubmitHandler = (event) => {
    event.preventDefault();
    if (title.trim() === "" || content.trim() === "" || !file)
      return alert("📷 사진과 글을 입력해주세요!");
    const formData = new FormData();
    formData.append("title", title);
    formData.append("content", content);
    formData.append("imgUrl", file);
    mutation.mutate(formData);
    alert(`🧹 ${title} 작성 완료!`);
    console.log("작성완료");
    setTitle("");
    setContent("");
    navigate("/main");
  };