#####################################
index.html
<script>
const db = firebase.firestore(); //db값 가져오기
db.collection('product').get().then((결과)=>{
결과.forEach((doc)=>{
console.log(doc.data());
var 템플릿 = ` <div class="product">
<div class="thumbnail" style="background-image: url('${doc.data().이미지}');"></div>
<div class="flex-grow-1 p-4">
<h5 class="title">${doc.data().제목}</h5>
<p class="date">2030년 1월 8일</p>
<p class="price">${doc.data().가격}</p>
<p class="float-end">*</p>
</div>
</div>`;
$('.container').append(템플릿)
})
})
</script>
##############################
upload.html
$('#send').click(function() {
var file = document.querySelector('#image').files[0];
var firebaseRef = storage.ref();
var 저장할경로 = firebaseRef.child('image/' + file.name);
var 업로드작업 = 저장할경로.put(file);
업로드작업.on('state_changed',
null, // 업로드 중인 과정을 보여줄 수 있음 (현재는 비활성화)
(error) => { // 에러시 동작하는 함수
console.error('실패사유는', error);
},
() => { // 성공시 동작하는 함수
업로드작업.snapshot.ref.getDownloadURL().then((url) => {
console.log('업로드된 경로는', url);
var 저장할거 = {
제목: $('#title').val(),
가격: parseInt($('#price').val(), 10), // 문자열을 숫자로 변환
내용: $('#content').val(),
날짜: new Date(),
이미지: url
};
db.collection('product').add(저장할거).then((result) => { // 인터넷 오류같은 상황으로 에러 발생시 DB에 저장 성공/실패 시 코드 실행하려면
console.log(result);
window.location.href = "/index.html";
}).catch((err) => {
console.log(err);
});
});
}
);
});
</script>
storage에는 정상적으로 업로드 됐습니다ㅠㅠㅠ
