내일배움캠프 9기 자바스프링 사전캠프 웹 개발 AtoZ 4주차

Firebase

이제 데이터를 서버에 보내고 가져오는 것을 배운다.

Firebase는 구글에서 제공하는 비관계형 데이터 베이스다

 

데이터 베이스 이해하기

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

왜 저장을 할까? 잘 찾으려고

 

관계형 데이터 베이스 (SQL)

관계형은 엑셀같이 정교한 특징을 가지고 있다.

표 형식으로 저장돼 있는데 정해진 표 안에 들어가지 못하는 값은 저장하지 못한다.

정리된 정보를 다룰 때 사용한다.

 

주 사용처는 은행, 대기업

비관계형 데이터 베이스 (NoSQL)

(No는 Not only의 약자다. 그래도 편의상 노에스큐엘 이라고 부른다.)

복잡하거나 유연한 정보를 다룰 때 사용한다.

표 형식이 아니기 때문에 자유롭게 정보를 저장할 수 있다.

 

주 사용처는 스타트업 (앞으로 저장될 정보들이 계속해서 바뀔 수 있기 때문에)

 

데이터 베이스는 뭐야?

응용프로그램이다.

 

INDEX

회원 번호, 주문 번호 등의 데이터를 풀스캔 하지 않고 빠르게 가져올 수 있는 자료구조이다.

 

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

script type을 module로 바꿔주고 위의 코드를 스크립트 안에 넣는다.

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

스크립트를 모듈로 바꿔주고 나면 기존의 onclick, openclose 등이 작동을 안한다.

 

addDoc를 사용하여 서버에 정보를 저장할 것이다.

$("#id").click(async function () { // #id 를 클릭하면 함수 동작
    let doc = {}; // doc 변수에 {} 값을 넣어준다
    await addDoc(collection(db, "콜렉션이름"), doc); // '콜렉션 이름' 폴더에 'doc' 변수에 들어간 값을 저장한다.
})

 

$('#q1').val() // q1의 값
let q1 = $('#q1').val() // q1의 값을 q1이라는 변수에 저장

저장할 때는 값으로 만들어서 정확하게 저장하는게 좋다.

 

 

이제 서버에 저장된 값을 getDocs로 불러올 것이다

let docs = await getDocs(collection(db, "콜렉션이름")); // docs 변수에 데이터베이스 내의 "콜렉션이름" 에 있는 값을 불러온다.
docs.forEach((doc) => { // doc 반복문
    let row = doc.data(); // row라는 변수에 doc의 값을 불러온다
    console.log(row); // console에 row의 값을 출력한다
});