파이어베이스 파이어스토어 데이터 가져오기 - 웹 javascript 코드 제공

파이어베이스 파이어스토어 데이터 가져오기 - 웹 javascript 코드 제공

 

 

이 글에서는 파이어베이스 파이어스토어로 데이터 가져오는 작업하면서 알게 된 파이어스토어에 있는 데이터 가져오는 코드를 소개하겠습니다.

 

파이어베이스 파이어스토어

 

데이터베이스 선택: Cloud Firestore 또는 실시간 데이터베이스  |  Firebase Realtime Database

 

파이어베이스에서 제공하는 파이어스토어는 구글의 클라우드 기반 NoSQL 데이터베이스로 실시간 데이터 동기화를 지원하며, 클라이언트에서 엑세스할 수 있는 2가지 클라우드 기반 데이터베이스 솔루션을 제공합니다. 

 

파이어스토어 데이터 가져오기

 

데이터를 가져오기 위해서는 파이어베이스에서 프로젝트 생성 후 파이어스토어 등록을 해야 하는데 이 과정은 생략하고, 바로 웹 기반으로 파이어스토어를 가져오기 위한 javascript 코드를 소개하겠습니다.

 

 

1. 파이어스토어 환경 세팅

Cloud Firestore 시작하기  |  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 라이브러리 가져오는 import 우선 진행하고, firebaseConfig 안에 파이어베이스 프로젝트에서 제공받은 본인 인증 내용을 넣어 인스턴스 초기화까지 하는 것을 볼 수 있습니다.

 

여기까지 작업하면 파이어스토어 가져오기 작업을 위한 세팅 과정이 마무리 됩니다.

 

 

2. 파이어스토어 데이터 가져오기

Cloud Firestore로 데이터 가져오기  |  Firebase

 

파이어스토어에 저장된 데이터 가져오는 과정은 다음과 같습니다.

 

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

        });

 

데이터 가져오는 함수는 getDocs로 바로 위 초기 세팅에 선언한 db 안, albums라는 컬렉션 안에 있는 데이터를 가져오는 과정의 코드입니다.

 

 

3. 코드 작성시 유의해야할 점

위의 파이어스토어 코드 작성시 위 코드는 자바스크립트 이므로 <script></script> 안에 넣어야 하는데 반드시 script 태그에 type = module 을 꼭 넣어야 합니다. 

 

 

4. 전체 코드

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


//firestore 데이터 가져오기
let docs = await getDocs(collection(db, "albums"));
        docs.forEach((doc) => {
        
        	console.log(doc.data());

        });


</script>

 

끝으로

 

위 코드와 설명을 통해 파이어스토어 데이터 가져오기에 대해 많은 도움 되시길 바랍니다.

 

▼ 참고할 만한 글 ▼

 

VScode(Visual Studio Code) 코드 정렬 최신 단축키 + 유용한 단축키

 

부트스트랩 쉽게 사용하는 방법 - 웹사이트 제작 필수 프로그램

 

인생사진 쏙쏙 코딩네컷 | 스파르타코딩클럽 무료특강