필수 FireStore | 치트시트/튜토리얼
NOTE: FIRESTORE is a DATABASE as a Service(DaaS 😅), while FIREBASE is a BACKEND as a Service(BaaS)
이 블로그에서는 프로젝트에서 firebase firestore를 사용하는 방법을 배웁니다.
UI 부분[HTML/JSX, CSS 없음]으로 뛰어들지 않고 firestore를 todo-list 웹 앱의 데이터베이스로 설정할 것입니다.
설치
시작하기 전에 가장 먼저 해야 할 일은 당연히 firebase와 firestore를 설치하는 것입니다.
2가지 방법이 있습니다.
브라우저: file.html 내부에 링크로 firebase 및 firestore 추가
<head>
<script src="[https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js](https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js)"></script>
<script src="[https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.js](https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.js)"></script>
</head>
서버: npm/yarn을 통해 설치(react/node.js를 사용하는 경우)
// in the terminal
npm install firebase
// in a js file
const firebase = require("firebase");
require('firebase/auth');
require('firebase/database');
초기화
이제 firebase를 설치했으니 클라우드에 연결(초기화)해야 합니다.
이는 API 키 등을 프로젝트에 복사하여 수행됩니다.
프로젝트 설정 페이지에서 모든 구성 세부 정보를 얻을 수 있습니다.
Firebase를 초기화하려면 구성을
<script> 또는 자바스크립트 파일에 붙여넣습니다. const firebaseConfig = {
apiKey: "AIzaSyBSABaeBTG4mteo-FrDtO-8qOIAxCX6yug",
authDomain: "lucid-fireship-basics.firebaseapp.com",
projectId: "lucid-fireship-basics",
storageBucket: "lucid-fireship-basics.appspot.com",
messagingSenderId: "316115989732",
appId: "1:316115989732:web:935a8eefaca4bd9512a8f1",
measurementId: "G-1V9QBWT3MG",
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
이제 firestore의 인스턴스를 변수로 만들어 firestore와 상호 작용할 때마다 몇 번의 키 입력을 줄입니다😂.
const db = firebase.firestore();데이터베이스로 작업을 시작하기 전에 데이터 모델(데이터가 Firestore에 저장되는 방식)을 이해해야 합니다.
Firestore 데이터 모델
Firestore는 데이터를 문서 모음으로 보고 모음도 하위 모음을 저장할 수 있습니다.
"파일 탐색기"와 같이 폴더를 만들고 그 안에 문서나 폴더를 저장할 수 있습니다.
ANALOGY:
collections = folders
documents = files (eg: json)
Firestore를 사용한 CRUD 작업
이제 어떤 형태의 데이터베이스를 다룰 때마다 기본적으로 4가지 작업을 수행할 수 있습니다.
그러나 CRUD 작업을 수행하기 전에 작업할 컬렉션을 선택해야 합니다.
// to reduce a few keystokes to access the todos collection
const todos = db.collection("todos")
1. 문서 작성
저장된 문서는 JSON으로 변환되므로 객체와 같은 구조를 따라야 합니다.
NOTE: if you’ve done some python, it’s like a dictionary in python
doc = {name:"clap this article"};
todos.add(doc);
// or
db.collection("todos").add({name:"clap this article"});
2. 문서 읽기
2.1 컬렉션 내의 모든 문서를 신속하게 가져오기 위해.
db.collection("todos").get().then(snapshot=>snapshot.docs.forEach(doc=>console.log(doc.data())))
지금은 복잡해 보일 수 있지만 실제로는 정말 간단합니다.
forEach는 콘솔이 모든 문서에 저장된 데이터를 기록하는 for 루프입니다.
NOTE: => is an syntax for arrow function
2.2 특정 문서를 얻기 위해.
const docid = "sfdagerfkajilf";
db.collection("todos").doc(docid);
이제 컬렉션에 문서를 추가하면 firestore는 임의의 ID를 생성하고 이를 문서의 이름으로 사용합니다.
특정 문서를 가져오려면 id를 지정해야 합니다.
3. 문서 업데이트
문서를 업데이트하는 동안 다음을 수행할 수 있습니다.
3.1. 전체 문서 재설정
when the document has only 1 key in the document(object), it doesn't matter which one you use
db.collection("todos").doc("dagfshdjhkdfagsh").set({
task1: "follow LucidMach on medium",
task2: "share this article to everyone"
});
3.2. 문서의 일부 수정
db.collection("todos").doc("afdghrujfkhotdf").update({
task2: "follow LucidMach on twitter"
});
.update()를 사용할 때 문서의 지정된 부분만 변경하므로 지정되지 않은 부분은 변경되지 않습니다.
따라서 task1은 미디엄에서 LucidMach를 따르는 것으로 유지되므로 둘 다 수행하는 것을 잊지 마세요 😜
4. 문서 삭제
이 작업은 문서 업데이트와 매우 유사하며 문서 ID를 지정해야 합니다.
db.collection("todos").doc("afdghrujfkhotdf").delete()마지막 말
아니, 난 죽지 않아 😜, 하지만 이 대사를 읽고 있다면,
이 게시물을 읽는 시간에 감사드립니다. 이것이 필요할 때마다 치트 시트로 도움/역할을 하기를 바랍니다.
✌, 루시드마크
나와 함께 놀자
Reference
이 문제에 관하여(필수 FireStore | 치트시트/튜토리얼), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/lucidmach/the-20-firebase-that-ll-do-80-of-the-task-a-firestore-cheatsheet-304p텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
