Firebase storage + Firebase resize images 사용해보기

목차

• Firebase storage 다루기
• Firebase resize images 사용해보기

 

1. Firebase storage

// storage.js
import * as firebase from 'firebase/app';
import 'firebase/storage';

// 파일 전체 목록 부르기 + url 가져오기
export async function getThumbnail(dealiName) {
    const { items } = await firebase.storage().ref(`thumbnail/${dealiName}`).listAll();
    let thumbnaills = [];
    items.map((i) => {
        const { fullPath } = i;
        thumbnaills.push({
            url: firebase.storage().ref(fullPath).getDownloadURL(),
            fullPath,
        });
    })
    return thumbnaills;
}

// 파일 넣기
export function uploadFile(dealiName, file) {
    const ref = firebase.storage().ref(`thumbnail/${dealiName}/${file.name}`);
    return ref.put(file);
}
// 파일 삭제
export function deleteFile(fullPath) {
    return firebase.storage().ref(fullPath).delete();
}

// ThumbnailArea.vue
<template>
    <div class="thumbnail">
        <div class="thumbnail-list" v-for="(data, idx) in thumbnailList" :key="idx">
            <img
                class="thumbnail-list__item"
                :class="{ active_btn : data.url.i === selectThumbnail }"
                :src="data.url.i"
                alt="이미지"
                @click="clickThumbnail(data.url)"
            />
            <img class="icon" :src="deleteIcon" alt="삭제" @click="deleteThumbnail(data.fullPath)" />
        </div>

        <div class="icon_area">
            <img class="add_icon" :src="addImageIcon" alt="이미지 추가" @click="$refs.file.click()" />
        </div>
        <input type="file" ref="file" @change="fileChange" style="display:none" multiple />
    </div>
</template>

<script>
import { getThumbnail, uploadFile, deleteFile  } from "@/services/storage";
import 생략

const thumbnailsData = (props, emit) => {
    const selectThumbnail = computed(() => props.value);
    const thumbnailList = ref([]);
    const file = ref("");
    
    const getThumbnails = async () => {
        thumbnailList.value = await getThumbnail(props.dealiName);
    };

    const clickThumbnail = (data) => {
        emit("input", data.i);
    };
    const deleteThumbnail = async (fullPath) => {
        if (!confirm('삭제하시겠습니까?')) return;
        await deleteFile(fullPath);
        await getThumbnails();
    };

    const fileChange = async (e) => {
        await uploadFile(props.dealiName, e.target.files[0]);
        await getThumbnails();
    };

    return {
        selectThumbnail,
        clickThumbnail,
        addImageIcon,
        thumbnailList,
        file,
        fileChange,
        deleteIcon,
        deleteThumbnail,
        ...getThumbnails()
    };
};

 

파일 추가 - https://firebase.google.com/docs/storage/web/upload-files?hl=ko

파일이 변경이 되면 fileChange 함수가 실행돼서 uploadFile에 파일을 보냅니다.

+ 버튼을 클릭하면 파일 업로드를 할 수 있도록 트리거를 만들었습니다.

 

파일 리스트 - https://firebase.google.com/docs/storage/web/list-files?hl=ko

getThumbnails 함수 호출하면 thumbnailList 값이 채워집니다.

파일 삭제 - https://firebase.google.com/docs/storage/web/delete-files?hl=ko

해당 파일의 fullPath를 보내서 삭제해야 합니다. (그래서 리스트 만들 때 fullPath를 넣었습니다)

 

 

2. Firebase Resize Images

Firebase storage에 이미지를 저장할 때 자동으로 resize를 해준다. (다른 기능도 많음)

왼쪽 사진은 Resize를 통해서 Firebase Storage에 저장된 사진이고, 오른쪽 사진은 원본 사진입니다.

바이트 수가 적어진 걸 볼 수 있습니다. (지금은 안보이시겠지만 크기도 작아졌습니다.)

 

아래 사진은 웹에서 불러온 이미지입니다.

 

Firebase Console 들어가셔서 왼쪽 맨 하단에 Extensions가 있습니다.

아직 베타 서비스라 정식으로는 안 나와서 구석에 박혀있는데 쓸모 있는 기능 같습니다.

 

1. AWS처럼 지역 정하는 거

2. 어떤 Firebase storage에 넣을 건지 설정

3. 리사이즈 원하는 크기

4. 원본 데이터를 삭제하고 resize 할지 여부 (참일 경우 삭제)

 - 저는 원본이 필요 없고 resize 된 것만 필요해서 true

5. 경로 설정? 필요 없어 보여서 패스

6. 이미지 캐시 크기 설정

 

 

후기

Firebase resize images 기능을 몰랐을 때...

저장한 이미지 크기가 큰 줄도 모르고, Firebase storage 전송 바이트가 급격하게 커져서 24시간 정지? 먹었었다.

어우 어떻게 하지 고민했었는데... 편리한 기능 덕분에 resize도 하고, 캐시 관리도 편해졌다.

캐싱 기능도 안 되는 줄 알고 어우 데이터 엄청 먹으면 어떻게 하지 했는데 크롬 개발자 도구에 Disable cache 기능을 켜놔서.... 안됬던 거였다..... 어우.... 멍청이 ㅠ