firestore & storage 사용하기
firestore 에는 문서를 저장하고, storage 에는 파일을 저장합니다. firestore에 파일도 저장할 수 있지만 2MiB 제한이 있습니다.
firstore 저장소 사용하기
데이터베이스 선택: Cloud Firestore 또는 실시간 데이터베이스
프로젝트 생성
firebase console에서 새 프로젝트를 생성합니다.
웹 앱에 Firebase 추가
를 눌러서 config 정보를 확인할 수 있습니다.
firebase 설치
yarn
으로 설치하였습니다.
$ yarn add firebase
파일 추가
프로젝트에서 firebase를 사용하기 위한 파일들을 추가합니다.
위에서 얻은 정보를 입력합니다. apiKey 등등.
// firebaseConfig.js
export defaut {
apiKey: "AIzaSyA3HtpUV_6UNwFmdaxpSFpUPpJmTJsvpSY",
authDomain: "sweltering-95126.firebaseapp.com",
databaseURL: "https://sweltering-9516.firebaseio.com",
projectId: "sweltering-9516",
storageBucket: "sweltering-9516.appspot.com",
messagingSenderId: "773479174081"
}
// firebaseInit.js
import firebase from "firebase";
import "firebase/firestore";
import firebaeConfig from "./firebaseConfig";
if (!firebase.apps.length) {
firebase.initializeApp(firebaeConfig);
}
export default firebase.firestore();
firestore 사용하기
// data.js
import db from "lib/firebaseInit";
사용하는 법은 이곳 에서 확인할 수 있습니다.
컬렉션 가져오기
const SOURCE = 'vworld';
const layer = 'facility_build';
const level = '15'
const levelRef = db
.collection(SOURCE)
.doc(layer)
.collection(level);
levelRef.get().then((docs)=>{
docs.forEach(doc => {
const data = doc.data();
const key = JSON.stringify({ idx: data.idx, idy: data.idy });
console.log(key);
});
});
가장오른쪽에 있는 문서들의 내용이 콘솔로 출력됩니다.
문서 가져오기
const docRef = db
.collection(SOURCE)
.doc(layer)
.collection(level.toString())
.doc(`${idx}_${idy}`);
try {
const doc = await docRef.get();
const data = doc.data();
console.log("GetLayer from FireStore", data);
return data;
} catch (e) {
console.log("Error reading document:", e);
}
문서 id를 바탕으로 문서를 바로 가져올 수 있습니다.
필터링
where
를 사용하여 필터링 합니다.
Cloud Firestore로 데이터 정렬 및 제한 | Firebase
간단한 쿼리
var citiesRef = db.collection("cities");
var query = citiesRef.where("capital", "==", true);
citiesRef.where("state", "==", "CA")
citiesRef.where("population", "<", 100000)
citiesRef.where("name", ">=", "San Francisco")
복합 쿼리
citiesRef.where("state", "==", "CO").where("name", "==", "Denver")
citiesRef.where("state", "==", "CA").where("population", "<", 1000000)
citiesRef.where("state", ">=", "CA").where("state", "<=", "IN")
citiesRef.where("state", "==", "CA").where("population", ">", 1000000)
잘못된 방법: 서로 다른 필드에 범위 필터 사용
citiesRef.where("state", ">=", "CA").where("population", ">", 100000)
서로 다른 필드에 범위 적용
적당한 방법을 찾지 못하여, 서로 다른 조건의 쿼리를 모두 호출하여 모두 가지고 있는 경우로 처리하였습니다.
const levelRef = db
.collection(SOURCE)
.doc(layer)
.collection(level);
const queryX = levelRef.where(CENTER_POS_X, ">=", min_lon).where(CENTER_POS_X, "<=", max_lon);
const queryY = levelRef.where(CENTER_POS_Y, ">=", min_lat).where(CENTER_POS_Y, "<=", max_lat);
return Promise.all([queryX.get(), queryY.get()]).then(res => {
let nodeCountMap = {};
res.forEach(docs => {
docs.forEach(doc => {
const data = doc.data();
const key = JSON.stringify({ idx: data.idx, idy: data.idy });
if (nodeCountMap.hasOwnProperty(key)) {
nodeCountMap[key] = nodeCountMap[key] + 1;
} else {
nodeCountMap[key] = 1;
}
});
});
let nodes = [];
const resCount = res.length;
for (const node in nodeCountMap) {
const count = nodeCountMap[node];
if (count === resCount) {
const obj = JSON.parse(node);
nodes.push(obj);
}
}
return nodes;
});
정렬 제한
citiesRef.orderBy("name").limit(3)
citiesRef.orderBy("name", "desc").limit(3)
citiesRef.orderBy("state").orderBy("population", "desc")
citiesRef.where("population", ">", 100000).orderBy("population").limit(2)
잘못된 방법: 서로 다른 필드에 범위 필터 및 1차 orderBy 사용
citiesRef.where("population", ">", 100000).orderBy("country")
문서 저장
const docRef = db
.collection(SOURCE)
.doc(layer)
.collection(level.toString())
.doc(`${idx}_${idy}`);
const data = {
idx,
idy,
...,
}
docRef
.set(
{
data,
},
{ merge: true },
)
.then(() => console.log("Document successfully written!:", data))
.catch(error => console.error("Error writing document: ", error));
set()을 호출하여 문서를 저장합니다. 하위 경로의 컬렉션, 문서가 없는 경우는 자동으로 생성됩니다.
firestorage 저장소 사용하기
파일 수정
// firebaseInit.js
import firebase from "firebase";
import "firebase/firestore";
import "firebase/storage";
import firebaeConfig from "./firebaseConfig";
if (!firebase.apps.length) {
firebase.initializeApp(firebaeConfig);
}
export const storageRef = firebase.storage().ref();
export const db = firebase.firestore();
firebase.storage().ref()
를 추가합니다.
// data.js
import { db, storageRef } from "lib/firebaseInit";
db → firestore 사용을 위한 객체
storageRef → storage 사용을 위한 객체
cors 설정하기
- Install gsutil | Cloud Storage Documentation | Google Cloud
- Configuring Cross-Origin Resource Sharing (CORS) | Cloud Storage Documentation | Google Cloud
- css - Google Cloud Storage fonts CORS issue - Stack Overflow
- gsutil 을 설치합니다.
- cors.json 파일을 생성합니다.
- gsutil을 실행하여하여 CORS 설정을 합니다.
//cors.json
[
{
"origin": [
"*"
],
"method": [
"GET"
],
"maxAgeSeconds": 3600
}
]
$ gsutil cors set cors.json gs://my-bucket
storage 저장하기
// data.js
const filePath = `${SOURCE}/${layer}/${level}/${idx}/${idy}/${filename}`;
const fileRef = storageRef.child(filePath);
fileRef
.put(layerInfo.data)
.then(function(snapshot) {
console.log("Uploaded a blob or layerInfo!", filePath, snapshot);
})
.catch(function(err) {
console.log(err);
});
put()으로 파일을 입력합니다.
storage 가져오기
const filePath = `${SOURCE}/${layer}/${level}/${idx}/${idy}/${filename}`;
const fileRef = storageRef.child(filePath);
try {
const url = await fileRef.getDownloadURL();
const result = await axios.get(url, {
responseType: "arraybuffer",
});
return result.data;
} catch (e) {
console.log("[ERROR] {data.js:getFile} ", e);
}
getDownloadURL 을 통해서 URL을 얻습니다. 이 URL을 통해서 파일을 다운로드 받습니다.
CORS 설정이 되어 있어야 파일을 받을 수 있습니다.
참고
- firestore 저장소 사용하기
- 데이터베이스 선택: Cloud Firestore 또는 실시간 데이터베이스 | Firebase
- Cloud Firestore | Firebase
- Cloud Firestore로 데이터 정렬 및 제한 | Firebase
- Install gsutil | Cloud Storage Documentation | Google Cloud
- Configuring Cross-Origin Resource Sharing (CORS) | Cloud Storage Documentation | Google Cloud
- css - Google Cloud Storage fonts CORS issue - Stack Overflow
tags: cloud, firestore, storage, javascript, web, js
'Programming > JavaScript' 카테고리의 다른 글
React App 빌드시 sourcemap 파일 제외하기 (0) | 2018.04.22 |
---|---|
React App Github Deploy (0) | 2018.04.21 |
[React.JS] 작업환경 설정하는 중 에러 (1) | 2018.01.26 |
[Leaflet] 플러그인 heatmap.js 사용하기 (0) | 2018.01.15 |
[Leaflet] 플러그인 PolylineDecorator 사용하기 (0) | 2018.01.14 |
댓글