우선, Node.js Express로 Firebase Firestore DB와 연동하기 + CRUD 와 유사한 부분이 많으니 보다가 이해가 안된다면 참고하면 좋을 것 같고, Firebase 프로젝트 생성 등에서 어려움을 겪는다면, 본문 하단 Reference 부분의 유튜브 영상을 참고하여 따라하면 좋을 것 같다.
1. Firebase 프로젝트 생성
생성해주고..
2. Firebase Web App 추가
Firebase 프로젝트에서 웹 앱 추가.
SDK 정보를 다른 곳에 저장해놓자. 아래에서 이용함.
이미 창을 닫았더라도 프로젝트 설정 > 일반 > 내 앱 > SDK 설정 및 구성 에서 확인 가능하다.
3. React 프로젝트에서 Firebase SDK 설치
$ npm install firebase
로 react 프로젝트에 Firebase SDK를 설치.
- dotenv로 firebase sdk 정보(apiKey 등)를 관리하는 방법이 있고,
- 그대로 복붙하여 사용하는 방법이 있으나,
이 글에서는 dotenv 를 이용하도록 함.
(토이프로젝트, 테스트용 앱이 아닌 이상은 보안, 정보 관리 면에서 dotenv를 사용하는 편이 좋다.)
$ npm install dotenv
dotenv 라이브러리를 설치.
src 폴더(source 폴더) 내에 .env 파일을 생성해주자.
# firebase database config - SDK
REACT_APP_APIKEY=#####
REACT_APP_AUTH_DOMAIN=#####
REACT_APP_DATABASE_URL=#####
REACT_APP_PROJECT_ID=#####
REACT_APP_STORAGE_BUCKET=#####
REACT_APP_MESSAGIN_ID=#####
REACT_APP_APP_ID=#####
REACT_APP_MEASUREMENT_ID=#####
apiKey: "dDgk35Dnkfhk23qMffm3Y" 라면
REACT_APP_APIKEY=dDgk35Dnkfhk23qMffm3Y 처럼 작성해주면 된다.
SDK 정보는 앞에서 말했듯 프로젝트 설정 > 일반 > 내 앱 > SDK 설정 및 구성 에서 확인 가능.
github 등에 public repository로 업로드할 예정이라면
.env파일을.gitignore에 추가를 권장.
4. Firebase Firestore와 연결
그 후 src폴더 에 firebase-config.js 파일 생성.
Firebase와 연동시키는 부분이다.
import { initializeApp } from "firebase/app";
import "firebase/compat/firestore";
import firebase from "firebase/compat/app";
const firebaseConfig = {
apiKey: process.env.REACT_APP_APIKEY,
authDomain: process.env.REACT_APP_AUTHDOMAIN,
databaseURL: process.env.REACT_APP_DATABASE_URL,
projectId: process.env.REACT_APP_PROJECT_ID,
storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_MESSAGIN_ID,
appId: process.env.REACT_APP_APP_ID,
measurementId: process.env.REACT_APP_MEASUREMENT_ID,
};
firebase.initializeApp(firebaseConfig);
const firestore = firebase.firestore();
export { firestore };
마지막 줄의 export { firestore }; 로 Firestore을 export하고,
이제 다른 파일에서 import하여 사용할 수 있게 되었다.
이제 테스트해보기 위해
코드를 작성할 다른 파일(App.js 등) 에서 import하여 콘솔에 찍어보자!
import { firestore } from "./firebase-config.js";
를 위쪽에 추가해주고 (경로는 알맞게 수정 바람)
console.log(firestore);
로 찍어보면.. 콘솔에 뿅 튀어나온다.
5. CRUD
CRUD는 Firebase 공식 문서 에서 웹 버전 9(Modular) 의 예시 코드만 살펴봐도 어렵지 않게 구현할 수 있으니 생략.
다른 언어/프레임워크로 CRUD 하는 것과 크게 다르지는 않다.
Node.js로 Firebase Firestore에 CRUD 이 글이 참고가 될 듯.
Read 할 때의 예시를 한 번 써보자면..
FunctionName = async (couponCode) => {
const docRef = doc(db, "CollectionName", "DocumentName");
const docSnap = await getDoc(docRef);
if (docSnap.exists()) {
const data = docSnap.data();
console.log("Document data:", data);
else {
console.log("No such document!");
return false;
}
};
이런 느낌으로?
필드 데이터에 접근하는건 data[FieldName] 같이 접근하면 됩니당
한 가지 유의할 점은 아래와 같이 뭔가 이제 메소드를 사용하려 할 때 하나하나 import를 해줘야 된다는 것..
근데 사용할 때 ide가 자동으로 import 추가해주는 것 같다. 안 되면 손수 추가해 주세요 ^ㅁ^
import {
collection,
query,
where,
doc,
getDoc,
getDocs,
setDoc,
updateDoc,
} from "firebase/firestore";