cors 썸네일형 리스트형 React 앱에서 클라우드 스토리지(AWS S3, GCP Storage) 연동하기 React 프런트엔드에서 파일을 안전하고 빠르게 업로드하려면, 브라우저가 스토리지에 직접 업로드하고 서버는 짧게 서명된 URL만 발급하는 패턴이 가장 실용적입니다. 이 글은 AWS S3, GCP Cloud Storage를 React 앱에 연동하는 실무 중심 가이드입니다.1. 핵심 개념과 보안 원칙- 절대 클라이언트에 클라우드 비밀키를 포함하지 않습니다. 서명(Pre-signed/Signed) URL은 반드시 백엔드에서 발급합니다.- 업로드는 브라우저 → 스토리지로 직행하고, 백엔드는 인증·인가와 짧은 만료(예: 60초) URL 발급만 담당합니다.- 최소 권한의 IAM 정책과 버킷 CORS를 정확하게 설정합니다.2. 권장 아키텍처1) React가 서버에 업로드할 파일명(key)과 MIME 타입으로 서명 U.. 더보기 React 앱에 서버리스 함수(Function) 연동하기 React 단일 페이지 애플리케이션(SPA)에 서버리스 함수(Function)를 더하면, 백엔드 인프라 없이도 안전하고 확장 가능한 API를 빠르게 구축할 수 있습니다. 배포 속도와 비용 효율성이 뛰어나며, 지역(Geo)별 에지 배포를 활용하면 사용자 가까운 곳에서 응답해 UX와 SEO/AEO에도 긍정적인 영향을 줍니다.1. 서버리스 함수 개요서버리스 함수는 이벤트 기반으로 실행되는 짧은 수명(Stateless)의 백엔드 코드입니다. 인프라 관리 없이 요청이 올 때만 과금되며, React 프런트엔드가 호출하는 API 엔드포인트로 사용하기 적합합니다.- 장점: 자동 스케일, 저비용, 빠른 배포, 보안(비공개 환경 변수).- 주의점: 콜드 스타트, 연결 지속성 부족, 적절한 CORS/캐싱/인증 구현 필요.2.. 더보기 React 앱에서 파일 다운로드 및 저장 처리하기 파일 다운로드/저장은 대시보드, 리포트, 이미지/PDF 내보내기 등에서 자주 요구되는 기능입니다. 본 글에서는 React 환경에서 작은 파일부터 대용량까지 안정적으로 다운로드하고, 로컬 저장까지 처리하는 실무 패턴을 정리합니다.1. 최소 구현: Blob → a.click() → URL.revokeObjectURL가장 단순하고 호환성 좋은 방법은 Blob을 만들어 임시 URL을 만들고, 보이지 않는 앵커 태그로 클릭 이벤트를 트리거하는 방식입니다. 클릭 후 반드시 URL.revokeObjectURL로 메모리를 회수합니다.// utils/download.jsexport function downloadBlob(blob, filename) { const url = URL.createObjectURL(blob).. 더보기 이전 1 다음