[사전캠프 4주차] Firebase

구글이 만든 백엔드(Firebase)를 이제 사용할 예정.

 

Firebase? 구글이 개발한 모바일 및 웹 애플리케이션 개발 플랫폼. 구글의 클라우드 기반 NoSQL 데이터베이스.

(개발자들이 백엔드 인프라를 구축하거나 관리하는 복잡한 작업 없이 핵심 기능에 집중할 수 있도록 도와줌.)

 

- 웹서버를 대신 만들어주는 서비스

- 서버 개발 없이 제작 가능(serverless)

- 프론트 지식만으로 웹서비스 출시 가능.

 

 

데이터 베이스

 

1) 관계형 데이터베이스(SQL): 정히된 정보를 다룰 떄 사용 (은행, 대기업)

2) 비관계형 데이터베이스(NoSQL): 복잡하거나 유연한 정보를 다룰 때 사용 (스타트업)

 

(데이터 베이스는 indexing을 하기 떄문에 데이터가 정렬되어 더 쉽게 특정 정보를 빠르게 찾아낼 수 있음. )

 

Firestore? 데이터베이스 서비스로, 데이터 저장/관리할 수 있는 기능 제공. (like 창고)

• 컬렉션(Collection): 서랍장 그룹. 여러 개의 문서들이 특정한 주제 또는 유형으로 그룹화되어 있음. 예
• 문서(Document): 서랍장 안에 들어있는 작은 종이. 하나의 종이는 여러 개의 필드(Field)로 구성됨. 필드는 종이에 저장된 데이터를 나타냄.
• 필드(Field): 문서 안에 있는 데이터의 작은 부분. 각 필드는 값으로 구성됨.

---

<Firebase 이용>

1. 웹, ios, 안드로이드 중 하나 선택

2. firestore database 선택

3. 사용자 설정(프로덕션 모드, 저장 위치(서울))

4. Cloud Firestore 규칙 들어가서 'allow read write: if true;'로 바꿔주기.

5. 설정(톱니바퀴): 프로젝트 설정 들어가서 구성 클릭하면, 코드 보임.

6. 우선 script 태그 안에 module 추가하고 firebase 세팅 코드 넣어주기...

 

 

참고: firebase 세팅 코드

// 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);

 

- Firebase의 SDK(Software Development Kit)를 JavaScript 모듈 방식으로 가져오는 코드

 

• initializeApp: Firebase 앱을 초기화하는 함수. firebaseConfig 설정 값을 사용하여 Firebase 프로젝트에 연결.
• getFirestore: Firestore 데이터베이스에 접근할 수 있게 하는 함수.
• collection: Firestore 데이터베이스의 특정 컬렉션에 접근하거나 새로운 컬렉션을 참조할 때 사용하는 함수.
• addDoc: Firestore에 새로운 문서를 추가하는 함수.
• getDocs: Firestore에서 문서를 가져오는 함수.

- Firebase 인스턴스 초기화

 

• initializeApp(firebaseConfig): firebaseConfig에 정의된 설정을 사용하여 Firebase 애플리케이션을 초기화. 이 초기화 작업을 통해 Firebase SDK를 앱에서 사용할 수 있게됨.
• getFirestore(app): 초기화된 Firebase 앱(app)을 사용하여 Firestore 데이터베이스 인스턴스를 가져옴. db는 이후 Firestore 데이터베이스에서 데이터를 읽고 쓰는 데 사용됨.

 

 

 

 

 

7. 마지막으로 설정>구성 에서 가져온 코드를 `firebaseConfig`내용에 붙여넣기

 

 

이런 식으로...

<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 구성 정보 설정
      // For Firebase JS SDK v7.20.0 and later, measurementId is optional
      const firebaseConfig = {
        apiKey: "AIzaSyB9jh0zgHzqoS-eiOcO8BPvZeHygTHW4xM",
        authDomain: "sparta-fd7f5.firebaseapp.com",
        projectId: "sparta-fd7f5",
        storageBucket: "sparta-fd7f5.appspot.com",
        messagingSenderId: "798171376752",
        appId: "1:798171376752:web:b10623b0383077ad5a98b5",
        measurementId: "G-B7B850Z9F2",
      };

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

- Firebase 구성 정보 설정

firebaseConfig는 Firebase 프로젝트에 연결하기 위한 설정 정보. 각각의 필드가 Firebase 서비스와의 연동에 필요.

