next.js 리뷰 CRUD - 리뷰 작성하기 (다중 이미지 파일, 텍스트 Form Data로 보내기)

어떤 글을 쓸 거냐면

다중 이미지 파일, 텍스트를 함께 Form Data에 넣어서 백엔드로 전송하는 방법을 기록하고자 한다.

데이터 상태 관리

• 보내고자 하는 텍스트와 이미지의 상태를 관리하는 로직 추가

  const [content, setContent] = useState<string>("");
  const [star, setStar] = useState<number>();
  const [images, setImages] = useState<File[]>([]);

폼데이터 생성

• 파일을 비동기로 전송하기 위해서는 폼 데이터를 생성해주어야 한다.

const formData = new FormData();

데이터 담기

• append 메서드를 이용해 데이터를 폼데이터 객체에 담아준다.

📝 텍스트 담기

• 백엔드에서 요청하는 양식에 따라 별점과 리뷰내용은 리뷰 객체에 한번 더 담아주었다.
• JSON 데이터는 content-type을 application/json 로 명시하여 전송하지만, "multipart/form-data"를 사용해서 보내야 하는 파일 데이터가 있기 때문에 JSON.stringify() 메소드를 통해 JSON 객체를 텍스트로 변환 후 new Blob() 을 통해 담아준다.

new Blob([JSON.stringify(review)], { type: "application/json" }

• review 객체를 JSON 형태로 직렬화한 후, Blob 객체로 감싸서 formData에 해당 데이터를 추가하여 서버로 전송할 수 있도록 하는 역할을 한다.

    let review = {
      star: star,
      content: content,
    };

    formData.append(
      "review",
      new Blob([JSON.stringify(review)], { type: "application/json" })
    );

📷 다중 이미지 담기

• 이미지는 한 장이 아닌 여러 장을 담아 보내므로, 타입으로 지정한 파일 객체인지 확인하고 데이터의 크기가 0 이상인지 검사한 후 이미지 배열 안에서 반복문을 순회하여 폼데이터에 담는다.

images.forEach((image) => {
      if (image instanceof File && image.size > 0) {
        formData.append("image", image);
      }
    });

백엔드로 보내기

• try catch 문을 사용하여 axios로 통신을 할 것이다. post method를 사용한다.
• 파일 전송을 하려면 헤더에서 Content-type을 multipart/form-data 로 지정해야 한다.
• 폼데이터는 바디에 담아준다.

 try {
      const response = await axios
        .post(`${백엔드 주소}/api/review`, formData, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((response) => {
          console.log(response.data, "리뷰 작성 성공!");
        });
    } catch (error) {
      console.log(error);
    }

느낀 점

• 파일 데이터를 주고 받을 때도 백엔드와 사소한 점까지 규칙을 정하고 소통해야 한다는 점을 느꼈다.
• 폼 데이터 내부의 파일 객체 이름, 데이터의 종류, 데이터의 개수 등을 잘 정하고 확인하고 소통해야 한다.
• 포스트맨으로 지속적으로 데이터의 형태를 확인하고 보내는 방법을 사용해도 좋다. 서로 당연하다고 여기는 부분이나 놓치고 있는 것들이 있을 수 있기 때문에 팀프로젝트를 할 때는 의외로 이런 부분이 중요하다!