웹페이지 좋아요 기능 (firebase realtime database)

좋아요 기능 : 좋아요 기능은 버튼이 누르면 좋아요 버튼 옆으로 숫자가 나타나며 실시간으로 누른 숫자를 확인 할 수 있게 만들어줄 겁니다.

또한 이번에 사용된 좋아요 기능은 웹사이트 상에 로그인을 하지 않은 상태로 방문을 하는 모든  사람들이 좋아요를 누를 수 있게 제작을 했으며, 누른 사람의 정보를 따로 저장하는 기능은 포함되어있지 않습니다. 

 

1. 좋아요 기능을 firebase 실시간 데이터를 가져와야하기 때문에 js 파일을 만들어서 firebase의 SDK를 Import 해주었습니다.

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,
        doc,
        count,
        getCountFromServer,
      } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
      import {
        getDatabase,
        ref,
        set,
        child,
        get,
        onValue,
      } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-database.js";

2. firebase를 사용하기 위해서 firebaseConfig를 firebase 사이트에서 설정에 들어가서 구성에서 가져와야 합니다. 밑에 있는 코드는 제가 가져온 프로젝트의 코드이며, 직접 사용하시는 코드는 firebase에서 본인의 프로젝트 설정에서 가져오셔야지 확인 가능합니다. 

(제 코드는 지워서 구성만 올려드렸습니다.)

const firebaseConfig = {
        apiKey: "",
        authDomain: "",
        databaseURL: "",
        projectId: "",
        storageBucket: "",
        messagingSenderId: "",
        appId: "",
        measurementId: "",
      };

3. firebase 인스턴스 초기화를 해줍니다.

const app = initializeApp(firebaseConfig);
const database = getDatabase(app);

4. 좋아요 기능헤서 실시간으로 데이터를 가져오기 위해서 onValue를 이용해서 가져왔습니다. (onVaue와 snapshot을 사용하지 않고 num 함수에 0을 고정적으로 넣어주면 페이지가 새로고침이 될 때마다 데이터베이스에 있는 값이 0으로 초기화가 되기 때문에 저장되어 있는 데이터를 가져와서 새로고침이 되어도 데이터가 남아있게 작업을 해주어야 합니다.)

const db = getDatabase();
      const numCount = ref(db, "like/likes");
      onValue(numCount, (snapshot) => {
        let num = snapshot.val();
        //console.log(num);

        function writedata() {
          const db = getDatabase();

          set(ref(db, "like/"), {
            likes: num + 1,
          });
          //window.location.reload();
        }

        $("#heart-btn").click(async function () {
          writedata();

          //likeNum();
        });
        $("#like-count").text(num);
      });

 

좋아요 기능을 작업을 하면서 처음에는 어떤식으로 데이터베이스에 있는 데이터를 실시간으로 가져와야하나 하는 고민으로 set(), get() 등 함수를 사용하였습니다. get() 함수를 사용하면서 데이터를 실시간으로 가져오는 것이 아닌 한번만 가져오는 것을 확인하고, 내가 원하는 기능을 만들기에는 무리가 있는 것을 확인하고 여러 방법을 찾았다. 

찾는 동안 몰랐던 부분과 firebase를 사용하는 방법등 많은 것을 알 수 있는 작업이였다.