• apiKey: Firebase 프로젝트와의 인증에 사용되는 API 키. 이 값으로 애플리케이션이 Firebase에 접근가능.
• authDomain: Firebase 인증을 위한 도메인 이름.
• projectId: Firebase 프로젝트의 고유 ID.
• storageBucket: Firebase Storage에 저장할 파일을 관리할 수 있는 URL.
• messagingSenderId: Firebase Cloud Messaging에서 메시지를 보내는 데 사용하는 ID.
• appId: Firebase 애플리케이션의 고유 ID.
• measurementId: Firebase에서 Google Analytics를 사용할 때 필요한 ID(선택적).

---

 

- type="module"? ES6(ECMAScript 2015) 이후 도입된 기능으로, JavaScript 코드를 파일 단위로 나누어 독립적으로 작성하고 가져다 쓸 수 있게 하는 시스템

(밖에서 onclick으로 부르는 함수들이 잘 실행 안됨.)

 

• 모듈화: 파일 간에 명확하게 분리된 코드 작성이 가능하며, import 및 export 구문을 사용해 모듈 간 데이터를 주고받기 가능.
• 지연 실행(Defer by default): type="module"로 작성된 스크립트는 기본적으로 페이지가 모두 로드된 후 됨. 이 점은 defer 속성을 추가하는 것과 유사.
• 엄격 모드: 모듈 스크립트는 자동으로 strict mode에서 실행. 이로 인해 더 안전한 코드를 작성가능.
• 스코프 독립성: 모듈 스크립트는 전역 스코프와 독립적으로 실행되기 때문에, 모듈 내부에서 정의한 변수나 함수가 전역 공간을 오염시키지 않음.

---

 

 

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

• async function():  이 익명 함수는 비동기 함수. 비동기 함수는 async 키워드를 사용해 선언되며, 함수 내에서 await을 사용해 비동기 작업의 완료를 기다릴 수 있음.
• let doc = {};
  • 빈 객체(doc) 생성: 이 부분에서는 Firestore에 저장할 데이터를 담을 빈 객체 doc을 선언. 여기서는 빈 객체이지만, 실제로는 Firestore에 저장할 데이터를 이 객체에 추가할 수 있음.
• await addDoc(collection(db, "콜렉션이름"), doc);
  • addDoc(): Firestore 데이터베이스에 새 문서를 추가하는 비동기 함수.이 함수는 Promise를 반환하므로 await 키워드를 사용해 함수가 완료될 때까지 기다림.
  • collection(db, "콜렉션이름"): Firestore 데이터베이스 내에서 특정 컬렉션(테이블과 유사한 개념)을 참조. "콜렉션이름"은 데이터가 저장될 Firestore 컬렉션의 이름. 
  • doc: 위에서 정의한 객체로, Firestore에 저장될 실제 데이터. 

      $("#postingbtn").click(async function () {
        let image = $("#image").val();
        let content = $("#content").val();
        let title = $("#title").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();
      });

 

데이터를 가져오는 작업을 할 때는 getDocs 사용!

await: async 함수 안에만 사용할 수 있음. Promise를 반환하는 함수 앞에 await을 붙이면, 해당 Promise 상태가 바뀔 때까지 코드가 기다림. 즉, Promise가 성공 상태 또는 실패 상태로 바뀌기 전까지는 다음 연산 시작하지 않음.

 

 let docs = await getDocs(collection(db, "albums"));
      docs.forEach((doc) => {
        let row = doc.data();

        let image = row["image"]; //값을 가져오는 메소드
        // alert(image); //매개변수 내용을 포함한 작은 팝업창을 띄움(함수가 동작하는지 확인하기 위해 사용함)
        let content = row["content"]; //값을 가져오는 메소드
        let title = row["title"]; //값을 가져오는 메소드
        let date = row["date"]; //값을 가져오는 메소드

        let temp_html = `        <div class="card">
                <img
                  class="card-img-top"
                  src="${image}"
                  alt="Card image cap"
                />
                <div class="card-body">
                  <h5 class="card-title">${title}</h5>
                  <p class="card-text">${content}</p>
                  <p class="card-text">
                    <small class="text-muted">${date}</small>
                  </p>
                </div>
              </div>`; //내용입력하고 '기록하기' 버튼 클릭 시, 해당 코드(temp_html)를 추가하기 위함.
        // temp_html은 문자열이지만, 안에 값을 넣고 싶으면 ${값} 사용.

        $("#card").append(temp_html); //card 아이디 갖은 요소 뒤에 temp_html 붙여줌.
      });

 

 

이제 사용자가 입력한 값을 백엔드에 저장하고, 그 데이터를 불러올 수 있다!!