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
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에 저장된 데이터를 불러오는 기능을 구현해야 한다.
'Web > [프로젝트] 웹 메신저' 카테고리의 다른 글
2021.09.12 개발 일지 (채팅 자동 스크롤 되는 시점 수정, DB 구조 추가) (0) | 2021.09.21 |
---|---|
2021.09.11 개발 일지 (채팅 내역 불러오기, 실시간 업데이트, 채팅 자동 스크롤 및 react-custom-scrollbar 적용) (0) | 2021.09.12 |
2021.09.08 개발 일지 (Firestore에서 채팅 내역 조회하기, 실시간 업데이트) (0) | 2021.09.12 |
2021.09.04 개발 일지 (채팅 전송 메세지 DB 저장, moment 라이브러리를 이용한 채팅방/메세지 번호 생성) (0) | 2021.09.05 |
2021.09.02 개발 일지 (친구 추가 시 DB 저장, 사이드바 친구 목록 표시, 1:1 채팅 레이아웃) (0) | 2021.09.05 |