240920 데이터베이스 사용해보기

추석을 보내고나니 추석 전에 데이터베이스 공부를 했던 게 기억이 안나서
다시 복습해보았다.

데이터베이스

데이터베이스는 말 그대로 "데이터 저장공간"이다.
데이터 베이스에는 관계형 데이터베이스(SQL)와 비관계형 데이터베이스(NoSQL)가 있다.
관계형 데이터베이스는 고정된 정리 규칙이 있어 금융이나 보안 쪽에서 많이 사용하고 비관계형 데이터베이스는 복잡하고 유연한 정보를 다룰 수 있어 스타트업 같은 곳에서 사용하기 쉽다고 한다.

Firebase 데이터베이스 사용하기 - 준비

나는 구글의 Firebase의 데이터베이스를 사용하는 법을 배웠다.
우선 구글 계정에 로그인에서 프로젝트를 생성하고 Firestore Database에 들어간다.
규칙에 들어가서 allow read, write: if false;를 true로 바꿔준다.

그리고 데이터베이스를 이용할 프로젝트(코드)의 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);

Firebase 구성 정보 설정에는 Firebase의 프로젝트설정에 있는 구성코드를 넣어주면 된다.

Firebase 데이터베이스 - 버튼

Script에 type="module"을 넣어주면 onclick 함수가 먹히지 않기 때문에 이를 동적으로 바꾸어주어야한다. Htmㅣ에 id값을 주고 script에 다음과 같은 함수를 넣어주면 된다.

$("#id").click(async function () {

})

Firebase 데이터베이스 - 데이터 입력하기

그렇다면 어떤 버튼을 눌렀을 때 입력한 데이터값이 저장되게 하는 버튼은 어떻게 만들어주어야할까? 위의 버튼 코드의 안에 다음을 넣어주면 된다.

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

doc로 설정해준 내용을 "콜렉션이름" 으로 설정한 콜렉션 안에 넣어준다는 뜻이다.

이때 alert와 새로고침을 넣어주면 더 좋다.

    alert('저장 완료!');
    window.location.reload();

Firebase 데이터베이스 - 데이터 불러오기

데이터를 입력한다면 데이터를 불러오기도 해야한다.
데이터를 데이터베이스에서 읽는 코드는 다음과 같다.

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

위와 마찬가지로 "콜렉션이름"이라는 이름의 콜렉션에 있는 데이터를 가져온다는 뜻이다. 이 코드를 사용하면 콘솔에 데이터를 찍어낸다는 뜻이므로 사이트의 <검사>에서 확인할 수 있고, 나중에 데이터를 붙일 곳에 따라 저 코드를 다른 코드로 대체해주면 된다.

*다만,   script에 type="module"을 넣었을 경우에는 가장 마지막에 script를 불러오게 되므로 따로

$(document).ready(function () {});

같은 함수에 넣어줄 필요가 없다.