파이어베이스를 왜 쓰는가?
- 프론트앤드에서 서버와 통신하는 연습을 해보고 싶을때
- 서비스를 빨리 출시하고 싶을 때
- 서버개발이 귀찮을 때
- (DB, Auth, Hosting 을 한번에 해결가능!)
- 등등
여튼 알아두면 좋다. 👍
순서
- 파이어베이스 프로젝트 만들고 앱 추가
.env파일에 firebase 앱 설정값 넣기 (루트 경로)firebase.js만들기 (firebaseApp, fireStore 등을 export) (src 경로)- 컴포넌트에서
firebase.js를 import 해서 쓰기 - firebase api 사용~!!
1. 파이어베이스 프로젝트에 앱 추가
이 단계전에 firebase project를 만들고
firestore와 authentication을 만들어 놓았다고 가정한다.
(개쉬움 그냥 클릭클릭해서 만들면 됨.)
firebase 콘솔에서 프로젝트 설정에 들어가서 앱 추가 클릭.
그러면 이게 뜨는데 웹이니까 세번째꺼 클릭
이 후 이거 진행
(근데 firebase 호스팅 설정이 여기있는걸 보니 앱마다 호스팅을 따로 할 수 있나보다.)
여기서 설정 값들을 가져올 수 있다. (나와서 콘솔에서도 config 볼 수 있음.)
2. firebase.js + .env 만들기
firebase.js는 파이어베이스 api를 쓰기위한 오브젝트를 불러오는 앤트리 파일이라고 보면 된다.
그리고 설정 값을 github에 올리면 안되기 때문에 .env 파일로 설정값을 따로 관리한다.
.env는 dotenv라는 package를 설치해야 쓸 수 있지만 create-react-app 할 때 자동으로 설치됐다.
.env (루트 경로)
REACT_APP_FB_API_KEY=""
REACT_APP_FB_AUTH_DOMAIN=""
REACT_APP_FB_PROJECT_ID=""
REACT_APP_FB_STORAGE_BUCKET=""
REACT_APP_FB_MESSAGING_SENDER_ID=""
REACT_APP_FB_API_ID=""react에서는 REACT_APP으로 시작하는 환경변수들만 인식하기 때문에 다 REACT_APP 를 붙여줘야한다.
firebase.js (src 폴더 안)
import firebase from 'firebase';
const firebaseConfig = {
apiKey: process.env.REACT_APP_FB_API_KEY,
authDomain: process.env.REACT_APP_FB_AUTH_DOMAIN,
projectId: process.env.REACT_APP_FB_PROJECT_ID,
storageBucket: process.env.REACT_APP_FB_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_FB_MESSAGING_SENDER_ID,
appId: process.env.REACT_APP_FB_API_ID
};
const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebaseApp.firestore();
export {firebase, firebaseApp, db};이때 오류가 난다면 server를 껐다가 다시 틀어보자.!
(서버가 켜져있는 상태에서 .env를 설정하면 환경변수가 제대로 안 읽히는 듯 하다.)
3. Firestore API 써보기
아까 firebaseApp에서 export한 db 오브젝트를 가지고 firestore를 제어할 수 있다.
(코드보면 알겠지만 db 는 firebaseApp.firestore() 임.)
몇 가지 Firestore API를 알아보겠다.
- Add
const addDoc = async (colId, data) => {
try {
await db.collection(colId).add(data);
console.log('add : good!');
} catch(e) {
alert('add : err!');
}
}- Get
const getDoc = async (colId, docId) => {
try {
const doc = await db.collection(colId).doc(docId).get()
if(doc.exists) {
console.log(doc.data());
} else {
console.log('해당 document 없음!');
}
console.log('get : good!');
} catch(e) {
alert('get : err!');
}
}- Update
const updateDoc = async (colId, docId, data) => {
try {
await db.collection(colId).doc(docId).update(data);
console.log('update : good!');
} catch(e) {
alert('update : err!');
}
}근데 이렇게 하면 원래 document를 완전히 덮어쓰는 것이 아니라
data에 들어있는 컬럼만 바뀐다.
document의 컬럼(필드)을 지우는 방법은 따로있다.
밑에 설명함.
- Delete - document
const deleteDoc = async (colId, docId) => {
try {
await db.collection(colId).doc(docId).delete();
console.log('delete document : good!');
} catch(e) {
alert('delete document : err!');
}
};해당 collection이나 document가 이미 없을때도 "delete document : good!" 이 뜬다.
- Delete - field
어떤 document의 field를 제거하는 코드다.
const deleteField = async (colId, docId, fieldName) => {
try {
const data = {};
data[fieldName] = firebase.firestore.FieldValue.delete();
await db.collection(colId).doc(docId).update(data)
console.log('delete field : good!')
} catch(e) {
alert('delete field : err!');
}
}4. Authentication API 써보기
회원가입, 로그인, 로그아웃 등의 Authentication 기능을 Firebase를 통해 제어할 수 있다.
우선 firebase authentication 콘솔에서 email, password를 이용한 auth를 하겠다고 설정을 해놓아야 한다. (간단함.)
- 회원가입
const signup = async (email, pw) => {
try {
const userCred = await firebaseApp.auth().createUserWithEmailAndPassword(email, pw);
console.log('userCred : ', userCred);
console.log('user : ', userCred.user);
console.log(userCred.user === firebaseApp.auth().currentUser); // True
} catch(e) {
alert(e.message);
}
};- 로그인
const login = async (email, pw) => {
try {
const userCred = await firebaseApp.auth().signInWithEmailAndPassword(email, pw);
console.log('userCred : ', userCred);
console.log('user : ', userCred.user);
console.log(userCred.user === firebaseApp.auth().currentUser); // True
} catch(e) {
alert(e.message);
}
};3번째 console.log는 True가 나온다.
user 오브젝트의 api를 알고싶으면 User 공식문서 를 보자!!
user.toJSON() 을 찍어봐도 좀 알 수 있을 듯.
보통 user.uid 값을 통해 로그인 상태를 관리한다.
