- Firebase ( 링크 : https://firebase.google.com/?hl=ko )
- 구글이 개발한 모바일 및 웹 애플리케이션 개발을 위한 플랫폼
→ 개발자들이 백엔드 인프라를 구축하거나 관리하는 복잡한 작업 없이 핵심 기능에 집중할 수 있도록 도와주는 서비스
- 즉, 웹 서버를 대신 만들어 주는 서비스
- 백엔드 코드 한 줄 없어도 프론트 지식만 알아도 웹 서비스 출시 가능!
- 데이터베이스
- 데이터를 저장하고 여러 사람들이 관리하는 데이터의 모음
→ 즉, 데이터베이스는 데이터를 잘 찾기 위해 존재하는 것
- 데이터베이스 종류
- 관계형 데이터베이스(SQL) : 정리된 정보를 다룰 때 사용
ex. 은행, 대기업
- 비관계형 데이터베이스(NoSQL) : 복잡하거나 유연한 정보를 다룰 때 사용
ex. 스타트업
- Firestore
- 구글의 클라우드 기반 NoSQL 데이터베이스
- 컬랙션 : 일종의 데이터를 모아 놓은 꾸러미
- 문서 : Key, Value로 구성된 데이터 하나
- 정리하기
- 프론트엔드 : HTML, CSS, Javascript
- 백엔드 : Firebase
- Database : Firestore
- Firestore 시작하기
- 콘솔로 이동
→ 프로젝트 추가
→ 규칙에서 "allow read, write: if true:" 로 변경
// 이 데이터베이스에서 읽고, 쓰는 것을 허락한다는 의미
/*
우리가 작성한 코드의 부분을 로 변경하고
아래 코드를 <script type="module">의 최상단에 붙이기
script type을 module로 바꾸게 되면 onclick으로 호출하는 행위가 불가능하다.
→ onclick 대신 id값을 이용해서 클릭하면 함수를 실행하는 방식으로 변경해야 함
*/
// Firebase SDK 라이브러리 가져오기
import { initializeApp } from "<a href=https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js>https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js</a>";
import { getFirestore } from "<a href=https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js>https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js</a>";
import { collection, addDoc } from "<a href=https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js>https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js</a>";
import { getDocs } from "<a href=https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js>https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js</a>";
// Firebase 구성 정보 설정
// : Firestore - 프로젝스 설정 - SDK 설정 및 구성 - 구성 - 코드 복사 - 붙여넣기
const firebaseConfig = {
// 복사한 코드 : 개인마다 다름
};
// Firebase 인스턴스 초기화
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
- Firestore Database에 데이터 넣기
→ 어떤 id를 가진 태그를 클릭하면 아래 코드를 실행해라 라는 의미
// Firestore Database에 데이터 추가하는 코드
$("#id").click(async function () {
// 사용할 데이터 처리
// 넣고싶은 데이터
let doc = { };
// "콘렉션 이름"이라는 콜렉션에 데이터 doc 저장
await addDoc(collection(db, "콜렉션이름"), doc);
})
ex.
$("#id").click(async function () {
// 사용할 데이터
let image = $('#image').val();
let title = $('#title').val();
let date = $('#date').val();
let content = $('#content').val();
// 넣고싶은 데이터
let doc = {
'image': image,
'title': title,
'date': date,
'content': content,
};
// "콘렉션 이름"이라는 콜렉션에 데이터 doc 저장
await addDoc(collection(db, "콜렉션이름"), doc);
})
- 데이터를 Firestore Database에 넣은 후 새로고침하는 방법
window.location.reload();
- Firestore Database에 데이터 가져오기
// Firestore Database에서 데이터 불러오는 코드
let docs = await getDocs(collection(db, "콜렉션이름"));
docs.forEach((doc) => {
// row : 딕셔너리 형태로 값이 저장되어 있음
let row = doc.data();
console.log(row);
});
ex.
let docs = await getDocs(collection(db, "albums"));
docs.forEach((doc) => {
let row = doc.data();
let image = row['image']
let title = row['title']
let content = row['content']
let date = row['date']
let temp_html = `
<div class="col">
<div class="card h-100">
<img src="${image}"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">${content}</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">${date}</small>
</div>
</div>
</div>`;
$('#cards').append(temp_html);
});
- 전부 로딩 된 다음에 수행하라 : ready()
script type='module' 에서는 전부 로딩이 된 다음
<script>내용이 실행이 되어서
전부 로딩이 된 다음 수행하라는 코드인 $(document).ready(function (){}) 코드는
굳이 사용할 필요가 없다.
→ JQuery에서 ready()를 사용할 때 사용한 코드는
<style type="module"> 안에 그대로 작성해서 사용하면 된다.
- 정리하기
- Firebase 세팅하는 코드를 script에 추가하고 script의 type을 module로 설정하기
- Firestore에서 데이터를 저장하고 불러오는 코드를 통해서 데이터 관리
- script의 type이 module일 경우에는 script가 가장 마지막에 실행이 되고, onclick같은 속성이 사용 불가능해진다.
→ click할 때 수행 작업을 동적으로 코드를 만들어 줘야 한다.