firebase를 이용한 방명록 기능 구현하기 - javascript [2단계]

2024.12.27 - [Today I Learned] - firebase를 이용한 방명록 기능 구현하기 - javascript [1단계]

firebase를 이용한 방명록 기능 구현하기 - javascript [1단계]

 

2단계 : firebase를 사용하여 기록한 데이터 남기기!

 

1단계까지 구현을 하면 새로고침 하면 기록했던 정보들이 다 날라가고 어디에도 저장할수 없게된다..

백엔드 코드가 없이 프론트 지식으로 이를 해결하기위해 파이어베이스(Firebase)를 사용해보자

 

파이어베이스란?

구글이 개발한 모바일 및 웹 애플리케이션 개발 플랫폼, 개발자들이 백엔드 인프라를 구축하거나 관리하는 복잡한 작업 없이 핵심 기능에 집중할수 있도록 해준다.

• 개발코드1 . 서버로 데이터를 전송하는 코드 (프론트에서 작성)
• 개발코드2 :  데이터를 받으면 데이터베이스에 저장하는 코드 (파이어 베이스에서 작성)

이 좋은게 사용량만 넘지 않으면 무료이다 !!

https://firebase.google.com/pricing?hl=ko

Firebase Pricing

 

어케 사용함?

1. 파이어베이스 로그인
2. 로그인 후 콘솔로 이동
3. 프로젝트 만들기
4. 준비 완료후 웹으로 선택하여 진행

 

5. 파이어베이스 코드 가져오기

 

6. 빌드 > Firestore Database > 데이터 베이스 만들기 > 위치지정  > 프로덕션 모드에서 시작

7.규칙 true로 설정하기

    : 모든 사용자가 읽고 쓸 수 있도록 허용함. false일땐 나도 안보임 ㅠㅠ

 

8. 기본 세팅 해주기

<script type="module">
// Firebase SDK 라이브러리 가져오기
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js";
import { getFirestore, collection, doc, setDoc, deleteDoc, getDocs, getDoc, addDoc, } from "https://www.gstatic.com/firebasejs/9.0.0/firebase-firestore.js";

// Firebase 구성 정보 설정
const firebaseConfig = {
	본인 설정 내용 채우기 
};

// Firebase 인스턴스 초기화
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
</script>

 

 

자 이제 파이어베이스 설정도 다했겟다 진짜 2단계를 시작해보자.

 

구현하기전 간단하게 순서를 정리해보았다.

1. 입력한 값 파이어베이스에 저장한다.
2. 폼을 입력한후 제출 하면 파이어베이스에 저장이된다.
3. 저장이 된 후에 그 값을 화면에 노출시켜준다.
4. 새로고침시/로드시에 저장된 데이터가 노출되게 한다.

1단계 : 입력한 값 파이어베이스에 저장시키기

<script>
//1. 방명록 저장하기 (firestore에 데이터 추가하기)
async function saveMsg(name, msg, pw) {
    const docRef = await addDoc(collection(db, "visit-test"), {
            name: name,
            msg: msg,
            pw: pw
        });
}
</script>

• addDoc(collection(db,"visit-test"),{...}) : " visit-test " 컬렉션에 새로운 문서를 추가하는 코드이다.
• 정보를 입력한후 제출을 하면 (당연히 submit function에 saveMsg() 불러와야함ㅋ)
• 따란 ! 이렇게 입력한 정보가 파이어베이스에 들어왔다!

 

2단계 : 저장된 데이터 불러오기

• 저장이 되었지만, 화면을 새로고침 하면 파이어베이스에는 남아있지만 화면상에는 역시 사라진다.
• 이를 위해 저장된 데이터를 불러와 화면에 표시햐아한다.

<script>
//2.데이터 불러오기 (페이지 로드시)
 async function loadMsg(){
    const getMsg = await getDocs(collection(db,"visit-test"));
    const msgList = document.getElementById("message");

    getMsg.forEach((doc)=>{
        const data = doc.data();
        const newLi = document.createElement("li");
        newLi.innerHTML = `
        <p class="name">${data.name}</p>
        <p class="message">${data.msg}</p>
        `;
        msgList.prepend(newLi);
    })
 }

 window.onload = loadMsg;
 </script>

