1일차 - 데이터베이스(fierbase) 사용하기

데이터베이스란?

데이터를 저장하고 여러 사람들이 관리하는 데이터의 모음

• 관계형 데이터베이스(SQL) : 정리딘 정보를 다룰 때 사용 ex) 은행, 대기업
• 비관계형 데이터베이스(NoSQL) : 복잡하거나 유연한 정보를 다룰 때 사용 ex) 스타트업

 

Fierbase(구글 클라우드 기반 NoSQL 데이터베이스) 사용

- 파이어스토어 세팅 코드

 

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

</script>

 

※ script의 type을 module으로 변경하게되면 click같은 코드가 작동안될 수 있다.

 

- 데이터베이스에 데이터 넣기

- 데이터 추가 스켈레톤 코드

 

- 사용 예시

1. 다음과 같은 html코드에서 각 변수에 id값을 대입
   → let 변수 = $('#id').val();
2. doc 딕셔너리를 생성하여 각 변수값을 저장
   → let doc = { key : value, ...}
3. 데이터베이스에 추가
   → await addDoc(collection(db, "컬렉션이름"), doc);
4. 새로고침
   → window.location.reload();

- 데이터베이스 데이터 가져오기

- 데이터 가져오기 스켈레톤 코드

 

- 사용 예시

 

 

오늘 학습 회고

1. 데이터 베이스 이용 시 동일한 이름의 변수가 두번 선언되었는데 문제가 없는 이유
   • image, title등은 두 번 선언되나 이 두 선언은 서로 다른 스코프 내에 있기 때문에 충돌하지 않는다.
   • 첫 번째 선언은 #postingbtn의 클릭 이벤트 핸들러 함수 내에서 이루어진다.
     이 스코프는 클릭 이벤트가 발생할 때만 유효
   • 두 번째 선언은 docs.forEach 루프 내에서 이루어진다.
     이 스코프는 각 문서(doc)에 대해 반복될 때만 유효
     JavaScript에서는 블록 스코프(let, const 키워드 사용 시)와 함수 스코프(var 키워드 사용 시)가 있다.
     여기서 let 키워드를 사용했기 때문에 블록 스코프가 적용되며, 각 변수 선언은 서로 다른 블록 내에 있으므로
     충돌하지 않는다.