기존 코드의 문제점 : 각 부가서비스 컴포넌트에서 이미지 업로드 및 URL 저장 코드가 반복되어 있었습니다.
uploadImagesAndUpdateFirestore함수 도입 : 중복 코드를 제거하기 위해 이미지 업로드와 URL 저장을 담당하는 함수를 만들었습니다. 이 함수는 이미지 압축 및 저장, Firestore 문서 업데이트를 처리합니다.
// uploadUtils.js
import { updateDoc } from 'firebase/firestore';
import { ref, uploadBytes, getDownloadURL } from 'firebase/storage';
import imageCompression from 'browser-image-compression';
import { message } from 'antd';
export const uploadImagesAndUpdateFirestore = async (
uploadedImages,
BlockId,
docRef,
storage,
storageLocation,
) => {
const imageUrls = [];
// 이미지 업로드 및 URL 저장
for (const imageFile of uploadedImages) {
if (typeof imageFile === 'string') {
imageUrls.push(imageFile);
} else {
// 이미지 압축
const compressedFile = await compressedImage(imageFile);
if (compressedFile) {
const imageRef = ref(
storage,
`${storageLocation}/${BlockId}/${imageFile.name}`,
);
await uploadBytes(imageRef, compressedFile);
const imageUrl = await getDownloadURL(imageRef);
imageUrls.push(imageUrl);
}
}
}
// 이미지 URL들을 Firestore 문서에 업데이트
await updateDoc(docRef, {
images: imageUrls,
});
};
// 이미지 압축 설정 옵션
const options = {
maxSizeMB: 2,
maxWidthOrHeight: 1000,
useWebWorker: true,
};
// 이미지 압축 함수
const compressedImage = async (imageFile) => {
try {
const compressedFile = await imageCompression(imageFile, options);
return compressedFile;
} catch (error) {
message.error('이미지 압축 실패', error);
return null;
}
};
코드 리팩토링 적용 : 각 부가서비스 컴포넌트에서는 이제 'uploadImagesAndUpdateFirestore 함수'를 import하여 이미지 업로드 및 URL 저장 작업을 단순화하고 재사용성을 높였습니다.
// 각 부가서비스 컴포넌트에서 사용 예시
await uploadImagesAndUpdateFirestore(
uploadedImages,
blockId,
docRef,
storage,
'bannerImages',
);
이를 통해 이미지 관련 작업을 중앙화하고 코드의 재사용성을 향상시켰으며, 이미지 압축을 통해 데이터 및 대역폭 비용을 절감할 것으로 기대합니다.
'React' 카테고리의 다른 글
| 디버깅을 통한 버그 해결 경험 (2) | 2023.09.22 |
|---|---|
| 데이터 관리: Firebase vs Supabase 비교 (2) | 2023.09.22 |
| Lodash의 Deboucing 활용 - 버튼 중복 클릭 방지 (2) | 2023.09.18 |
| React) 불변성이란? (4) | 2023.06.14 |