- 백엔드 없이 편하게 간단한 웹앱을 개발하기 위해 firebase를 이용하면 좋겠다는 생각에, 최근 며칠 동안 노마드 코더의 React와 Firebase로 하는 트위터 클론코딩 강의를 통해 Firebase의 기본 기능을 익혔다. 아래는 이후 내가 실제로 작성해본 코드와 내용을 간략히 정리한 것이다.
npm install --save firebase
import * as firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
var firebaseConfig = {
//... configuration
};
firebase.initializeApp(firebaseConfig); // Initialize
export const firebaseInstance = firebase;
export const authService = firebase.auth();
export const dbService = firebase.firestore();
import { authService, firebaseInstance } from '../fbase.js';
셋팅에서 export한 firebaseInstance
와 authService
를 import 해준다.
const onLoginClick = async (event) => {
const {
target: { name },
} = event;
const provider = new firebaseInstance.auth.GoogleAuthProvider();
await authService.signInWithRedirect(provider);
};
const onLogOutClick = async () => {
await authService.signOut();
};
onClick={onLoginClick}
속성을 적용하면 구글 로그인 기능 구현 끝! (로그아웃도 마찬가지) async/await
을 사용하여 로그인/로그아웃은 비동기로 진행되도록 처리했다.import { authService, dbService } from '../fbase.js';
authService
와 dbService
를 import 한다.onSubmit = async (event) => {
event.preventDefault();
await dbService.collection(authService.currentUser.uid).add({
info: this.state,
createdTime: Date.now(),
createdName: authService.currentUser.displayName,
});
onSubmit={onSubmit}
속성을 적용해주면 된다. createdTime: Date.now()
), 작성자의 이름(createdName: authService.currentUser.displayName
: 나의 경우 구글 계정에 설정된 이름)과 info(this.state
: 객체로 쓰여진 여러 정보들)다.useEffect(() => {
dbService.collection(authService.currentUser.uid).orderBy("createdTime", "desc").onSnapshot((snapshot) => {
const problemArray = snapshot.docs.map((doc) => ({
id: doc.id,
...doc.data(),
}));
setProblems(problemArray);
});
}, []);
authService.currentUser.uid
을 collection 메소드의 인자로 준다. orderBy("createdTime", "desc")
로 해당 collection의 docs들을 createdTime을 기준으로 정렬한다. 이후 onSnapshot
을 이용해 problemArray에 데이터를 모아 problem hook에 저장한다. doc.id
는 데이터 입력시 임의로 생성된 doc의 이름이다. 참고로 onSnapshot
을 이용하면 firestore에 변화가 발생하면 실시간으로 출력 결과가 업데이트된다.const onDeleteClick = async (problem) => {
const ok = window.confirm('정말 삭제하시겠습니까??');
if (ok) {
await dbService.doc(`${authService.currentUser.uid}/${problem.id}`).delete();
}
};
onClick={onDeleteClick}
속성을 주면 원하는 docs를 삭제할 수 있다. authService.currentUser.uid
이고, doc의 이름은 problem.id
로 받아왔다.async resetData() {
if (window.confirm('정말 초기화 하시겠습니까?\n입력한 모든 데이터가 삭제됩니다.')) {
await dbService
.collection(authService.currentUser.uid)
.get()
.then((res) => {
res.forEach((element) => {
element.ref.delete();
});
});
}
}
resetData
함수를 작성해서 사용하면 된다.