안녕하세요, 햅뽀이입니다.

오늘은 Firebase의 데이터베이스 설정하는 방법을 함께해보려고합니다.

원래 이렇게 많은 서비스를 제공하고 있지만, 일단 저는 데이터베이스가 필요 하기 때문에 먼저 데이터베이스만 다루어 보려고합니다. 간단한 앱의 DB로는 Fireabase의 데이터베이스가 짱이라던 @anpigon 님의 말을 듣고, 설정을 실제로 해보면서 포스팅을 작성해봅니다.

---

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시간을 공부하면서 정리했네요;;

그럼 남은 주말.. 잘 보내십시오..

읽어주셔서 감사합니다!!

WHAN DEV TEAM 가즈아!!!