[TIL] 231226(화) 웹개발 종합반 4주차 / Firebase

웹개발 종합반 4주차

1. 프론트엔드 v.s. 백엔드

• 프론트엔드 (Frontend) : 우리 눈에 보이는 영역을 개발 / 웹 화면
  ▶️ HTML, CSS, Javascript

• 백엔드 (BackEnd): 눈에 보이지 않는 영역 개발 / 데이터 저장 및 관리, 서버 관리
  ▶️ 한 가지 언어에 집중 : 파이썬(python), Ruby, PHP, Java

2. Firebase

🔥 Firebase 란?
: 구글(Google)이 개발한 모바일 및 웹 애플리케이션 개발 플랫폼
개발자들이 백엔드 인프라를 구축하거나 관리하는 복잡한 작업 없이 핵심 기능에 집중할 수 있도록 도와주는 역할을 한다.
▶️ 쉽게 말하자면, 웹 서비스를 대신 만들어 주는 서비스!

• 장점👍 : 클라우드 환경에서 개발자들을 도와주는 도구들이 많이 발달되고 있어 필요한 것들을 잘 갖다 사용하면 유용함.
• 단점👎 : 자유도 떨어질 수 있음.

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

3. Database(데이터베이스) 란?

: 데이터를 저장하고 관리하는 곳.

🤔 그럼 왜 저장함??
많은 양의 데이터를 효율적으로 저장하기 위하여.. 잘 찾기 위해서 DB 존재함.

• SQL : 틀이 이미 짜여져 있고, 사람의 실수가 나면 안 되는 곳. / 대기업 은행
• NoSQL(=Not only SQL) : 앞으로 바꿀 정보가 많은 곳. / 스타트업

4. Firestore Database 설정하기

: 구글의 클라우드 기반 NoSQL 데이터베이스 (like 커다란 창구)

▶️ Firebase > 빌드 > Firestore Database
: DB를 저장하는 공간

① Firestore초기 설정하기 > 좌측 상단 설정 > 프로젝트 설정 > 구성
: 내 firestore 이므로 앞으로 계속 복붙 가능

② type="module" 설정

<script type="modele">

: module 설정하고 나면, script가 젤 마지막에 굴러간다.

• onclick 버튼 비활성
  💁🏻‍♀️ click을 동적으로 만든다 = 코드로 click을 직접 달아준다.

③ 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";


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


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

5. addDoc / getDocs

① addDoc
: firestore에 data 저장하기

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

id 값을 가진 걸 click 하면 > collection 안에 data들이 저장돼라.

✅ firebase를 이용하여 <script type="module">인 경우,

• onclick button 비활성화 → onclick del → id="id name" 생성

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

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

• addDoc : 기록하기 버튼을 누르면 let을 통해 불러온 데이터가 albums 라는 collection에 저장되어라!
• alert : 그 다음 저장 완료! 라는 알림을 띄워라!
• window.location.reload(); : 새로고침 해라!

② getDocs
: firestore에 저장된 data를 불러오기

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

▶️ console 창을 보면 내가 addDocs 한 data가 row로 정렬된 것을 볼 수 있다.

<script type="module">
        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);
        });
    </script>코드를 입력하세요

▶️ 원래 작성해놓은 card 만들기 코드를 실행시키면, 저장된 데이터가 불러오기 되어 화면에 카드가 생성된다.

✅ Firebase 데이터가 입력된 순서대로 정렬되지 않는 이유는?
: firebase에 저장할 때, 데이터에 빠르게 접근하기 위해 임의로 정렬하는 경우가 있다고 한다.
순차적으로 정렬하고 싶다면... (아래 링크 참고)
https://firebase.google.com/docs/firestore/query-data/order-limit-data?hl=ko

하루를 마치며...🤔

• 오늘 배운 내용 📖

1. firebase를 사용하기 위한 세팅 진행
   : firebase는 구글에서 웹 서비스를 대신 만들어주는 서비스. / firestore database : data 저장 가능한 공간
2. firestore에 data 저장(addDoc)
   : postbox에 입력한 데이터를 변수에 담고, 변수 값들을 collection('albums')에 추가
3. data 불러오기 (getDocs)
   : 가져온 데이터를 변수에 담고, 카드 형식에 값을 넣어서 카드 생성

• ❓🙄❓
  아직 내가 postbox에 입력한 데이터 순서대로 firebase에서 불러와지지 않는 것에 대해 밝혀내지 못했다... 내일 한 번 더 고민해보고 모르겠으면 질문하기!

한줄 회고😎

드디어 데이터를 저장하고 불러오는 방법을 배우고, 또 github에 업로드함으로서 웹 페이지 링크가 생겼다. 앞으로 더 많은 기능들 차근차근 잘 쌓아 나가보도록 하자!