TIL 2024-09-09 (Web - 4주차 Firebase)

1. Firebase

• firebase란?
  • 구글이 개발한 모바일 및 웹 애플리케이션 개발 플랫폼
  • 백엔드 인프라를 구축하거나 관리하는 복잡한 작업 없이 핵심 기능에 집중할 수 있도록 도와줌
  • 웹 서버를 대신 만들어 주는 서비스
  • 서버 개발 없이 제작 가능
  • 백엔드 코드 없이 프론트지식(HTML, CSS, JS)만 알아도 웹 서비스 출시 가능

 

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

---

 

 

2. 데이터 베이스 개념.

• 데이터 베이스란?
  • 데이터를 저장하고 여러 사람들이 관리하는 데이터의 모음
  • 데이터를 잘 찾기 위해 존재하는 것
• 데이터 베이스 종류. ( 크게 2가지 )

 

여기서 NoSQL은 Not only SQL 이라는 뜻.

 

---

 

3. Firestore

• firestore 란?
  • 구글의 클라우드 기반 NoSQL 데이터베이스.

 

Firestore을 사용하기 위해선 세팅 코드를 넣어줘야한다.

 

기존에 작성했던 '나만의 추억 앨범 만들기'. 프로젝트를 수정하며 알아보자.

 

<script type="module">
        // Firebase SDK 라이브러리 가져오기
        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 } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

        // For Firebase JS SDK v7.20.0 and later, measurementId is optional
        const firebaseConfig = {
            apiKey: "AIzaSyCz-aTF0iQvQilKJyrTHQxg1T2X_13trtw",
            authDomain: "sparta-49ce5.firebaseapp.com",
            projectId: "sparta-49ce5",
            storageBucket: "sparta-49ce5.appspot.com",
            messagingSenderId: "819019173056",
            appId: "1:819019173056:web:e47a0781c0b38268923125",
            measurementId: "G-0NFWX91DD1"
        };

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

</script>

 

script type = "module"로 해주어야 하는데 

module로 변경할 시 기존에 사용하던 onclick들이 작동을 안한다.

이 부분도 다시 작동되도록 수정할 것 이다.

 

---

 

4. Firestore Datebase에 데이터 넣기

기록하기 버튼을 누르면 firestore에 데이터가 들어가게 만들자.

 

$("#id").click(async function () {
    let doc = {};
    await addDoc(collection(db, "콜렉션이름"), doc);
})

 

이게 기본 뼈대 코드이다.

 

우리가 수정할 부분은 id, 콜렉션 이름 2개 밖에 없다.

 

일단 기록하기 버튼이 있는 코드를 찾은 뒤 onclick이 아닌 새로운 id를 준다.

 

<div class="mybtn">
       <button id="postingbtn" type="button" class="btn btn-dark">기록하기</button>
       <button type="button" class="btn btn-outline-dark">닫기</button>
</div>

 

id = "postingbtn" 으로 주겠다. 그리고 콜렉션 이름은 albums로 수정해주겠다.

 

$("#postingbtn").click(async function () {
    let doc = {};
    await addDoc(collection(db, "albums"), doc);
})

 

이렇게 수정하면 이제 기록하기 버튼이 눌릴 것이다.

여기다가 간단하게 기록하기 버튼을 누르면 저장완료와 새로고침 되도록 추가하면,

 

$("#postingbtn").click(async function () {
    let doc = {};
    await addDoc(collection(db, "albums"), doc);
    alert('저장 완료!');
    window.location.reload();
})

 

두 줄을 추가하면 기록하기 버튼을 눌렀을 때 저장완료와 새로고침이 된다.

 

---

 

5. [getDocs]Firestore Datebase에 데이터 가져오기

데이터를 생성하고 카드 또한 생성하자.

 

현재 브라우저에 데이터가 뜨지 않고 firestore에 데이터가 저장되는 것만 확인되는데

우리는 브라우저에도 데이터를 가져오고 카드도 생성되게 다시 만들어보자.

 

let docs = await getDocs(collection(db, "콜렉션이름"));
docs.forEach((doc) => {
    let row = doc.data();
    console.log(row);
});

 

기본 뼈대 코드이다.

 

여기서 또 수정할 것은 콜렉션 이름 밖에 없다.

 

콜렉션 이름은 우리가 위에서 albums 로 했기에 여기도 똑같이 albums로 수정해주자.

 

수정하고 실행하면 우리가 전에 test 저장했던 데이터들이 콘솔 화면에 뜨는지 확인하면,

 

잘 뜨는 것을 확인할 수 있고,

 

이것을 이용해 우리가 저번에 실시간 데이터 가져오기에서 했던 방법을 사용하여 데이터를 가져올 것 이다.

 

$("#postingbtn").click(async function () {

            let image = $('#image').val();
            let title = $('#title').val();
            let content = $('#content').val();
            let date = $('#date').val();

            let doc = {
                'image': image,
                'title': title,
                'content': content,
                'date': date
            };
            await addDoc(collection(db, "albums"), doc);
            alert('저장 완료!');
            window.location.reload();
        })

        $("#savebtn").click(async function () {
            $('#postingbox').toggle();
        })

먼저 원래 저장하기 버튼을 위에서 처럼 onclick을 없애고 id를 주고  기존에 있던 openclose() 함수를 없애고 그 안에 내용을 그대로 가져와 복붙해서 넣어주면 정상 작동한다.

 

그 다음엔 기존에 함수들 내용은 냅두고 함수명들만 다 지워준다.(새로 만들어줄 함수들만 지운다.) 

 

우리는 row에서 데이터를 가져오는 것 이기에 let doc 와 같이 딕셔너리를 적어준다.

 

그리고 지웠던 함수 내용은 그대로 두고 조금만 수정해줄 것인데,

let docs = await getDocs(collection(db, "albums"));
        docs.forEach((doc) => {
            let row = doc.data();
            console.log(row);
            let image = row['image'];
            let title = row['title'];
            let content = row['content'];
            let date = row['date'];

            let temp_html = `
            <div class="col">
                <div class="card h-100">
                    <img src="${image}"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">${title}</h5>
                        <p class="card-text">${content}</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-body-secondary">${date}</small>
                    </div>
                </div>
            </div>`;
            $('#card').append(temp_html);
        });

 

카드 추가 생성 함수였었는데, 기존 함수명은 지우고 내용만 남겼다.

 

그리고 console.log(row) 아래 내용이 기존 코드와 다르게 수정해주어 각 변수에 값을 넣어준다.

 

이렇게 했다면 브라우저는 정상작동하고 버튼 또한 모두 작동할 것이다.

 

마지막으로 결과창을 확인하자.

 

 

내가 원하는 이미지 주소를 가져와 복사하여 넣어주고 내용을 작성하고 기록하기를 누르면 저장 완료 페이지가 뜨고 확인이 생긴다.

 

확인을 누르고 스크롤을 내려 데이터를 확인하면,

 

 

이 처럼 데이터가 저장된 것이 확인되고 기존 브라우저는 새로고침하면 저장했던 데이터가 사라졌지만 지금은 firebase를 사용하여 새로고침을 하여도 데이터가 계속 저장되어있는 모습을 확인할 수 있다.