[개인프로젝트] ps market 이미지 업로드 트러블슈팅

문제 발생

이미지 업로드 폼 교체 후 state 값 최신화가 안되서 업로드가 안되는 문제 발생

상황

기존의 기본 form으로 만들어놨던 이미지 업로드 방식을  zod + react-hook-form + shadcn/ui로 form 양식을 리팩토링 진행.
-> 이후 이미지가 firebase 서버로 업로드가 되지않음. 이로 인해 게시글을 작성하면 이미지 URL을 받아오지 못해 화면에 이미지가 뜨지 않고 title, price, content만 넘어감.(string, number는 값을 넘기는데 문제가 없고 file만 안 넘어가는 상황)

생각해본 방식

// const MAX_FILE_SIZE = 1024 * 1024 * 5;
// const ACCEPTED_IMAGE_TYPES = ["image/jpeg", "image/jpg", "image/png", "image/webp"];

const formSchema = z.object({
  title: z.string(),
  price: z.coerce.number(),
  content: z.string(),
  image: z
    .any()
    // .instanceof(File, { message: 'Please upload a file.'})
    // .custom<FileList>()
    // .refine((fileList)=> fileList.length === 1, 'Expect file')
    // .transform((file) => file[0] as File)
    // .refine((files) => {
    //   return files?.size <= MAX_FILE_SIZE;
    // }, `Max image size is 5MB.`)
    // .refine(
    //   (files) => ACCEPTED_IMAGE_TYPES.includes(files?.type),
    //   "Only .jpg, .jpeg, .png and .webp formats are supported."
    // ),
});

수없이 고쳤었지만 이게 문제가 아니였다(...)

1. zod 타입을 제대로 지정을 안해줬기 때문에 발생한 문제로 인식.

• z.any()가 아니고 z.instanceof()나 z.custom() 등을 이용하고
  z.refine으로 이미지 양식이나 크기 값도 지정을 해줌.
  
  
• 또한 기존의 field를 fileRef로 바꾸고 Input의 옵션도 고쳐봄.
  - shadcn에서 render를 field로 해주기 때문에 onChange는 field.onChange로 수정.
     (스프레드값으로 받아오는 값을 fileRef로 바꿨기 때문에 필요)
  
  
• 근데 안됨ㅋㅋㅋㅋ

 

2. state가 최신화가 안되니 핸들러 함수가 잘못됐다고 인식.

• event.target.files를 console.log로 찍어보면 문제없이 파일을 인식하고 찍힌다. 하지만 그 값을 setState에 넣어줘도 state 값이 업데이트가 되지않았다. 해당 함수를 onChange로 직접 넣어보거나 따로 함수를 만들거나 따로 변수지정을 해줘도 이상하리만큼 죽어도 업데이트가 되지않았다........
• 그냥 코드 뒤집어 엎어서 지우고 다시 만들자라고 마음을 먹고 코드를 정리하자마자 원인이 파악됐는데......

 

원인

원인은 같은 컴포넌트안에서 폼이 두개가 있었던게 문제가 되었다.
같은 이미지 업로드 input 태그의 이름이 겹치고 함수도 겹쳐서 state가 업데이트가 안된걸로 판별.

• 같은 컴포넌트안에 넣어두고 비교하면서 작업하고 정상적으로 작동이 되면 기존의 코드를 삭제하려는 습관때문에 벌어진 에러.
  즉 코드정리를 즉각즉각 안해서 일어난 대참사.

원인을 몰라서 여기에만 10시간 가까이 멍청비용 녹였다........ 

 

해결

같은 컴포넌트에 이전 업로드 코드를 지우니까 바로 정상적으로 작동되며 해결.

• 폼이 하나만되고 겹치는게 없으니까 순조롭게 정상적으로 작동했다. 즉, 로직이나 데이터의 흐름은 틀린게 없었고 그냥 그냥.............하..코드정리를 잘하자.