최종 프로젝트 - 잔잔한 트러블슈팅

오늘 하루 트러블슈팅

01. use client와 async/await 중첩사용

발생한 문제 💥

저녁에 PR 후 브라우저 실행을 시켰는데 개발자도구에 이런 에러가 나타났다.

pull 받은 팀원의 코드를 살펴보았더니 아래와 같았다.

"use client";

import Link from "next/link";

export default async function Home() {
  return (
    <div className="flex flex-col">
      <h1>Home 입니다...</h1>
      <Link href={"/login"}>로그인 페이지로 이동</Link>
      <Link href={"/RecipeAll"}>전체 레시피 화면으로 이동</Link>
    </div>
  );
}

"use client" 사용하면 async 는 사용할 수 없지요-!

구성 요소를 분리하고 async await를 사용하거나 해야하는데 현재 코드에서는 비동기 작업 할 것도 없어서 async 삭제해서 해결-!

자동완성, 코드 복붙 할 때 신경써서 하기! 🫡

02. 사진 업로드 구현 시 발생한 문제

Input not instance of File 오류 💥

const profileSchema = z.object({
  profileImage: z
    .any() // ✅  z.any()를 사용하여 이 문제를 해결
    .refine((file) => file instanceof File && file.size <= 5 * 1024 * 1024, { message: "5MB 이하의 파일만 가능합니다." })
    .refine((file) => ["image/jpeg", "image/png", "image/gif"].includes(file.type), {
      message: "JPEG, PNG, GIF 이미지 파일만 가능합니다.",
    }),
});



return (
    <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col items-center">
      <input
        type="file"
        accept="image/*"
        {...register("profileImage")}
        onChange={(e) => {
          const file = e.target.files?.[0];
          if (file) {
            setValue("profileImage", file); // 선택한 파일을 Form 데이터에 설정
          }
        }}
      />
      {errors.profileImage && <p className="text-red-500 text-sm mt-1">{errors.profileImage.message}</p>}

      <button type="submit" className="mt-3 p-2 bg-blue-500 text-white rounded-sm">
        이미지 수정
      </button>
    </form>
  );

errors 객체가 포함된 FieldError 타입과 ReactNode 타입 간에 불일치가 발생했을 때 생기는 문제 💥

• errors.profileImage.message는 string이나 다른 타입(FieldError, Merge<FieldError, FieldErrorsImpl<any>>, undefined 등)일 수 있으며, 이 모든 타입이 ReactNode에 할당될 수 없기 때문에 발생하는 문제이다.

zod 스키마를 z.any()로 설정 ✅

• .any 부여: z.instanceof(File)는 File 객체가 정확히 설정되지 않은 경우 에러가 발생할 수 있기 때문에 .any로 해결하였다.

  
  

03. 이미지 변경 후 즉시 반영되지 않는 문제

문제의 코드 💥

 const handleImageUpload = (newImageUrl: string) => {
    setUserData((prev) => (prev ? { ...prev, user_img: newImageUrl } : null));
  };

마이페이지에서 이미지를 수정하면 바로 바뀌지 않고 시간이 지나고 난 뒤에야 반영이 되었다.

supabase storage에 반영도 되는데 바뀌지 않는게 캐싱 문제 같아서 캐싱 데이터를 지우니까 그제야 반영되었다.

수정한 코드 ✅

const handleImageUpload = (newImageUrl: string) => {
 setUserData((prev) =>
   prev ? { ...prev, user_img: `${newImageUrl}?timestamp=${new Date().getTime()}` } : null
 );
};