[Firebase] Realtime Database 연동하기

7079 단어 JavaScriptFirebasewebDatabaseDatabase

팀 프로젝트 현 개발 환경

  • 개발 언어 : HTML, CSS, JavaScript
  • 라이브러리 : bootstrap, chart.js
  • 데이터베이스 : firebase

진행중인 팀 프로젝트를 커뮤니티에 일단 배포를 시작하고 버전을 업데이트하기로 했다.
배포를 결정하고 나니 아직 데이터베이스가 없어 유저 데이터를 쌓을 수 없는 것이 아까워서
일단 이전에 사용해본 적이 있는 Firebase Realtime Database를 연동시키기로 했다.

Firebase 연동하기

기본적으로 Firebase에 가입하고.. 프로젝트 생성하는 부분은 어렵지 않고 타 블로그에서 쉽게 찾을 수 있어서 자세히 다루지 않겠다.

Firebase SDK

웹 </> 앱에 Firebase 추가
1. 앱 등록 : 추가할 때 Firebase 호스팅은 따로 설정하지 않았다. (netlify 이용)
2. Firebase SDK 추가 : <script> 태그 사용을 선택하고 스크립트를 <body> 태그 하단에 붙여넣기

  • Firebase 서비스를 사용하기 전에 진행해야 합니다라는 경고를 무시하지 말자
    왜 이 부분을 자세히 안봤는지,, 서비스를 시작하고 나서 스크립트를 추가하면 연동이 제대로 되지 않는 것 같다. 연동이 되지 않았을 때 가장 좋은 방법은 처음부터 앱을 삭제/재등록해서 절차에 맞게 진행하는 것이지만, 잘 몰랐을 때는 다음과 같이 해결했다. 앞으로는 다신 안 쓸 예정이다.
// app, database 추가. 최신 버전으로 하니 에러가 뜬다.
<script src="https://www.gstatic.com/firebasejs/8.7.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.7.1/firebase-database.js"></script>

  // 여기서 부터 기본 제공되는 스크립트
  <script type="module">
  // Import the functions you need from the SDKs you need
  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js";
  import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.6.1/firebase-analytics.js";
  // TODO: Add SDKs for Firebase products that you want to use
  // https://firebase.google.com/docs/web/setup#available-libraries

  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: ""
  };

  // Initialize Firebase
  const app = initializeApp(firebaseConfig);
  const analytics = getAnalytics(app);
  // 여기까지가 제공된 스크립트
  firebase.initializeApp(firebaseConfig); // 초기화 함수 추가
</script>

Realtime Database 규칙 수정

규칙을 수정하지 않고 그대로 두면 일정 기간(한달 정도) 이후 권한이 만료되었다?는 경고 메일이 날라오다가 서비스가 정지된다. 이를 방지하기 위해서 Realtime Database -> 규칙 부분을 미리 수정해놓는 것이 좋다.

원래는 read, write에 대해 만료되는 시점이 적혀 있었는데 항상 읽고 쓰기가 모두에게 가능하도록 규칙을 수정했다.
보안 상황에 따라 uid!=null 같은 조건으로 수정해서 프로젝트에 알맞는 보안 규칙을 적용할 수 있다.

이제 단순히 JS파일에서 자유롭게 firebase를 가져다가 읽고 쓸 수 있게 되었다!

이어서 : Firebase Realtime Database로부터 데이터 읽고 쓰기 (push, once, snap) (feat. Promise, 비동기)

Go-기초(1)
[React] fetch 함수를 이용한 회원가입 & 로그인 구현(백엔드와 첫 통신) & mock data 활용법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage