구글에서 제공해주는 플랫폼 서비스로 간단한 조작으로 인증인가, 데이터베이스,스토리지 등등 여러 기능을 사용 할수 있는 서비스의 이름이다. 당연 서버나 도메인을 구입할 필요없이 구글서버를 사용하면 된다.
거기다 나 같은 초짜 개발자도 이해하기 쉬운 친절하게 정리 되어 있는 document 까지 간단하게 사용 해봤지만 굉장히 많은걸 할수 있으며 장점이 많은 서비스라 느꼈다.
앞선 소개에서 firebase 는 다양한 서비스를 제공해준다. 그중에서 나는 전화번호를 입력받아 저장하기 위해서 firebase 에서 제공해주는 database 기능을 사용하기로 했다.
firebase 에서 제공하는 database 는 두가지 이다.
- Cloud Firestore는 모바일 앱 개발을 위한 Firebase의 최신 데이터베이스로, 실시간 데이터베이스의 성공을 바탕으로 더욱 직관적인 새로운 데이터 모델을 선보입니다. 또한 실시간 데이터베이스보다 풍부하고 빠른 쿼리와 원활한 확장성을 제공합니다.
- 실시간 데이터베이스는 Firebase의 기존 데이터베이스로, 여러 클라이언트에서 실시간으로 상태를 동기화해야 하는 모바일 앱에 적합한 효율적이고 지연 시간이 짧은 솔루션입니다.
공식문서
store 가 실시간 데이터베이스 에 비해 확장된 모델이며 협업 기업에서도 store 를 사용하기 때문에 별 고민 없이 Cloud Firestore 선택했다.
$ npm install --save firebase
import React from 'react';
import firebase from 'firebase';
import 'firebase/firestore';
const firebaseConfig = {
//위에서 복사한 개인의 Config
};
firebase.initializeApp(firebaseConfig) //firebase 초기화
const db = firebase.firestore(); //store 사용
import React, { useState } from 'react';
import firebase from 'firebase';
import 'firebase/firestore';
const firebaseConfig = {
//위에서 복사한 개인의 Config
};
firebase.initializeApp(firebaseConfig); //firebase 초기화
const db = firebase.firestore(); //store 사용
function App() {
const [number, setNumber] = useState(0);
const handleClick = () => {};
const handleChange = e => {
setNumber(e.target.value);
};
return (
<>
<input value={number} onChange={handleChange}></input>
<button onClick={handleClick}>입력</button>
</>
);
}
import React, { useState } from 'react';
import firebase from 'firebase';
import 'firebase/firestore';
const firebaseConfig = {
//위에서 복사한 개인의 Config
};
firebase.initializeApp(firebaseConfig); //firebase 초기화
const db = firebase.firestore(); //store 사용
function App() {
const [number, setNumber] = useState(0);
const handleClick = () => {
db.collection('users') //조회할 collection 넣어준다.
.doc(number) // 조회할 document 를 넣어준다.
.get()
.then(doc => {
//db에 해당 number 가 없을 경우
if (!doc.data()) {
alert(`${number}님 환영합니다.`);
// 존재할경우
} else {
alert(`현재 con 갯수 : ${doc.data().cons_amount}`);
}
});
};
const handleChange = e => {
setNumber(e.target.value);
};
return (
<>
<input value={number} onChange={handleChange}></input>
<button onClick={handleClick}>입력</button>
</>
);
}
export default App;
import React, { useState } from 'react';
import firebase from 'firebase';
import 'firebase/firestore';
const firebaseConfig = {
//위에서 복사한 개인의 Config
};
firebase.initializeApp(firebaseConfig); //firebase 초기화
const db = firebase.firestore(); //store 사용
function App() {
const [number, setNumber] = useState(0);
const handleClick = () => {
db.collection('users')
.doc(number)
.get()
.then(doc => {
if (!doc.data()) {
db.collection('users')
.doc(phoneNumber)
.set({
cons_amount: 1,
coupons_amount: 0
});
db.collection(`/users/${phoneNumber}/cons`).add({
create_date: new Date(),
is_used: false,
is_expired: false
});
alert(`${phoneNumber}님 환영합니다.`);
} else { //등록된 유저일 경우
db.doc(`/users/${phoneNumber}`)
.get()
.then(doc => {
const currentConsAmount = doc.data().cons_amount;
db.doc(`/users/${phoneNumber}`).update({
cons_amount: currentConsAmount + 1
});
});
alert(`현재 con 갯수 : ${doc.data().cons_amount}`);
}
};
const handleChange = e => {
setNumber(e.target.value);
};
return (
<>
<input value={number} onChange={handleChange}></input>
<button onClick={handleClick}>입력</button>
</>
);
}
export default App;
.doc
생략) 직접 정의하고 싶다면 set을 사용한다.