이노캠9주차 WIL

📌WIL을 적기 전 참고하기
✍️WIL이란?
이번 주 동안의 회고를 4F를 통해 기록하는 것

✍️What is 4F?
Fact : 이번주 있었던 일, 내가 한 일
Feeling : 나의 감정적인 반응, 느낌
Finding : 그 상황으로부터 내가 배운 것, 얻은 것
Future : 배운 것을 미래에 어떻게 적용할 것인가

✍️Fact: 이번주 있었던 일

• 토이프로젝트 진행함
• 상세페이지 추가, 삭제 구현함
• 댓글 CRUD 구현함
• 좋아요 애매하게 구현함...

✍️Feeling: 이번주 내 감정
죽는 줄 알았다. 토이 프로젝트는 이름만 귀엽지 아주 매서운 녀석이다. 나는 심화주차를 토욜인가 일욜에 급하게 몰아듣고 작업을 시작했는데 그때문인지 이해도가 부족해서 아주아주 많이 헤맸다. api를 쓰는게 어찌나 어렵던지... 월욜부터는 늘 새벽에 잠들었던 듯🤮🤮

✍️Finding : 그 상황으로부터 내가 배운 것, 얻은 것
api 통신과 관련하여 에러에 관해 어떤 트러블이 발생하는지 알게 되었다. 이번이 첫 프로젝트라 프론트엔드나 백엔드나 많이 헤매다보니 잘잘못이 어디서 발생했는지 파악하기가 쉽지 않았다. 그래서 몇 시간 고민하다가 도저히 안되겠으면 캠프 에이스들을 찾아가서 막 물어봐서 해결했다...! 상세페이지를 추가할 때 이미지파일까지 들어갈 수 있는 multipart/formdata 형식을 사용해서 보내야 됐는데 이때 data파일을 application/json으로 보내야 했다. 나는 일단 blob을 사용해야한다는 것도 몰라서 헤맸고, 그러고 나서는 file과 data 두가지를 동시에 보내야한다길래 formdata를 두개로 만들어 보내서 에러가 났었다... 결국 헬프를 요청해서 겨우겨우 해결했다.

    const postFormData = new FormData();

    const data = {
      title: title,
      content: content,
    };

    postFormData.append(
      "data",
      new Blob([JSON.stringify(data)], { type: "application/json" })
    );
    postFormData.append("file", file);
    /*
    multipart/form-data
    {
      data : {
        title: "title",
        content: "content"
        [[type]] = application/json
      },
      file : imageFile : File
    }
    */
    try {
      const response = await api.post(`/post/newpost`, postFormData);
      navigate(`/`); // 이동
      setTitle("");
      setContent("");
      setFile(null);

      console.log(response);
      // 요청에 대한 응답 처리
    } catch (error) {
      console.error("Error:", error);

      // 에러 처리
    }

이렇게 해결하고 나서도 사실 제대로 이해하진 못함... 그래서 다시 복습할 예정이다.

✍️Future: 배운 것들을 어떻게 적용할까 ?
이번에 토이 프로젝트를 하면서 써본 것들 중 활용할 것들은 아주 많다. 일단 crud는 다 실행해봤고, Fetch API야 말할 것도 없이 2번째 토이 프로젝트때도 활용하게 될 거같다.