• const getMsg = await getDocs(collection(db, "visit-test")); 
  • getDocs() : firestore에서 데이터를 가져오는 함수,
  • db데이터베이스의 visit-test 컬렉션의 모든 데이터를 가져와라.
  • 그다음 가져온 데이터들을 변수getMsg에 저장해라
• getMsg.forEach((doc) => {...})
  • 위에서 가져온 데이터를 반복문을 사용해서 하나씩 뿌려줘라.
• window.onload = loadMsg;
  • 페이지 새로고침 시에도 저장된 데이터들을 불러오게 한다.

이후 단계는 등록한 후 방명록을 삭제하고 싶을 경우, 사용자의 비밀번호를 확인하여 맞으면 삭제, 틀리다면 삭제가 되지 않도록 구현해볼거다.

 

3단계 : 데이터 삭제시키기

• innerHTML에 삭제버튼 추가
• 삭제버튼 클릭시 비밀번호 입력 받아 맞으면 삭제 / 아니면 땡
• ui상 삭제 / 데이터 삭제

<script>
//2.데이터 불러오기 (페이지 로드시)
 async function loadMsg(){
    const getMsg = await getDocs(collection(db,"visit-test"));
    const msgList = document.getElementById("message");
    msgList.innerHTML = ''; // 기존 데이터를 초기화


    getMsg.forEach((doc)=>{
        const data = doc.data();
        const newLi = document.createElement("li");
        newLi.innerHTML = `
        <p class="name">${data.name}</p>
        <p class="message">${data.msg}</p>
        <button class="delBtn">삭제</button>
        `;

        const delBtn = newLi.querySelector(".delBtn");
        delBtn.addEventListener("click", function () {
            deleteMsg(doc.id, data.pw,newLi);
        });
        msgList.prepend(newLi);
    })
 }

 window.onload = loadMsg;

 //3.삭제기능
 async function deleteMsg(docId, pw, liElement){
   const userPw = prompt("비밀번호를 입력하세요")
     if(userPw == pw){
        await deleteDoc(doc(db,"visit-test", docId))
        alert('삭제완료!')
        liElement.remove();
     }else{
        alert('땡')
     }
 }
 </script>

• msgList.innerHTML = ''"; 
  • 기존 화면에 표시된 모든 메세지를 제거해준다.
  • 제거를 안해주면 새로 데이터를 가져올때 중복이 되기때문에!
• <button class="delBtn">삭제</button> 
  • 삭제 태그를 추가시키고
  • 삭제버튼이 클릭될때 기능을 추가시켜준다
• deleteMsg(doc.id, data.pw, newLi)
  • 문서ID, 입력했던 비밀번호, 해당 메세지 항목을 deleteMsg()함수로 전달 해준다.
• deleteMsg() 함수
  • prompt를 이용해 비밀번호 입력을 받아온다.
  • 기존 등록할때 입력했던 비밀번호와 일치하면 메세지를 삭제한다 (if문)
  • deleteDoc(doc(db, "visit-test", docId)) : 파이어 베이스에서 해당 문서의ID를 삭제시킴
  • liElement.remove(); : UI상에서 제거해줌
  •  

 

이렇게 하면 파이어 베이스를 이용한 방명록 기능 구현이 완성되었다 -- !

css로 이뿌게 꾸며주기만 하면 된다 룰루~

 

하지만 ㅠㅠ

파이어베이스 한계점

파이어베이스를 사용하면 빠른 개발 속도를 얻을수 있지만 제한사항이 있다.

• 서버 제어 제한 : 직접적 컨트롤이 불가하고 파이어 베이스에서 제공하는 기능과 방식에 따라 작업을 해야한다.
• 확장성 제약 : 규모에 따른 확장성 측면에서 제한이 있다.
• 종속성 : Google의 서비스에 의존하게 된다. 외부 다른 서비스나 기능을 활용하기 어렵다.

결국에 내가 하고싶은대로 구축하기위해서는 다른 서버를 써야한다...!

(앞에서 열심히 방명록 기능을 만들었지만.. 흑흑)