Firebase Realtime Database를 import할 때 오류가 발생해서 막혀있었는데

최근에 나온 9 버전을 이용해보면 괜찮을까 싶어서 새로 9 버전을 설치했다.

 

Firestore 관련 코드는 이미 8 버전으로 작성을 했기 때문에 건드리지 않고

Realtime DB만 9 버전 코드를 작성했는데 다행히도? 어째서인지? import 오류가 더이상 발생하지 않았다.

 

import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import 'firebase/compat/auth';
import { getDatabase } from 'firebase/database';

const firebaseConfig = {
	//config
};

firebase.initializeApp(firebaseConfig);
const firestore = firebase.firestore();  //firestore DB 연결
const auth = firebase.auth;
const database = getDatabase();

export {firestore, auth, database};

 

9 버전으로 업데이트를 해도 compat 폴더를 import하면 이전 버전을 사용할 수 있다.

Realtime DB 공식 문서에 9 버전 코드가 업데이트 되어있어서 해당 내용을 참고하여 작성했다.

 

https://firebase.google.com/docs/database/web/read-and-write#web-v9_1

 

웹에서 데이터 읽기 및 쓰기  |  Firebase 실시간 데이터베이스

의견 보내기 웹에서 데이터 읽기 및 쓰기 (선택사항) Firebase 로컬 에뮬레이터 도구 모음으로 프로토타입 제작 및 테스트 앱에서 실시간 데이터베이스의 데이터를 읽고 쓰는 방법에 대해 논의하

firebase.google.com

 

import 에러 해결 이후엔 DB와의 연결은 순조로웠다.

오늘은 1. 친구 추가 시 DB에 채팅방 멤버 등록하기, 2. 채팅 전송 시 DB에 채팅 기록 저장하기

이렇게 2개의 기능을 구현해서 DB에 데이터 등록이 제대로 되는지 확인해보았다.

 

채팅방과 관련된 DB 구조는 크게 ChatMembers와 ChatMessages로 나눌 수 있다.

 

ChatRooms

ㄴ채팅방 번호

  ㄴChatMembers (채팅방 멤버)

    ㄴ멤버 아이디

      ㄴemail : 멤버 이메일

      ㄴisMember : true

  ㄴChatMessages (채팅 메세지)

    ㄴ채팅 날짜 (yyyyMMdd)

      ㄴ채팅 번호

        ㄴcontent : 내용

        ㄴsenderId : 보낸 사람 아이디

        ㄴtime : 보낸 시간

 

아직 1:1 채팅만 가능한 상태이긴 하지만 추후 단톡방 기능을 추가하여 확장하는 것을 고려해서 ChatMembers를 만들었다.

 

DB에 데이터를 저장하는 코드 :

import { database } from '../services/firebase';
import { ref, set } from 'firebase/database';

export function addChatMember(chatRoomNum, id, email) {
    set(ref(database, '/ChatRooms/' + chatRoomNum + '/ChatMembers/' + id + '/'), {
        email: email,
        isMember: true
    });
} 

export function addChatMessage(chatRoomNum, date, messageCode, content, id, sendTime) {
    set(ref(database, '/ChatRooms/' + chatRoomNum + '/ChatMessages/' + date + '/' + messageCode + '/'), {
        content: content,
        senderId: id,
        time: sendTime
    });
 }

 

이제 DB에 저장된 데이터를 불러오는 기능을 구현해야 한다.

+ Recent posts