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);