4. Firebase Service 관리 - jmini1234/tripmate GitHub Wiki

1. Service 환경설정과 사용

우리가 사용한 Firebase Service 4가지Authentication, Database, Storage, Hosting는 각각의 설정을 모두 console에서 한 후에 사용할 수 있다.
각 develop 환경설정시 주의점과 공통적인 사용법을 알아보자.

1-1. Authentication

환경설정 : google 로그인 허용

기본 사용법: firebase.auth()

 var provider = new firebase.auth.GoogleAuthProvider();
 firebase.auth().signInWithPopup(provider).then(function(authData) {
    console.log(authData);
  }).catch(function(error) {
    console.log(error);
  });

google 로그인을 사용할때는 별도의 google login 메소드인 GoogleAuthProvider()를 사용해서 현재 사용자의 firebase.auth() 정보를 initialize한다.

위 세팅 (sign in method) 이후 firebase.auth() 메소드를 사용하게 되면 현재 사용자의 인증정보에 대한 내용이 드러나며, firebase.auth()를 이용해서 현재 user의 id, profile, token 등을 자신의 서비스에 customizing하는 것이 가능하다.

firebase.auth().signInWithPopup(provider);
firebase.auth().signOut();
firebase.auth().onAuthStateChanged(authStateObserver);
firebase.auth().currentUser.photoURL;
firebase.auth().currentUser.displayName;

1-2. Database

환경설정 : rule 설정

기본 사용법: firebase.database()

Database를 사용하기 위해서 보안규칙(security rule)을 설정해야한다. 이때 규칙은 console에서 설정할수 있으며, rules라는 key의 value 값이 firebase database의 보안규칙이된다. value 값에 들어가는 json data는 .read, .write등 다양한 속성에 대해서 true, false를 정의할 수 있다.

위 세팅 (console setting) 이후 firebase.database() 메소드를 사용하게 되면 현재 프로젝트의 database를 접근하겠다는 의미이다. firebase.database()를 이용해서 MySQL, MongoDB의 query문과 같은 명령어를 사용할 수 있다. database() 메소드를 이용해서, DB 저장 및 연결을 위한 관리는 본 위키의 3. Database 메소드 활용정리(#3. Database 메소드 활용 정리) 에서 자세한 내용을 확인하자.

1-3. Storage

환경설정 : rule 설정

**기본 사용법 **: firebase.storage()

Database와 마찬가지로 storage를 사용하기 위해서도 버킷규칙(bucket rule)을 설정해야한다. 이때 규칙은 console에서 설정할수 있으며, 이 안에는 file을 저장(write)할때의 이름 규칙 및, imagemaxsize에 관한 설정이 이루어져잇다.

// Returns true if the uploaded file is an image and its size is below the given number of MB.
function isImageBelowMaxSize(maxSizeMB) {
  return request.resource.size < maxSizeMB * 1024 * 1024
      && request.resource.contentType.matches('image/.*');
}

service firebase.storage {
  match /b/{bucket}/o {
    match /{userId}/{messageId}/{fileName} {
      allow write: if request.auth != null && request.auth.uid == userId && isImageBelowMaxSize(5);
      allow read;
    }
  }
}

위 세팅 (console setting) 이후 firebase.storage() 메소드를 사용하게 되면 현재 프로젝트의 storage를 접근하겠다는 의미이다. database와 마찬가지로 ref("경로")를 이용해서 저장 혹은 접근할 파일의 경로를 지정하고, .put() 등을 이용해서 write한다.

firebase.storage().ref(filePath).put(file)

1-4. Hosting

환경설정 : 현재 개발중인 firebase 프로젝트의 deploy

firebase login
firebase use --add    #firebase 프로젝트 선택 후 alias 부여

# firebase 프로젝트 local 서버로 확인하기
firebase serve
firebase serve --only hosting

# firebase에서 제공하는 hosting을 사용하여 deploy하기
# 본 프로젝트는 firebase에서 제공하는 function을 사용하지 않았기 때문에 exception function을 사용해서 deploy하였다. 
firebase deploy
firebase deploy --except function

local hosting을 이용해서 현재 프로젝트의 진행사항을 체크하고,

프로젝트가 마무리 되면 deploy를 하여 프로젝트의 도메인을 얻어 여러 환경에서 프로젝트를 실행할 수 있다.

2. Firebase initialize

shell command와 firebase initalize가 연관되어있으므로 이 위치이다..

firebase 프로젝트를 개발하기 위해서는 firebase console의 프로젝트의 속성정보를 나의 웹앱 source에 가져와야한다. 따라서 속성정보를 나의 source 코드에 가져오는 방법 2가지를 알아보겠다.

ㄱ. config 코드에 직접 넣기

firebase console > project Overview > 앱추가 > 웹앱 선택

아래 스피넷이 나오게된다. 이 내용을 내가 현재 개발하고있는 프로젝트의 html 하단이나, 관련 javascript code에 직접 넣게 되면, 해당 html, js 파일에서는 firebase 변수에 접근 할 수 있다. firebase변수에 접근을 하게 되면 firebase.auth(), firebase.database(), firebase.storage()등의 개발 서비스에 접근 할 수 있어 나의 웹앱에 맞춰 커스터마이징이 가능하다.

<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "APIKEY",
    authDomain: "DOMAIN",
    databaseURL: "DB URL",
    projectId: "triptmate",
    storageBucket: "BUCKET URL",
    messagingSenderId: "ID"
  };
  firebase.initializeApp(config);
