안녕하세요, 햅뽀이입니다.
오늘은 Firebase의 데이터베이스 설정하는 방법을 함께해보려고합니다.
원래 이렇게 많은 서비스를 제공하고 있지만, 일단 저는 데이터베이스가 필요 하기 때문에 먼저 데이터베이스만 다루어 보려고합니다. 간단한 앱의 DB로는 Fireabase의 데이터베이스가 짱이라던 
1. Firebase 접속 및 프로젝트생성
- 이미 하나 추가를 한 상태에서 캡쳐를 했네요.
- 현재개발중인 Steem Tools의 사용자별 설정을 DB로 저장해놓고 어느 크롬에서도 불러올 수 있도록 개발할 예정입니다.
- steem-extension 으로 프로젝트명을 설정하였습니다.
2. Firebase Console
- Firebase 콘솔화면입니다.
- 개발도구 뿐만아니라 품질/분석/성장에 대한 부분까지 종합적으로 서비스를 합니다.
3. 데이터 베이스 설명
- 데이터베이스는 Realtime Database / Cloud Firestore로 구분됩니다.
- 차이점 설명 를 참고하시면 차이점을 아실 수 있을 듯 합니다.
- 두가지 DB 모두 No-SQL 기반입니다.
- 그 외에 많은 비교설명이 있는데, 대체로 Cloud Firestore가 진보된 DB라고 설명하고 있습니다.
- 그래서!! Cloud Firestore로 진행해봅니다..!! 최신을 써봐야죠!!
4. Web에 Firebase 설정
- 현재 개발중인 Chrome Extension은 웹기반이기 때문에 웹으로 설정합니다.
- 웹 이외의 언어는 링크를 참조하시면 됩니다.
<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase-firestore.js"></script>
// Cloud Firestore 인스턴스를 초기화합니다.
firebase.initializeApp({
apiKey: '### FIREBASE API KEY ###',
authDomain: '### FIREBASE AUTH DOMAIN ###',
projectId: '### CLOUD FIRESTORE PROJECT ID ###'
});
// Initialize Cloud Firestore through Firebase
var db = firebase.firestore();
5. Firebase Database 사용법(쓰기)
- Cloud Firestore는 컬렉션에 저장되는 문서에 데이터를 저장합니다. 문서에 데이터를 처음 추가할 때 Cloud Firestore에서 암시적으로 컬렉션과 문서를 만듭니다. 컬렉션이나 문서를 명시적으로 만들 필요가 없습니다.
db.collection("users").add({
first: "Ada",
last: "Lovelace",
born: 1815
})
.then(function(docRef) {
console.log("Document written with ID: ", docRef.id);
})
.catch(function(error) {
console.error("Error adding document: ", error);
});
6. Firebase Database 사용법(읽기)
- Cloud Firestore에 추가한 데이터를 빠르게 확인하려면 Firebase 콘솔의 데이터 뷰어를 사용하면 됩니다.
db.collection("users").get().then((querySnapshot) => {
querySnapshot.forEach((doc) => {
console.log(`${doc.id} => ${doc.data()}`);
});
});
7. 저장된 데이터 확인
- 아래와 같이 데이터가 저장되었습니다. DB 설계를 하지 않아도 일단 그냥 들어가고 봅니다.(테스트를 여러번해서 동일 데이터가 여러번 들어갔습니다.)
- 추후 Update/Delete 기능도 확인해볼 예정입니다.
생각보다 정리하면서 실행해보려니 오래 걸리네요. 아직 파악해볼 기능이 많은데, 오늘은 여기까지 해야 하겠습니다. 4시간을 공부하면서 정리했네요;;
그럼 남은 주말.. 잘 보내십시오..
읽어주셔서 감사합니다!!