AI 요약관련 정보

• Next.js는 기본적으로 1MB, Vercel은 4.5MB의 바디 크기 제한이 있어 대용량 파일 업로드 시 문제가 발생합니다. 💥
• React Dropzone 훅을 사용하여 HTML5 표준을 준수하는 커스텀 드래그 앤 드롭 영역을 쉽게 구축할 수 있으며, 해당 컴포넌트는 use client로 명시해야 합니다. 🏗️
• useDropzone은 isDragActive 상태와 getRootProps, getInputProps 함수를 제공하여 드롭존의 동작과 UI를 제어합니다. ⚙️
• maxFiles, maxSize, accept 옵션을 통해 파일 개수, 크기, 유형에 대한 클라이언트 측 유효성 검사를 설정할 수 있습니다. 🛡️
• onDropRejected 콜백을 활용하여 유효성 검사에 실패한 파일에 대해 '파일 개수 초과' 또는 '파일 크기 초과'와 같은 구체적인 오류 토스트 메시지를 사용자에게 제공합니다. 💬
• isDragActive 상태에 따라 드롭존의 배경색, 테두리 스타일 등을 동적으로 변경하여 시각적인 피드백과 사용자 경험을 향상시킬 수 있습니다. ✨
• Next.js 서버를 통한 파일 업로드는 서버리스 환경의 페이로드 크기 제한(Vercel 4.5MB)으로 인해 대용량 파일 처리에 부적합합니다. 🚫
• 클라이언트에서 S3로 직접 파일을 업로드하는 방식은 성능상 이점이 있지만, 사용자 인증 및 파일 유효성 검사가 어려워 보안에 취약합니다. ⚠️
• (영상 서두에 언급된) 서버에서 생성된 사전 서명된 URL을 활용한 클라이언트 측 업로드가 보안과 성능을 모두 만족하는 최적의 파일 업로드 솔루션입니다. 🔑