</script>

하지만 이 경우, source code에 그대로 들어가기 때문에 html에 넣기라도 하면, F12 개발자 도구를 이용해서 APIKEY 등 중요정보를 쉽게 접근할 수 있다는 문제가 있다. 따라서 보안을 위해서라면 다른 방법을 권장한다.

ㄴ. shell 활용해서 config 숨기기

바로 html태그안에 해당 config과 관련한 정보를 연결하는 방법이다.

<script src="/__/firebase/5.5.8/firebase-app.js"></script>
<script src="/__/firebase/5.5.8/firebase-auth.js"></script>
<script src="/__/firebase/5.5.8/firebase-database.js"></script>
<script src="/__/firebase/5.5.8/firebase-storage.js"></script>
<script src="/__/firebase/5.5.8/firebase-messaging.js"></script>
<script src="/__/firebase/init.js"></script>

다음 태그에 있는 js의 내용은 환경변수를 이용해서 사용자 firebase 프로젝트의 주요 정보들을 가린 후 각 service를 initalize 한다.

cmd에서 firebase 명령어를 이용해서 설정한 나의 firebase 프로젝트의 config 값들이 모두 환경변수로 설정되고, 그 환경변수가 저 js 파일에 들어간다.

firebase use --add
? Which project do you want to add? (Use arrow keys)
> friendychat-8920d
  triptmate

아래와 같이 사용할 나의 firebase 프로젝트를 설정할 수 있다.

3. Database 메소드 활용 정리

Firebase Database의 메소드를 Select / Update / Insert 명령어를 연관시켜서 사용법을 분류하였다.

3-1. READ (select)

var callback = function(snap){
  printf("snap.val()");
}
firebase.database().ref("path").on("value", callback)
  • 해당 path(경로) 안에 있는 value를 snapshot을 찍듯이 가져와서 print하는 source이다.

**기본 사용법 **: .on("value", callback)

  • 1번째 argument

    • value = 변경에 대한 수신 대기 (전체)
    • child_added = 하위요소 추가에 대한 수신 대기
    • child_changed = 하위요소 업데이트에 대한 수신대기

  • 2번째 argument

    • 1번째 argumnet의 내용대로 대기하던 event가 들어오면 callback 함수 실행

즉, read는 해당 path의 어느부분이라도 변경이 있다면 callback을 실행하여 callback에서 htmltag.innerhtml 등의 html과 연관해서 내보내는 것을 목적으로 하였다.

트래픽 상 1번째 argument의 대기 범위는 변경사항의 최하위 위치가 제일 효율적이다.

firebase의 realtime database가 가능한 이유는, db 변경에 대한 수신을 대기하고 이에 대해 바로 반영할 수 있는 eventlistener를 기반으로 만들어졌기 때문이다.

3-2. WRITE (insert)

firebase.ref("path").push({
	json1_key : json1_val,
    json2_key : json2_val
});
  • 해당 path(경로) 에 push안에있는 argument를 key로 하도록 data를 insert하는 source이다.

기본 사용법: .push(json)

= 해당 json을 value로 갖는 key를 생성하고 push

  • json
    • { }를 이용해서 여러 key-value 쌍의 json 값을 넣어도 상관없다.
    • 이때 주의해야할 점은 argument가 해당 경로의 value로 들어간다는 것이다.
    • 그렇다면 key는? 임의생성
key : random_key, value : json

위 code를 적용했을 때 아래와 같은 규칙으로 database에 반영된다.
path아래에 바로 argument의 내용이 들어가는 것이 아니다.

path
  ㄴrandom_key2 (afdlahfkasdjka)
    ㄴjson1_key : json1_val
    ㄴjson2_key : json2_val

3-3. UPDATE (update)

firebase.ref("path").set({
	json1_key : json1_val,
    json2_key : json2_val
});
  • 해당 path(경로)를 key로 하고 set안의 argument를 value로 하는 data를 insert하는 source이다.

기본 사용법: .set(json)

= 해당 json을 value로 path를 key로해서 해당 key(경로)의 내용을 덮어씌운다

  • json
    • { }를 이용해서 여러 key-value 쌍의 json 값을 넣어도 상관없다.
    • 이때 주의해야할 점은 key값, 즉 해당 path안에 있던 기존내용이 .set의 argument로 대체된다는 점이다.
key : path, value : json

위 code를 적용했을 때 아래와 같은 규칙으로 database에 반영된다.
path아래에 바로 argument의 내용이 들어간다

path
  ㄴjson1_key : json1_val
  ㄴjson2_key : json2_val
  

#기존값이 어떤것이든 상관없이 덮어씌어진다.
(기존값)
path
  ㄴjson1_key : json1_val
  ㄴjson2_key : json2_val
  ㄴjson3_key : json3_val
  ㄴjson4_key : json4_val
  ㄴjson5_key : json5_val
  ㄴjson6_key : json6_val
-> 어찌됐든 set의 argument가 key로 설정!
⚠️ **GitHub.com Fallback** ⚠️