firebase storage 데이터 저장 방법 정리

firebase에서 이미지, 오디오 영상을 저장하는 공간을 firebase storage라고 한다. 메인 저장소인 firestore는 용량이 큰 파일을 저장하지 못하기 때문에 대부분 참조를 통해 storage에 파일을 참조 링크를 firestore DB에 저장한다. 이번 포스팅에서는 firebase storage의 저장 방법에 대해서 정리해보려고 한다.

 firestore에 데이터 저장하기

firebase.initializeApp(firebaseConfig); // firebase 키값을 넣으면서 연동 및 초기화
                          
var storage = firebase.storage(); // firestore 연동 객체 

firestore에 데이터를 저장하는 과정은 간단하다. 단 코드를 구현하기 전에 먼저 firebase와 연동을 해야한다. firebase와 연동했다는 가정하에(firebaseConfig는 firebase 연결 인증키값이다) firestore 연동 객체를 만들어준다.

var storageUpRef = firebase.storage().ref(storageUrl);
 
var task = storageUpRef.put(file);

이런식으로 참조 객체를 만들어 준뒤에 ref 메소드의 매개변수로 경로를 지정해주고 이후 put 메소드를 통해 file을 업로드시켜주면 끝이다. 만약 storageUrl이 'boards/cap.png'라고 한다면 storage 안에 boards 폴더가 생성되고 그 안에 cap.png 파일이 업로드 된다.

task.on('state_changed',
function(snapshot){                                    
console.log('업로드 진행중');  // 업로드 진행시 호출
},
 function(error){
                             // 업로드 중간에 에러 발생시 호출
 },    
 function(){                // 업로드 완료시 
      console.log('업로드 완료');    
      var storageRef = storage.ref();
 
       storageRef.child(storageUrl).getDownloadURL().then(function(url) {   // 저장된 파일의 http url 주소 받아오기
            console.log('url은 이겁니다 : ',url);
       }).catch(function(error) {
                                       
       });
   }
)

task.on 메소드를 통해 업로드 진행시 함수를 호출할 수 있다. firestore에 저장시 자동으로 http를 통해 접근할 수 있는 url 주소가 생성되는데 getDownloadUrl을 통해 받아올 수 있습니다.