Firebase를 이용하여 이미지 및 데이터 저장하기

<script type="module">

        // Firebase SDK 라이브러리
        import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
        import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
        import { collection, addDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
        import { getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
        import { getStorage, ref, uploadBytes, getDownloadURL } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-storage.js";

        // Firebase 구성 정보
        const firebaseConfig = {
            apiKey: ,
            authDomain: ,
            projectId: ,
            storageBucket: ,
            messagingSenderId: ,
            appId: 
        };

        // Firebase 인스턴스 초기화
        const app = initializeApp(firebaseConfig);
        const db = getFirestore(app);
        const storage = getStorage(app);

        $("#addBtn").click(async function () {

            // FireStorage에 저장할 이미지
            let file = document.querySelector('#image').files[0];
            let storageRef = ref(storage, 'image/' + file.name);

            try {
                // 1. 이미지 저장
                await uploadBytes(storageRef, file);

                // Firestore에 저장할 내용
                let imageUrl = await getDownloadURL(storageRef);
                let name = $('#name').val();
                let introduction = $('#introduction').val();
                let comment = $('#comment').val();
                let region = $('#region').val();

                let doc = {
                    'image': imageUrl,
                    'name': name,
                    'introduction': introduction,
                    'comment': comment,
                    'region' : region
                };

                // 2. 데이터베이스 저장
                await addDoc(collection(db, "members"), doc);

                alert("회원 추가가 완료되었습니다!");
                location.href = 'main.html';
            } catch (e) {
                console.error("Error adding document: ", e);
            }
        })

 

• Firebase에서 이미지를 저장하기 위해서는 Storage에 이미지 자체를 저장한다
• 그 후에, Storage에 저장된 이미지의 url을 getDownloadURL(storageRef);을 사용하여 추출한 후, FireStore데이터베이스에 저장하면 끝!

 

 

고민했던 점

• 처음에 팀원 추가 로직을 짤 때 먼저 1. 저장할 데이터를 추출한 후 2. 이미지 저장 3. 데이터베이스에 저장 순으로 짜 봤는데, 생각을 해보니 이미지를 먼저 Storage에 저장한 다음에 그게 성공했을 경우, 데이터베이스에 저장할 데이터를 추출하는게 훨씬 효율적인 로직이라는 생각(만약 사진 저장이 실패한 경우라면, 데이터베이스에 저장할 값들을 추출할 필요가 없기 때문에)이 들어서 수정하게 됐다!

참고로 Cloud Storage를 이용하기 위해서는 결제용 아이디를 만들고 등록해야 한다 ㅠㅠ !!