feat: firebase 데이터베이스 CRUD

.gitignore

@@ -1 +1,3 @@
-node_modules/
+node_modules/
+
+env.*

dummy.json

@@ -1,38 +1,34 @@
 {
-  "gameData": [
-    {
-      "game1": {
-        "name": "kim",
-        "score": "0"
-      },
-      "game2": {
-        "name": "k22",
-        "score": "2"
-      },
-      "game3": {
-        "name": "k33",
-        "score": "3"
-      },
-      "game4": {
-        "name": "k33",
-        "score": "3"
-      }
+  "winnerData": {
+    "game1": {
+      "name": "kim",
+      "score": 10
+    },
+    "game2": {
+      "name": "lee",
+      "score": 2
+    },
+    "game3": {
+      "name": "yoon",
+      "score": 3
+    },
+    "game4": {
+      "name": "choi",
+      "score": 3
     }
-  ],
-  "userData": [
-    {
-      "kim": {
-        "game1": 1,
-        "game2": 2,
-        "game3": 3,
-        "game4": 4
-      },
-      "lee": {
-        "game1": 11,
-        "game2": 22,
-        "game3": 33,
-        "game4": 44
-      }
+  },
+  "usersData": {
+    "kim": {
+      "game1": 1,
+      "game2": 2,
+      "game3": 3,
+      "game4": 4
+    },
+    "lee": {
+      "game1": 11,
+      "game2": 22,
+      "game3": 33,
+      "game4": 44
     }
-  ]
+  }
 }

firebase/firebase.js

@@ -0,0 +1,64 @@
+import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.4.0/firebase-app.js';
+import {
+  getDatabase,
+  ref,
+  set,
+  update,
+  get,
+  remove,
+  child,
+  onChildAdded,
+} from 'https://www.gstatic.com/firebasejs/10.4.0/firebase-database.js';
+import { firebaseConfig } from '../env.js';
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+
+const db = getDatabase(app);
+const dbRef = ref(getDatabase());
+
+// update(ref(db, 'gameData'), {
+//   game55: {
+//     name: 'lpupggdate',
+//     score: '100',
+//   },
+// });
+
+// set(ref(db, 'gameData'), {
+//   game433: {
+//     name: 'yooaa',
+//     score: '121',
+//   },
+// });
+
+//database : 수정할 데이터베이스경로
+//newDatat : 수정할 데이터 내용
+export const addNewData = (database, newData) => {
+  set(ref(db, database), newData);
+  console.log('add후 : ');
+  getData('usersData');
+};
+
+export const updateData = (database, newData) => {
+  update(ref(db, database), newData);
+  console.log(' updateData 후 : ');
+  getData('winnerData');
+};
+export const deleteData = database => {
+  remove(ref(db, database));
+  console.log(' deleteData 후 : ');
+  getData('usersData');
+};
+export const getData = database => {
+  get(child(dbRef, database))
+    .then(snapshot => {
+      if (snapshot.exists()) {
+        console.log(snapshot.val());
+      } else {
+        console.log('No data available');
+      }
+    })
+    .catch(error => {
+      console.error(error);
+    });
+};

index.html

@@ -36,6 +36,11 @@
         <button type="button" class="input-button">로그인</button>
       </div>
     </main>
+    <button class="fb_test_set">새로운 user 추가</button>
+    <button class="fb_test_update">game2 위너 변경</button>
+    <button class="fb_test_delete">user lee 삭제</button>
+    <button class="fb_test_get">usersData 데이터베이스 조회</button>
+    <button class="fb_test_get_winner">winnderData 데이터베이스 조회</button>
 
     <script src="./index.js" type="module"></script>
   </body>

index.js

@@ -1,5 +1,6 @@
 import dummyData from './dummy.json' assert { type: 'json' };
 import getDataFromFireBase from './dataStore.js';
+import { addNewData, updateData, getData, deleteData } from './firebase/firebase.js'; //firebase에 데이터 추가
 
 const $input = document.querySelector('.modal');
 const $container = document.querySelector('.container');
@@ -78,4 +79,34 @@ function logout() {
   }
 }
 
+// firebase테스트
+const newWinnerData = {
+  //game2에 신기록 세운 new user data
+  // game2: {
+  name: 'doraemon',
+  score: 991,
+  // },
+};
+const newUserData = {
+  // 새로운 참여자가 생긴경우 파라미터 database에 유저명을 보내줘야함! 따로 보간법 필요
+  // 그 새로운 유저의 게임 결과
+  // 아직 안한 게임에 대해선 초기화값 0 필요
+  game1: 11,
+  game2: 22,
+  game3: 33,
+  game4: 44,
+};
+
+const $fbset = document.querySelector('.fb_test_set');
+const $fbupdate = document.querySelector('.fb_test_update');
+const $fbdelete = document.querySelector('.fb_test_delete');
+const $fbget = document.querySelector('.fb_test_get');
+const $fbget_winner = document.querySelector('.fb_test_get_winner');
+
+$fbset.addEventListener('click', () => addNewData('usersData/park', newUserData)); //유저명 임의로 park로 지정함
+$fbupdate.addEventListener('click', () => updateData('winnerData/game2', newWinnerData));
+$fbdelete.addEventListener('click', () => deleteData('usersData/lee'));
+$fbget.addEventListener('click', () => getData('usersData'));
+$fbget_winner.addEventListener('click', () => getData('winnerData'));
+
 export default globalState;