백엔드(Back End) 와 Firebase

프론트엔드(Front End)는 웹에서 보이는 부분 (HTML, CSS, JavaScript)

백엔드(Back End)는 눈에 보이지 않는 부분 (API, Server, DB)

 

HTML~Server 까지는 저번까지의 글에서 설명해 놨지만

DB(Data Base) 란 여러사람이 저장, 관리하는 데이터의 모음

데이터베이스는  "찾기쉽게"  잘 정리해 놓는것 그래야 사용하기 

DB를 사용하면 많은양의 정보도 쉽고 효율적으로 관리할수 있다

요즘에는 Cloud 형태로 DB를 제공해주는 서비스도 많다

 ○DB의 종류 1 : SQL (관계형 DB)

   ㄴ 이미 짜여진 틀에 정리된 DB 매우 안정적이지만 유연하지 않다

   ㄴ 주로 은행, 대기업 같은 정리된 정보와 안정적인 환경을 요구할 때

 ○ DB의 종류 2 :NoSQL (비관계형 DB)   ㄴ 틀없이 자유롭게 정리, 유연하게 정보를 입력할 수 있다   ㄴ 주로 스타트업 등 복잡하거나 유연한 정보를 사용할 때 

 

 

파이어베이스(Firebase)

 구글이 미리 만들어 놓은 백엔드 (Cloud형 NoSQL DB)

 파이어베이스를 쓰면 프론트 코드만 가지고도 웹 서비스 가능

 

 

 

●파이어베이스를 이용해 DB 사용을 연습해보자

파이어 베이스에서 프로젝트 Firestore Database 생성

스크립트의 타입율 모듈로 지정하고  (※module로 지정되면 스크립트는 가장 마지막에 로드됨)

<script type = "module">

 

파이어 스토어 세팅

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

const firebaseConfig = { 

};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

 

Firestore Database 의 설정-구성 에서 '구성 객채'를 가져와 const firebacseConfig 에 넣어준다

const firebaseConfig = {

  // '구성 객채' //

};

 

 ○ 파이어베이스에 데이터를 넣고 ( addDoc ) 알람과 함께 새로고침하기

데이터 추가 코드를 넣고

$("#id").click(async function () { let doc = {

 // 데이터 추가 양식//

};

await addDoc(collection(db, "..."), doc); {

})

알람 코드( alert ) 와 새로고침코드 ( window.location.relead() )를 넣어주기

$("#id").click(async function () { let doc = {

 // 데이터 추가 양식//

};

await addDoc(collection(db, "..."), doc); {

})

alert('알람')

window.location.reload();

})

 ○ Firestore Database 에서 데이타 가져오기 ( getDocs )

데이터 읽기 코드를 넣고

let docs = await getDocs(collection(db, "..."));
docs.forEach((doc) => {
    let row = doc.data();
    // 데이터 추가 양식//
});

파이어베이스 양식에서는 document 는 맞지 않음으로 지워주고 (document를 없애도 작동),

※ 스크립트 타입을 모듈로 적용하면 onclick 또한 정상작동 하지 않기때문에 button = "id값"을 준 후 

function onclick 코딩을

 $("#버튼id값").click(async function () {

  $("#작동id값").toggle();

})

으로 바꾸면 작동한다

 

@오늘의 TIL@

!  데이터 넣기는 addDoc , 데이버 가져오기는 getDocs

!  스크립트 타입을 모듈로 바꾸면 작동하지 않게되는 코드들이 생길 수 있으므로 수정해줄것

!  데이터베이스는 SQL/NoSQL 알맞게 사용해야 더 쉽고 효율적으로 정보를 관리 할 수 있다