Firestore Database (모듈 타입 스크립트 태그, addDoc(), getDocs())

파이어스토어(Firestore)

- 구글의 클라우드 기반 NoSQL 데이터베이스

- 데이터베이스 서비스로, 데이터를 저장, 관리할 수 있는 기능 제공

 

NoSQL

- 비관계형 데이터베이스

- 관계형 데이터베이스인 SQL과 달리 저장되는 데이터들이 정형화되어 있지 않음 

- 복잡하거나 유연한 정보를 다룰 때 사용

- 스타트업에 유용 (비즈니스의 변동성)

 

 

파이어스토어 세팅 코드

<script type="module">  //type 모듈로 설정

// 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 구성 정보 설정
// 프로젝트 개요-프로젝트 설정-일반-SDK 설정 및 구성
const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
    appId: "YOUR_APP_ID"
};


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

// Firebase 인스턴스 가져오기 
const db = getFirestore(app);

 

---

 

firebase 연결 시에는 script 태그에 type="module"값이 필수일까?

정답은 firebase 9 이후 버전부터는 모듈값을 주는 것을 권장한다.

필수는 아니지만 프로그램의 성능과 최적화를 위해 모듈 방식을 사용하도록 되어 있다.

// firebase 8버전 이하 코드

<script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-firestore.js"></script>
<script>
  const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
    appId: "YOUR_APP_ID"
  };

  firebase.initializeApp(firebaseConfig);
  const db = firebase.firestore();
</script>

 

 

<script type="module">

자바스크립트에서 <script> 태그에 type="module"이라는 설정을 주면 주의할 점이 있다. (Chat GPT 도움)

1. 모듈 방식으로 자바스크립트 파일이 처리되기 때문에 반드시 ES6 모듈 규격을 따라야 하며, 경로를 상대 경로 또는 절대 경로로 정확하게 지정되어야 한다.

 

2. 자바스크립트 태그가 자동으로 비동기 방식으로 로드된다. 

DOM이 완전히 로드된 후에 스크립트가 실행되므로 <script> 태그가 HTML 문서 맨 위에 있어도 DOM과 스크립트 실행 순서에 문제가 생기지 않는다.

 

3. 모듈은 전역 공간에 영향을 미치지 않기 때문에 모듈 내 선언된 변수나 함수는 다른 스크립트에서 직접 접근할 수 없다.

따라서 다른 모듈에서 사용하도록 하려면 명시적으로 export 해줘야 한다.

 

4. Cross-Origin Resource Sharing(CORS) 정책에 따라 동일 출처에서만 로드되어야 한다.

서버가 CORS 헤더를 정확하게 설정하지 않으면 다른 도메인에서는 모듈을 가져올 수 없다. 다른 도메인에서 모듈을 로드하려면 서버 측에서 Access-Control-Allow-Origin 헤더를 설정해야 한다.

 

5. import와 export 구문을 사용하여 코드의 재사용성을 높이고, 각 파일에서 필요한 코드만 가져와서 사용할 수 있다.

하지만 비동기적으로 모듈을 로드해야 하므로 import를 사용할 때는 동기 방식의 코드 작성 시 주의해야 한다.

 

---

 

데이터 저장하기 addDoc

위와 같은 이유로 module로 설정하게 되면 기존의 이벤트 핸들러 코드를 수정해야 한다.

내가 진행하던 실습의 경우에는 클릭이라는 이벤트 핸들러가 있기 때문에, 입력 폼에 데이터를 입력하고 버튼을 눌렀을 때 입력한 데이터가 데이터베이스에 잘 저장되도록 코드를 추가해야 한다.

// 특정 id에 대해 클릭했을 때 db에 데이터를 저장하는 코드
$("#id").click(async function () {
	let doc = {};
	await addDoc(collection(db, "spartaflix"), doc);
})


// 특정 id에 대해 클릭했을 때 토글을 접거나 여는 코드
$("#id").click(async function () {
	$('#postingbox').toggle();
})

 

위의 형식을 실제 실습에 적용하면 아래와 같다.

아래 코드와 함께 버튼 태그에 기존의 함수 속성을 제거하고 id='postingbtn'을 넣어줬다.

$("#postingbtn").click(async function () {
            let image = $('#image').val();
            let title = $('#title').val();
            let comment = $('#comment').val();
            let star = $('#star').val();

            let doc = {'image':image, 'title':title, 'comment':comment, 'star':star};
            await addDoc(collection(db, "spartaflix"), doc);
        })

 

---

 

데이터 가져오기 getDocs

addDocs 함수는 인자에 collection과 데이터가 있었다면 getDocs는 collection만 넣어주고, 변수에 넣어주면 된다.

// db에 저장된 데이터 가져와서 docs에 저장
let docs = await getDocs(collection(db, "spartaflix"));


// docs에 저장된 데이터를 반복문으로 각각 화면에 출력
docs.forEach((doc) => {
            let row = doc.data();
            console.log(row);
            
            let image = row['image'];
            let title = row['title'];
            let comment = row['comment'];
            let star = row['star'];
            
            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">${star}</p>
                        <p class="card-text">${comment}</p>
                    </div>
                </div>
            </div>`;
            
            $('#card').append(temp_html);
});