Firestore에 데이터 쓰기
<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";
// Firebase 구성 정보 설정
const firebaseConfig = {
// 생략
};
// Firebase 인스턴스 초기화
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
$("#id값").click(async function () {
let image = $('#image').val();
let title = $('#title').val();
let date = $('#date').val();
// 저장할 데이터 내용
let doc = {
'image': image,
'title': title,
'date': date
};
// 설정한 collection명에 데이터 쓰기
await addDoc(collection(db, "collection명"), doc);
// 저장 완료 알림창
alert('저장 완료');
// 화면 새로고침
window.location.reload();
})Firestore에서 데이터 읽기 및 보여주기
// 설정한 collection명에서 데이터 읽기
let docs = await getDocs(collection(db, "collection명"));
// 읽어들인 데이터 화면에 뿌리기
docs.forEach((doc) => {
let row = doc.data();
let image = row['image']
let title = row['title']
let date = row['date']
let temp_html = `
<div class="col">
<div class="card h-100">
<img src="${image}"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${title}</h5>
</div>
<div class="card-footer">
<small class="text-body-secondary">${date}</small>
</div>
</div>
</div>`;
$('#cards').append(temp_html);
});
</script>
<body>
<div id="cards">
</div>
</body>💥주의할 점
Firestore를 사용하기 위해 <script type="module">로 설정하게 되면 버튼 태그에 설정한 클릭 이벤트 onclick()="함수명"가 작동하지 않음
그렇기 때문에 버튼 태그에서 onclick()을 설정하는 것이 아닌 Jquery에서 해당 버튼에 이벤트 설정이 필요
<!-- Firestore 설정 전 -->
<head>
<script>
function openclose() {
$('#inputbox').toggle();
}
</script>
</head>
<body>
<div>
<button onclick="openclose()">열고 닫기</button>
</div>
<div id="inputbox">
<input type="text" placeholder="텍스트 입력창">
<label for="floatingInput">텍스트 입력창</label>
</div>
</body>
<!-- Firestore 설정 후 -->
<head>
<script type="module">
$("#openclosebtn").click(async function () {
$('#inputbox').toggle();
})
</script>
</head>
<body>
<div>
<button id="openclosebtn">열고 닫기</button>
</div>
<div id="inputbox">
<input type="text" placeholder="텍스트 입력창">
<label for="floatingInput">텍스트 입력창</label>
</div>
</body>