[TIL] 파이어베이스

데이터베이스
사용하는 이유: 잘 찾으려고

관계형 데이터베이스: MySQL
정리된 정보를 다룰 때 사용(은행, 대기업)
틀이 짜져있고 실수가 없어야 됨

비관계형 데이터베이스: NoSQL, Mongodb
복잡하거나 유연한 정보를 다룰 때 사용(스타트업)
아직 틀을 잡지 않은 곳

event.target 선택된 것

부모요소 parentElement
자식요소 children[숫자]

파이어베이스(비관계형)

1. 웹(앱) 만들고 script 사용

2. fire database 클릭

3. seoul 체크

4. 규칙 들어가서 true로 바꿈
   true로 바꾸지 않으면 에러 나와서 데이터베이스에 들어가지 않음

5. 프로젝트 설정 들어감(구성)

기본 코드
// 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);

파이어베이스

getDocs 데이터 가져오기
addDoc 데이터 추가
deleteDoc 데이터 삭제
setDoc 데이터 수정/추가 데이터 일괄
updateDoc 데이터 수정 데이터 하나 가능

// 데이터 추가 스켈레톤
$("#id").click(async function () {
let doc = {이것이};
await addDoc(collection(db, "콜렉션이름"), doc); // 콜렉션 이름에 저장이 된다
})

  // 데이터 추가 스켈레톤
  onSign_btn.addEventListener("click", async () => {
    let id = sign_id.value;
    let pw = sign_pw.value;
    let name = sign_name.value;

    let data = {
      id: id,
      pw: pw,
      name: name,
    };

    await setDoc(doc(db, "user", id), data);
    alert("가입완료");
    window.location.reload();
  });

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

댓글 삭제 기능(파이어베이스 이용)

forEach한 html에 댓글 삭제 버튼 만듦.

data-comment-id 지정하고 이것을 삭제하게 만듦
    <div class="result_msg" data-comment-id='${doc.id}'>
      <div class="resultCommentBtn">
      <button class="commentDeleteBtn">삭제</button>
      </div>
#### 댓글 삭제하는 함수 작성
 export const deleteCommet = async (event) => {
  event.preventDefault();
  const id=event.target.parentElement.parentElement.getAttribute("data-comment-id");
  //event.target 클릭한 것을 받아옴 
  const ok = window.confirm("삭제");
  if (ok) {
    try {
      await deleteDoc(doc(db, "comments", id));
      alert("삭제완료"); 
  //파이어베이스 delete함수?
  comments문서에서 id를 삭제함
      window.location.reload();
    } catch (e) {
      console.log(e);
    }
  }
};
  .commentDeleteBtn 버튼 클릭 시 함수 실행
  $(document).on("click", ".commentDeleteBtn", function (event) {
  deleteCommet(event);
});