T_era
Firebase 시작하기 본문
데이터베이스의 개념
- 데이터를 저장하고 여러 사람들이 관리하는 데이터의 모음
- 데이터를 잘 찾기위해 잘 적재하는 것
- 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();
'Programing > Html' 카테고리의 다른 글
| [Firebase] CROS정책 - 1 (0) | 2025.04.08 |
|---|---|
| Firebase를 프로젝트에 적용하기 (0) | 2025.03.19 |
| fetch를 앨범사이트에 적용해보기 (0) | 2025.03.18 |
| fetch 사용해보기 (0) | 2025.03.18 |
| [JavaScript] 앨범사이트에 JQuery 적용해보기 (0) | 2025.03.18 |