2023.12.01 TIL - Firebase addDoc, getDoc / Github 배포 방법

💡 4주차 2회독

• Firebase, Firestore, 데이터 넣기[addDoc] & 가져오기[getDoc]

1. Firebase 파이어베이스

• 구글 기반, 웹에서 데이터베이스 저장할수있게 해줌
• 데이터베이스: 데이터 저장, 관리하는 데이터 모음
  (관계형 데이터베이스 SQL vs 비관계형 데이터베이스 NoSQL)
  ex) 형식이 정해진 엑셀표에 값만 작성하기
  vs 엑셀 새글에 무에서 유로 표 작성하기
  
  

2. Firestore 파이어스토어

• 구글의 클라우드 기반 NoSQL 데이터베이스
• 데이터 모아두는 꾸러미
• 새 프로젝트 생성 후 프로덕션 모드로 시작 > 규칙에서 읽기 쓰기 권한 true 로 수정

2-1) 파이어스토어 세팅하기

• script태그에 type="module" 넣기
• 파이어스토어 세팅코드 script 안에 붙여넣기

// 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);

• const firebaseConfig 부분에
  firebase > 프로젝트 설정 > SDK 설정 및 구성 > 구성
  해당부분 복사하여 붙여넣기
  
  
  

3. [addDoc] Firestore Database에 데이터 넣기

💡 추억앨범의 postingbox에 입력하는 데이터를 firebase에 저장해보자!

• 데이터 추가하기 코드

$("#id").click(async function () {
    let doc = {};
    await addDoc(collection(db, "콜렉션이름"), doc);
})

• 'id값이 있는 태그를 '클릭'하면 아래의 동작을 실행해라'

• script > module로 바꾸고 나면 JQuery에서 작성했던 onclick 등이 작동이 잘 안됨 -> click 동작 가져온것

• let doc = {}; 의 { } 안에는 딕셔너리 형식으로 기입
  
  
  

4. [addDoc] '저장완료'창 띄우고, 화면 새로고침(alert, location)

• click 동작 불러온 영역 안에서 더 작성할것
• 새로고침 동작 불러오기

window.location.reload();

5. [getDocs] 저장된 데이터 가져와서 카드 붙이기

• 데이터 읽기 코드

let docs = await getDocs(collection(db, "콜렉션이름"));
docs.forEach((doc) => {
    let row = doc.data();
    console.log(row);
}); 

• ❗❗script에 module이 적용되는 순간 모든 동작은 페이지가 다 로딩된 후 작동함 -> $(document).ready(frunciton(){} 이 필요가 없어짐!!!
  
  
  
  
  

💡 5주차 2회독

• firebase 스켈레톤 코드 정리
• Github 배포

firebase 스켈레톤 코드 정리

1. firebase 세팅 - 스켈레톤 코드

// 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);

2. [addDoc] 데이터를 Firebase에 넣기

$("#id").click(async function () {
    let doc = {};
    await addDoc(collection(db, "콜렉션이름"), doc);
})

3. [getDoc] firebase에서 데이터 가져오기

let docs = await getDocs(collection(db, "콜렉션이름"));
docs.forEach((doc) => {
    let row = doc.data();
    console.log(row);
}); 

4. [location] 새로고침

window.location.reload();

5. [toggle] JQuery에서 썼던 toggle

        $("#id이름1").click(async function () {
            $('#id이름2').toggle();
        });

• 'id이름1'을 클릭하면 'id이름2'에 toggle 동작 부여함
  
  
  

6. Github 배포해보기

• Github란?
  • 인터넷에서 개발자들이 자신의 코드를 저장하고 다른 사람들과 공유하는 곳
• Github repository 만들기 -> uploading an existing file 클릭 후 html파일 업로드
• 배포 방법 : Settings > Pages > Branch - None에서 main으로 바꿔주기
  (배포할게요 라는 뜻)

=> 해당 웹페이지 배포 완료! 'visit website'로 확인

📖 참고) 작성자의 '스파르타플릭스' 페이지 배포 링크
https://innes-k.github.io/sparta_practice/

• 해당 url을 잊어버렸다면?! : Settings > Pages 상단에서 url 다시 확인 가능

• repository 삭제방법 : Setting> General> Danger Zone> Delete this repository 선택

• repository 이름 수정 방법 : Setting> General 상단에서 바로 수정 가능
  
  

7. 배포한 사이트 수정하기

• VSC에서 수정 -> 기존에 올려놓은 파일 삭제 -> VSC에서 수정한 파일 다시 업로드
• 유의사항! : 본인의 firebase 키도 함께 올려놓게 될 수 있음 주의
  
  
  

8. 파이썬 맛보기(스크래핑)

• Google Colab에서 파이썬 체험해보기
  https://colab.research.google.com
  (실행 키 Ctrl+Enter)