(React_9기)사전캠프 3주차 - 화

오늘은 firebase를 통해 데이터베이스를 생성하고 값을 저장하고 읽는 과정을 진행해봤습니다.

 

Firestore?
구글의 클라우드 기반 NoSQL 데이터베이스입니다.

 

프로젝트 생성 후 데이터 베이스를 만들어줍니다.

 

이 때 주의해야 할 점이 있는데

 

위치를 Seoul로 설정하고

 

프로덕션 모드로 시작한 후

 

규칙을 false에서 true로 바꿔주면 됩니다!

 

이제 프로젝트에 적용해 봅시다.

일단 데이터베이스와 프로젝트를 연결해줘야겠죠?

 

script type="module" 로 변경해줍니다!.

Firebase JavaScript SDK는 ES6 모듈 형식을 사용하기 때문입니다.

// 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는 import를 이용해 기능을 사용할 수 있습니다. 

 

그럼 이제 데이터베이스에 데이터를 저장해볼까요?

$("#id").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);
})

 

firebase의 addDoc 메서드를 사용해서 데이터를 저장할 수 있습니다.

 

이제 데이터를 불러와 봅시다.

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

 

firebase의 getDocs로 album이라는 콜렉션에서 데이터를 가져옵니다.

forEach를 통해 배열을 순회해보면....

 

이렇게 데이터베이스의 값이 불러와지는 것을 확인할 수 있습니다!

 

 

전에 개인 프로젝트를 할 때는 MySQL을 사용해서 테이블 만들고 자료형 지정하고 express 이용해서 서버 열고 .... 복잡한 과정이 많았는데 Firestore를 사용하니까 key, value 값으로 데이터를 넣고 key 값으로 value 값 가져오고 너무 간단해서 좋았습니다!