Only plain objects, and a few built-ins, can be passed to Server Actions.

Only plain objects, and a few built-ins, can be passed to Server Actions. Classes or null prototypes are not supported.

💡상품 저장 전 서버에 이미지를 먼저 업로드 하려 했으나
일반 객체가 아닌 직렬화 할 수 없는 클래스나 null 프로토타입을 가진 객체는 서버 컴포넌트로 넘기지 못한다는 에러를 받았다.

 

해결책 FormData

클라이언트 > 서버 전송 시 데이터를 직렬화해 서버에 전달하고, 서버는 이를 역직렬화해 처리하는데 FormData는 파일과 같은 비구조적 데이터를 직접 바이너리 형태로 전송되므로 별도의 직렬화 과정이 필요하지 않습니다.

수정 전

const handleFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;

    if (!files) return;

    for (let i = 0; i < files.length; i++) {
			//file 타입 직접 넘기기
      const res = await imageUpload(files[i], 'temp');
    }
  };

수정 후

const handleFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;

    if (!files) return;

    for (let i = 0; i < files.length; i++) {
      const formData = new FormData();
      formData.append('file', files[i]);
      // 수정된 formData 넘기기
      const res = await imageUpload(formData, 'temp');
    }
  };

해결책 API Route

서버 액션은 클라이언트에서 직렬화할 수 없는 객체(File, Blob, Buffer 등)를 받을 수 없기에 API 라우트나 외부 API 사용할 수 있습니다.

const response = await fetch('/api/getImageUrl');
const { url } = await response.json();

// S3에 파일 업로드
await fetch(url, {
  method: 'PUT',
  body: file,
  headers: {
    'Content-Type': file.type,
  },
});

 

필자는 API Route 없이 Server Action과 Prisma를 사용하기에 FormData를 사용하였습니다.

 

감사합니다.