데이터 베이스 (feat. 파이어 베이스_ 파이어 스토어)

데이터 베이스란?

데이터를 저장하고, 관리하고, 꺼내사용할 수 있는 데이터의 모음.

장점 _ 정보를 빠르게 찾고, 업데이트 할 수 있다. 

        _ 많은 양의 정보를 효율적으로 관리할 수 있다. 

 

 

 

관계형(SQL)과 비관계형(NoSQL)이 있고, 비관계형은 좀더 자유롭다. 

 

파이어스토어 (Firestore) 란?

구글의 클라우드 기반 NoSQL 데이터베이스.  데이터저장소.

• 컬렉션(Collection): 서랍장 그룹. 특정한 주제 또는 유형으로 문서들이 그룹화되어 있다. 
• 문서(Document): 서랍 안에 들어있는 작은 종이. 하나의 종이는 여러 개의 필드(Field)로 구성. 
• 필드(Field): 종이 안에 있는 데이터의 작은 부분. key, value 형태.

 

파이어스토어 데이터베이스 시작해보기

빌드에서 Firestore Database를 선택해 주세요!

 

데이터베이스 만들기 눌러 주세요!

프로덕션 모드에서 시작하기 눌러 주세요!

Cloud Firestore위치는 Seoul로 설정하고, 사용 설정 눌러 주세요!

 

파이어스토어 규칙 수정하기_규칙을 눌러 false → true 변경 후, 게시 

파이어베이스 페이지에서

프로잭트_ 프로잭트 설정 _일반 _ 내앱 _ SDK 설정 및 구성 _ 구성에 체크 후 코드 복사.

 

 

파이어베이스 사용하기 위한 준비 

 

//<script type = "modul">

<script type = "modul"> 로 설정해야함.  그리고 해당 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 = {
본인 설정 내용 채우기 (프로잭트_ 프로잭트 설정 _일반 _ 내앱 _ SDK 설정 및 구성 _ 구성에 체크 후 코드 복사.)
};

// Firebase 인스턴스 초기화
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

 

 

***

<script type = 'module'> 에 대해서 

이걸 적는 순간, 해당 스크립트는 가장 나중에 호출된다. 

다 로딩되고 호출되기 때문에, $(document).ready(function(){})이 필요가 없다. 

 

또한 이벤트 리스너의 콜백함수를 호출할 때에 보통

$('#id이름 입력').click(function( ){ }) 이렇게 쓰는데, 그럼 안먹는다. 

$('#id이름 입력').click(async  function( ){ }) 이렇게 써야 먹음.

 

 

파이어베이스 를 이용해서 데이터를 저장하고 가져오기

저장하기 ->   await addDoc(collection(db, "콜렉션이름"), '저장할 데이터가 담긴 변수이름');

 

가져오기 ->   let docs = await getDocs(collection(db, "콜렉션이름"));

                    docs.forEach((doc) => {

                          let row = doc.data();

                          console.log(row);

                    });

 

 

예시)

$('#makeCard').click(async function(){

     let image = $('#image').val();

     let title = $('#title').val();

     let doc = {

          'image': image,

          'title' : title

     };

     await addDoc(collection(db, "cards"),doc);

     alert('저장완료');

     window.location.reload();

});

 

let docs = await getDocs(collection(db, "cards"));

$('#cardContainer').empty();

docs.forEach((doc) => {

     let row = doc.data();

     console.log(row);

     let temp_html = `<div class="col">

                                     <div class="card">

                                        <img src="${row.image}" class="card-img-top" alt="...">

                                     </div>

                                  </div>`

     $('#cardContainer').append(temp_html);

});