[코드 리뷰] Firebase Storage에 이미지 업로드 & Firestore Database에서 이미지 불러오기

개발 환경
Language : JavaScript, JQuery
DB/서버 : Firebase

 

팀원들과 진행한 미니 프로젝트에서 개인을 소개하는 페이지의 개발을 맡게 되었습니다.

개인을 소개하는 페이지에는 개인이 진행한 프로젝트들을 업로드하여 소개할 수 있는 기능을 맡아 구현하게 되었습니다.

 

실행한 시연 화면

 

JavaScript와 Firebase를 이용하여 개발하는 것이 처음이어서 많은 자료를 참조하였습니다. 데이터베이스에 이미지를 원본으로 저장하기에는 이미지의 파일이 너무 크기 때문에 Firebase에서 제공해 주는 이미지를 저장하는 Firebase Storage 저장소를 사용하여 그곳에 이미지를 업로드하고 업로드한 이미지의 저장된 위치(URL)를 데이터베이스에 저장하여 이미지 데이터를 불러와야겠다고 생각하였습니다.

 

생각한 로직

이미지 파일을 선택하면 선택한 파일을 Firebase Storage에 먼저 저장시키고, 저장시킨 이미지의 URL을 불러와서 나머지 입력한 데이터들과 함께 Firestore database에 저장시켜서 저장시킨 데이터를 불러와야 겠다고 생각하였습니다.

 

구현 코드

▶ 삽입한 Firebase SDK 라이브러리

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

 

▶ Firebase 인스턴스 초기화

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

 

▶ 이미지 파일 업로드 & 업로드한 이미지 파일 URL 가져와서 DB저장

//프로젝트 포스팅 박스 클릭시
        $('#projectPostBtn').click(async function () {
            let post_image = document.getElementById('post_image').files[0];
            let image_name = post_image.name;
            
            //HTML에서 입력한 값 id로 가져오기
            let post_img = "";
            let post_password = $('#post_password').val();
            let post_title = $('#post_title').val();
            let post_comment = $('#post_comment').val();
            let post_role = $('#post_role').val();
            let post_date = $('#post_date').val();

            let storageRef = ref(storage, image_name);
            
            //이미지 파일 업로드
            await uploadBytes(storageRef, post_image).then((snapshot) => {
                console.log('uploaded!!!');
            });
            
            //업로드한 이미지 파일 URL 가져오기
            await getDownloadURL(ref(storage, image_name))
                .then((url) => {
                    post_img = url;
                })
                .catch((error) => {
                    alert("뭐가 문제?");
                });
            
            //저장해야 할것 구조화
            let doc = {
                'post_img': post_img,
                'post_password': post_password,
                'post_title': post_title,
                'post_comment': post_comment,
                'post_role': post_role,
                'post_date': post_date
            };
            
            //멤버 고유의 비밀번호와 같으면 DB에 저장
            if (member_pw == post_password) {
                await addDoc(collection(db, "members", member_id, "posting"), doc);
                alert("저장 완료 되었습니다!");
                await loadProjectCards(member_id);
                
                //저장후 input박스 비워주기
                document.getElementById("post_image").value ='';
                document.getElementById("post_password").value ='';
                document.getElementById("post_title").value ='';
                document.getElementById("post_comment").value ='';
                document.getElementById("post_role").value ='';
                document.getElementById("post_date").value ='';

            }
            else{
                alert("패스워드가 틀렸습니다!");
            }
            // 포스팅 후 카드 다시 로드
        });

 

▶ DB에 저장한 자료 들고와서 뿌려주기

async function loadProjectCards(member_id) {
            $('#projectCards').empty(); // 기존 카드 비우기
            
            //DB에서 데이터 가져오기
            let docs = await getDocs(collection(db, "members", member_id, "posting"));

            console.log('members :' + docs.data);

            //DB에서 가져온 문서를 하나씩 저장해서 뿌려주기
            docs.forEach((doc) => {
                let posting = doc.data();
                console.log('이거이거이거 : ' + posting);

                //가져온 데이터 변수에 넣어주기
                let post_img = posting['post_img'];
                let post_title = posting['post_title'];
                let post_comment = posting['post_comment'];
                let post_role = posting['post_role'];
                let post_date = posting['post_date'];

                //데이터 넣어서 뿌려줄 HTML
                let temp_html = `
                <div class="card mb-3" style="width: 700px;">
                    <div class="row g-0">
                        <div class="col-md-4">
                            <img src="${post_img}"
                                class="img-fluid rounded-start" alt="프로젝트 사진">
                        </div>
                        <div class="col-md-8">
                            <div class="card-body">
                                <h5 class="card-title">${post_title}</h5>
                                <p class="card-text">${post_comment}</p>
                                <p class="card-text"><small class="text-muted">${post_role}</small></p>
                                <p class="card-text"><small class="text-muted">${post_date}</small></p>
                            </div>
                        </div>
                    </div>
                </div>`;
                $('#projectCards').append(temp_html);
            });
        }

 

 

실행 화면

▶ 시연 화면

 

▶ Firebase Storage에 저장된 이미지

 

▶ Firestore Database에 저장된 데이터

 

 

개발 중 발생한 문제 & 문제해결 방법

Firebase SDK  라이브러리를 가져오면서 저의 개발 환경과 문제점이 있었습니다.

저는 따로 SDK 파일을 설치하지 않고 바닐라 HTML, Javascript 환경에서 개발을 하였습니다. 그래서 Firebase SDK 라이브러리를 가져오는 공식문서에 따라 처음에는 아래와 같이 SDK를 가져왔습니다.

▶ 문제가 발생한 SDK 라이브러리 참조 코드

import { getStorage, ref, uploadBytes, getDownloadURL }  from "firebase/storage";

 

※ Firebase Storage 파일업로드 공식문서

https://firebase.google.com/docs/storage/web/upload-files?hl=ko&_gl=1*eol9pb*_up*MQ..*_ga*NjYwMjQxNjY0LjE3MjE2NDU3NjE.*_ga_CW55HF8NVT*MTcyMTY0NTc2MS4xLjAuMTcyMTY0NTc2MS4wLjAuMA..

웹에서 Cloud Storage로 파일 업로드  |  Cloud Storage for Firebase

 

개발환경에서 SDK를 설치해주면 위의 공식문서의 코드 경로를 통해 SDK 라이브러리를 사용할 수 있습니다. 하지만 저같이 바닐라 HTML, Javascript환경에서 Firebase SDK를 설치하지 않는 웹 브라우저 환경의 경우에는 라이브러리를 가져오는 브라우저 모듈 경로가 따로 존재하기 때문에 다음과 같이 웹 브라우저 모듈 경로를 사용하여 SDK 라이브러리를 불러와야 합니다.

 

▶ 변경한 Firebase SDK 라이브러리/ 해결방법

// Firebase SDK 라이브러리 가져오기        
import { getStorage, ref, uploadBytes, getDownloadURL } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-storage.js";

처음에 공식문서를 통해 소스코드를 작성하였는데 소스코드에 오류가 발생하고, 저의 문법이 맞지 않는다는 오류를 통해 제가 들고 온 라이브러리 함수들이 작동하지 않는다는 것을 알게 되었습니다. 그리하여 제가 SDK 라이브러리를 잘못된 경로로 가져오고 있다는 것을 파악하였고, 제가 사용한 경로는 SDK 설치를 한 환경에서 작동한 다는 것을 알게 되었습니다.

저는 따로 SDK를 설치하지 않고 개발하기를 원했기에 웹 브라우저 환경에서 사용가능한 모듈 경로를 찾아보았고, 문제점을 해결 할 수 있게 되었습니다.