이미지 파일

프로젝트 마지막날 크리티컬한 이슈가 났다.

그 이슈는 DB에 저장되어있는 마켓리스트는 잘뜨는데 상품등록한 아이템들은 디테일페이지를 들어갈때 부터 오류가 나는것이다,,

중간에 DB구조를 교체했는데 거기서부터 났던 오류...

function SellerUploadProduct() {
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm({
    defaultValues: {
      mainImages: '',
      name: '',
      content: '',
      price: '',
      quantity: '',
      shippingFees: '',
      type: 'new',
    },
  });
  const axios = useCustomAxios();
  const openModal = useModalStore((state) => state.openModal);
  const navigate = useNavigate();

  const onSubmit = async (formData) => {
    try {
      if (formData.mainImages.length > 0) {
        // 프로필 이미지를 추가한 경우
        const imageFormData = new FormData();
        imageFormData.append('attach', formData.mainImages[0]);

        const fileRes = await axios('/files', {
          method: 'post',
          headers: {
            // 파일 업로드시 필요한 설정
            'Content-Type': 'multipart/form-data',
          },
          data: imageFormData,
        });
        console.log(fileRes);
        // 서버로부터 응답받은 이미지 이름을  정보에 포함
        formData.mainImages = fileRes.data.item;
      } else {
        // mainImages 속성을 제거
        delete formData.mainImages;
      }
      const res = await axios.post('seller/products', formData);
      console.log(res);
      openModal({
        content: `${res.data.item.name}상품이 등록되었습니다. <br /> 상품 목록을 확인하시겠습니까? :)`,
        callbackButton: {
          확인: () => {
            navigate('/seller/mypage', { state: { from: '/' } });
          },
          취소: () => {
            reset();
          },
        },
      });
    } catch (err) {
      console.log(err);
    }
  };

처음 상품을 등록할때는 이미지 한개만 보내고 디테일이미지와 컨텐츠를 신경쓰지 않았는데 작업을 진행하다보니 필수로 되어버렸고 결국 DB부분을 수정하였다.

하지만...결국 그 DB수정으로 인해서 마켓과 등록이 오류가 났고 대대적인 수정작업이 시작되었다..

첫번째 : DB구조 자체가 너무 뒤죽박죽으로 되어있어서 보낼때 형식을 맞춰주지않으면 등록시 오류가 났고

const onSubmit = async (formData) => {
    try {
      // console.log('res ', res);
      console.log('formData ', formData);

      console.log('@@@@', typeof formData);
      const { i1, i2, i3, d1, d2, d3, ...rest } = formData;

      const reqBody = {
        mainImages: [
          {
            name: i1[0].name,
            path: '',
            url: 'https://api.frontendschool.shop/api/files/' + i1[0].name,
          },
        ],
        detailImages: [
          {
            name: i2[0].name,
            path: '',
            url: 'https://api.frontendschool.shop/api/files/' + i2[0].name,
          },
          {
            name: i3[0].name,
            path: '',
            url: 'https://api.frontendschool.shop/api/files/' + i2[0].name,
          },
        ],
        content: [`${d1}`, `${d2}`, `${d3}`],
        ...rest,
      };

      console.log(reqBody);
      const res = await axios.post('seller/products', reqBody);
      openModal({
        content: `${res.data.item.name}상품이 등록되었습니다. <br /> 상품 목록을 확인하시겠습니까? :)`,
        callbackButton: {
          확인: () => {
            navigate('/seller/mypage', { state: { from: '/' } });
          },
          취소: '',
        },
      });
    } catch (err) {
      console.log(err);
    }
  };

두번째 : 파일 DB를 우리 DB에 맞게 보내야하기 때문에 강사님의 파일API에는 안보내지는 오류 발생,,, 그 결과 컨텐츠 내용만 보여지고 이미지는 파일 API에 저장되지않음..

멘토님께 이 사항을 여쭤본 내용은 파일 즉 이미지를 보내는 영역은 불가침 영역이라 함부로 바꿀수 없는 곳 이라고 말씀해주심,,,

• 폼이 너무 분산되어있음
• 구조를 마음대로 만들어버림
• 내가 넣어버린 구조를 팀내에서는 모름 현업에서 이런 상황이 발생하면 들어가야하는 데이터에 제대로된 데이터가 안들어갈수있음

플젝을 하면서 많이 느끼지만 잘모르는 코드는 이해부터 시작한 뒤 작업을 들어가야한다고 생각함 애매하게 알다간 나중에 분명 오류가 생기니까...

!! 문제가 생겼을때 바로 바로 해결하는 습관 들이기 !!
!! 마음대로 생각해서 안일하게 넘어가지 않고 확실하게 문제 확인하기 !!