원래는 document 가 로드가 되면
로딩이 완료되고 나서 미세먼지
모듈을 적으면 스크립트가 가장 나중에 호출된다.
$(document).ready(function () {
콜렉션이름을
데이터를 넣은 이름이 albums 라서
가져올 때도 albums에 넣으면 된다.
그리고 low가 잘 찍히는 지 확인
확인하기 위해서는 console.log(data)로 확인
 |  |
|---|---|
| 콘솔 적용 코드 | 결과 창 |
카드 붙여주기
makecard 코드
이미지 값에
$('#image').val(); 이게 아니고 row의 이미지값이 들어가야 한다.
 |  |  |
|---|---|---|
| 수정 전 | 수정 후 | 결과 |
최종 사진
최종 수정 코드
<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";
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyBtM7pxJowKnZZYa9hb68-aqylVEEf-ehM",
authDomain: "sparta-76ec8.firebaseapp.com",
projectId: "sparta-76ec8",
storageBucket: "sparta-76ec8.appspot.com",
messagingSenderId: "547929462691",
appId: "1:547929462691:web:bc6a73c71b62c6b5712c16",
measurementId: "G-J7PCV9W97C"
};
// Firebase 인스턴스 초기화
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
$("#postingbtn").click(async function () {
let image = $('#image').val();
let title = $('#title').val();
let content = $('#content').val();
let date = $('#date').val();
let doc = {
'image': image,
'title': title,
'content': content,
'date': date,
};
await addDoc(collection(db, "albums"), doc);
alert('카드생성완료!');
window.location.reload(); //새로고침
})
$("#savebtn").click(async function () {
$('#postingbox').toggle();
})
let url = "http://spartacodingclub.shop/sparta_api/seoulair";
fetch(url).then(res => res.json()).then(data => {
let mise = data['RealtimeCityAir']['row'][0]['IDEX_NM']
$('#msg').text(mise)
})
let docs = await getDocs(collection(db, "albums")); //여기부터
docs.forEach((doc) => {
let row = doc.data();
let image = row['image']; //콘솔에 있는 한줄 이미지 ,그래야 카드가 붙여짐
let title = row['title'];
let content = row['content'];
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>
<p class="card-text">${content}</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">${date}</small>
</div>
</div>
</div>`;
$('#card').append(temp_html);
}); //카드 붙히는 코드
</script>
</head>
<body>
<div class="mytitle">
<h1>나만의 추억앨범</h1>
<p>현재 서울의 미세먼지 : <span id="msg">나쁨</span></p>
<button id="savebtn">추억 저장하기</button>
</div>
<div class="mypostingbox" id="postingbox">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="image" placeholder="앨범 이미지">
<label for="floatingInput">앨범 이미지 </label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="title" placeholder="앨범 제목">
<label for="floatingInput">앨범 제목 </label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="content" placeholder="앨범 내용">
<label for="floatingInput">앨범 내용 </label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="date" placeholder="앨범 날짜">
<label for="floatingInput">앨범 날짜 </label>
</div>
<div class="mybtn">
<button id="postingbtn" type="button" class="btn btn-dark">기록하기</button>
<button type="button" class="btn btn-outline-dark">닫기</button> |  |  |
|---|---|---|
| 기본 firebase 데이터 설정 | 카드 수정 코드 | id태그 수정 |
- 오전 강의 1
- 카드 붙여서 데이터에 저장하기
- 데이터를 가지고 오는 방법과 붙일 때
addDoc= 카드를 붙일 때 사용
getDocs= 카드를 가지고 올 때
