day 10

openAPI +Fetch

• fetch의 기본 골격
  fetch("여기에 URL을 입력").then(res => res.json()).then(data => { console.log(data) })
• 클릭하면 실행 :
  onclick= ""
• 페이지가 업로드되면 자동으로 실행 :
  $(document).ready(function abc() { ~~ })

---

파이어스토어

구글 클라우드 기반 NoSQL 데이터베이스

👉 데이터 저장하기(addDocs)

스크립트에 type="module" 달아주기
: 스크립트 타입을 모듈화하면 스크립트가 제일 늦게 로딩된다
(스크립트 타입을 모듈화하면 onclick, 다큐먼트 레디 수정해야한다)

• 초기 세팅 코드 (프로젝트 설정에 나와있음!)
  // 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);

---

스크립트에 타입=모듈 하는 순간 onclick이 작동을 안하게된다(직접 클릭을 만들어줘야함) -> 기존 onclick을 지우고 id값을 만들어주자 ->

$('#id값').click(async function () {
~~
}

ex) 나만의 추억앨범 안에 있는 기록하기 버튼의
onclick역할을 클릭으로 바꿔주기

🔸before

🔸after

---

👉 데이터베이스에서 저장된 정보 가져오기(getDocs)

1. 데이터 읽기 스켈레톤 코드 준비
   let docs = await getDocs(collection(db, "콜렉션이름"));
   docs.forEach((doc) => {
   let row = doc.data();
   console.log(row);
   });

2. 나만의 추억앨범에 카드 붙여넣기
   (붙여넣을 값만 row['image'], row['title'], row['content'], row['date']로 바꿔주기)

---

오늘 수업의 결과물
데이터베이스 앨범에 짱구 저장하기!