T_era

Firebase 시작하기 본문

Programing/Html

Firebase 시작하기

블스뜸 2025. 3. 19. 20:28

데이터베이스의 개념
 - 데이터를 저장하고 여러 사람들이 관리하는 데이터의 모음
 - 데이터를 잘 찾기위해 잘 적재하는 것
 - index값을 통해 데이터를 찾는 과정없이 바로 가져올 수 있다
관계형 데이터베이스와 비관계형 데이터베이스
* 관계형
 - SQL, 정리된 데이터를 다룰 때 사용 ex)은행, 대기업 등
* 비관계형
 - NoSQL, 복잡하거나 유연한 정보를 다룰 때 사용 ex)스타트업 등
 
tmi - index값이 아닌 다른 값으로 찾게 될 경우 규모에 따라 프로그램이 꺼지는 현상이 발생할 수 있다. 이것을 풀스캔이 떴다 또는 DB가 죽었다고 표현

Firestore database
 - NoSQL 데이터베이스
 
*firestore 생성방법(html 기준)
1) firebase 사이트에 접속 후 console로 이동해 프로젝트 생성
2) 빌드 카테고리에서 firestore database에 들어가 생성
3) 지역 seoul로 변경
4) 규칙 항목에 들어가서 allow read, write: if false를 true로 변경
5) 사용할 프로젝트에서 <script> 태그에 type="module" 추가
6) 스크립트 태그 안에 아래코드 작성

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

7) 화면 좌측 상단에 프로젝트 개요에서 프로젝트 설정으로 이동하여 아래로 내려 SDK 설정 및 구성 항목으로 이동하고 구성을 체크하고 내용 복사
8) firebaseConfig 안에 복사한 내용 추가

* type="module"을 사용했을 때 문제
- body태그 안에 onclick을 작성해도 제대로 안되는 경우가 발생(script태그가 가장 마지막에 불리기때문)
- $(document).ready(function () {}) 코드가 로딩이 전부 된후에 실행되서 의미가 없어진다. 그래서 그냥 밖에 꺼내 사용해도 된다.

/* 
	데이터 쓰기 코드
	아이디 값에 클릭 이벤트를 준다.
	
*/
$("#id").click(async function () {
    let doc = {};
    await addDoc(collection(db, "콜렉션이름"), doc);
})
/*
	데이터 읽기 코드

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

*웹페이지 새로고침
- window.location.reload();