Cloudinary
이미지와 비디오를 대규모로 관리, 변환, 최적화 및 전달할 수 있는 클라우드 기반 미디어 플랫폼.
이미지 스토리지로써 Cloudinary
cloudinary는 저장할 이미지를 받을 때 몇가지를 기대한다.
1. multipart/form-data 요청
2. formData로 감싸진 데이터
3. formData의 "file" 필드에 Blob으로 변환된 이미지 데이터
4. formData"의 upload_preset" 필드에 설정된 프리셋 값
const uploadImage = (blobImage) => {
const formData = new FormData();
formData.append("file", blobImage);
formData.append("upload_preset", CLOUDINARY_PRESET /* 미리 설정한 프리셋값 상수 */);
await axios.post(CLOUDINAEY_URL /* 업로드 URL 상수 */, formData);
};
Base64 => Cloudinary URL
Base64
이진 데이터를 텍스트로 인코딩하는 방식
Base64 URL 형식
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..." />
│ │ │ │
│ │ │ └─ Base64로 인코딩된 이미지 데이터 (iVBORw..)
│ │ └───────── 인코딩 방식 (base64)
│ └─────────────────── MIME 타입 (image/png)
└──────────────────────── Data URL 스키마
○ Base64는 캐싱이 불가능하고 인코딩, 디코딩 과정에서 CPU 과부하의 가능성이 있다.
Base64를 Cloudinary URL로 마이그레이션
1. Base64를 Blob 객체로 변환하는 함수 생성
const base64ToBlob = (src: string): Blob => {
const [meta, base64String] = src.split(",");
const mime = meta.match(/data:(.*);base64/)?.[1];
if (!mime) {
throw new Error("Invalid base64 image");
}
const binary = atob(base64String); // atob: Base64로 인코딩된 문자열을 디코딩(브라우저 내장 함수)
const len = binary.length;
const bytes = new Uint8Array(len); // Unit8Array: 8비트 부호 없는 정수 배열을 생성
for (let i = 0; i < len; i++) {
bytes[i] = binary.charCodeAt(i);
}
return new Blob([bytes], { type: mime });
};
export { base64ToBlob };
2. Blob 객체를 클라우드 호스팅으로 마이그레이션하는 함수 생성
import axios from "axios";
import { base64ToBlob } from "@/utils";
const uploadBlobImage = async (blob: Blob) => {
const CLOUDINARY_URL = import.meta.env.VITE_CLOUDINARY_URL;
const PRESET_NAME = import.meta.env.VITE_PRESET_NAME
const formData = new FormData();
formData.append("file", blob);
formData.append("upload_preset", PRESET_NAME);
const { data } = await axios.post(CLOUDINARY_URL, formData);
const uploadedUrl = data.secure_url;
return uploadedUrl;
};
export { uploadBlobImage };
Blob URL => Cloudinary URL
Blob URL
브라우저 메모리에 있는 Blob 객체 혹은 File 객체를 가리키는 임시 URL. 실제 서버주소가 아닌 브라우저 내부 객체를 참조하기 위한 URL이다.
BlobURL 형식
<img src="blob:http://localhost:5173/2d9a1f28-9611-4b96-8601-1af3054e12c6" />
│ │ │
│ │ └─ 브라우저가 생성한 고유 식별자(UUID)
│ └────────────────────── Origin (현재 페이지의 프로토콜 + 도메인 + 포트)
└─────────────────────────── Blob URL 스키마
BlobURL 을 Cloudinary URL로 마이그레이션
1. BlobURL을 Blob객체로 변환하는 함수 생성
import axios from "axios";
const blobUrlToBlob = (blobUrl: string) => {
const { data } = await axios.get(blobUrl);
const blob = data.blob();
return blob;
};
export { blobUrlToBlob };
2. Blob 객체를 클라우드 호스팅으로 마이그레이션하는 함수 생성
위 base64 섹션의 함수와 동일