Firebase 사용 방법
[Project 설정]
https://firebase.google.com에 login함
"Get Started" 혹은 "Go to console"을 눌러서 https://console.firebase.google.com로 이동
"Add project"를 눌러서 새로운 project 생성
-. 예를 들어 "MyTest"란 이름으로 project 생성
-. "Continue"를 눌러서 계속 진행함
(Config File 생성)
Project settings(⚙️이런 모양)에 들어가서 web app을 위한 Config file을 생성함
-. 위치: Project settings > General > Your apps > </> 모양을 눌러서 생성
예를 들어 "MyWebApp"이란 nickname을 입력해서 "Register app"을 누름
Your apps > MyWebApp에 가서 Config를 누르면, Node.js에 쓸 수 있는 Config file을 얻을 수 있음
(Node.js에서 사용)
npm으로 다음 module을 설치해야 함
-. @nuxtjs/firebase 의미: Nuxt.js의 scoped module(@의 의미)로 firebase를 설치
npm install firebase
npm install @nuxtjs/firebase
[Realtime Database]
매우 간단한 NoSQL database
-. DB interface는 JSON이 기본
(Setup)
"MyTest" Project에서 Realtime Database를 선택한 후 "Create Database"를 눌러서 DB를 생성함
DB 위치는 Singapore을 선택하고, DB는 locked mode에서 시작함
-. Firebase DB에 접근해서 read, write을 하려면 위의 rules를 모두 true로 해야 함
필요한 경우 DB는 Import JSON으로 초기화
(Node.js용 Config File)
Project에서 제공하는 Config File을 이용해 firebaseDatabase.js file을 생성
import firebase from 'firebase/app';
import 'firebase/database';
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = { ... }; // Project에서 제공하는 Config file을 그대로 사용
if (firebase.apps.length == 0) firebase.initializeApp(firebaseConfig);
export default firebase.database();
Firebase DB가 필요한 경우에 다음 code로 import 가능
import fbDb from './firebaseDatabase';
Firebase 외부에서 DB에 read, write을 하려면 다음과 같이 Rules > Edit rules에 가서 권한을 true로 설정하고 "Publish"를 눌러야 함
Firebase Security Rules를 검증할 때는 Rules > Edit rules > Rules Playground를 확인할 수 있음
(DB에 덮어쓰기)
set() 함수를 이용함
예를 들어, reference가 "names"인 경우 다음과 같이 덮어쓰기를 할 수 있음
import fbDb from '~/plugins/firebaseDatabase';
fbDb.ref('names').set({'child1': 'Hello, world!'});
위와 같은 JSON 구조에서 child1에 data를 추가하려면 다음 code가 필요함
fbDb.ref('names').child('child1').set({'child2_1': 'My world!', 'child2_2': 'Your world!'});
혹은 root부터 시작해서 JSON으로 다시 채워도 됨
fbDb.ref('names').set({'child1': {'child2_1': 'My world!', 'child2_2': 'Your world!'}});
(DB에 Data Append)
다른 child에 영향을 주지 않고 특정 위치만 덮어쓰기 하려면 update() 함수를 사용함
-. 아래와 같이 입력하면 child1 밑에 추가로 child2가 생김
fbDb.ref('names').child('child1').update({'child2': 'Our world!'});
(DB에서 읽기)
get() 함수를 이용하면 data를 한번만 빠르게 얻을 수 있음
-. get() 함수는 server 값을 읽고, 값이 없으면 local cache에 접근해서 값을 한 번만 읽음
-. get() 함수는 대역폭을 많이 쓰기 때문에 once() 함수를 쓰는 것이 더 좋음
fbDb.ref('names').get().then((snapshot) => {
if (snapshot.exists()) {
console.log(snapshot.val());
} else {
console.log('No data available');}})
.catch((error) => {
console.error(error);});
once() 함수를 이용하면 server의 갱신값을 직접 읽지 않고 local cache로부터 빠르게 값을 읽음
-. 예를 들어, 아래 code는 child1 밑에 있는 data를 한 번만 빠르게 읽음
fbDb.ref('names').child('child1').once('value').then((snapshot) => {
if (snapshot.exists()) {
console.log(snapshot.val());
} else {
console.log('No data available');}})
.catch((error) => {
console.error(error);});
on() 함수는 server의 갱신값을 계속 읽어서 realtime으로 최신의 data를 계속 확보하게 함
-. 예를 들어, 아래 code는 child1 밑에 있는 data의 최신값을 server로부터 계속 읽음
fbDb.ref('names').child('child1').on('value', (snapshot) => {
if (snapshot.exists()) {
console.log(snapshot.val());
} else {
console.log('No data available');}});
(DB 지우기)
모든 data를 지우기
fbDb.ref('names').remove();
하나의 data만 지우고 싶은 경우
-. 예를 들어 "child2"만 지우고 싶은 경우
fbDb.ref('names').child('child1').child('child2').set(null);