1주차 팀 프로젝트 - 팀 소개 페이지에 추가하게 될 방명록 기능 구현을 위해, firbase에서 지원하는 Realtime Database를 사용하여 구현을 테스트 했다.
firebase 프로젝트 생성 및 앱 등록
우선 firebase 프로젝트를 생성 후 프로젝트에 내 앱을 추가한다.
프로젝트 생성 후 프로젝트 설정에 들어가면 앱을 추가 할 수 있다. 웹 플랫폼을 선택 후 등록하면 된다.
앱 닉네임 입력 후 앱 등록을 누른다 (호스팅은 필요하지 않아 체크하지 않음)
앱 등록 버튼을 누르면 SDK를 설치할 수 있는 코드를 준다.
npm 사용 없이, firebaseConfig만 가져와 firebase를 initialize 해 줄 것이다.
내 앱 등록 후 콘솔에 가면 앱이 등록된 것을 확인 할 수 있다.
Realtime Database 생성
이제 Realtime Database 를 생성해준다.
미국으로 설정
잠금 모드로 설정 후 규칙을 변경하면 되기에 나는 잠금 모드로 시작했다.
그러면 이렇게 DB가 생성된다.
읽기 쓰기 허용을 위해 규칙으로 들어가 false -> true로 변경 후 적용해준다.
내 프로젝트에 적용, DB에 값 넣기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
....
<script src="https://cdnjs.cloudflare.com/ajax/libs/firebase/7.14.1-0/firebase.js"> </script>
<script src="firebaseconfig.js"></script>
</body>
</html>
내 html 파일에 firebase 사용을 위한 CDN 주소를 넣어줬다. 또한 firebase initialize 등을 설정해놓은 js파일도 넣어준다.
firebaseconfig.js
const firebaseConfig = {
apiKey: "your apikey",
authDomain: "yourauthDomain.firebaseapp.com",
databaseURL: "https://yourauthdatabaseURL.firebaseio.com",
projectId: "yourprojectId",
....
};
//initialize firebase
firebase.initializeApp(firebaseConfig);아까 프로젝트 생성 시 만들어졌던 firebaseConfig 코드를 넣어준 후 initializeApp으로 initialize 해준다.
var commentformDb = firebase.database().ref('commentform');database() 함수로 db에 접근한다.
.ref()로 데이터베이스의 루트 또는 하위 위치를 참조할 수 있다. 경로가 없으면 새로 생성하기에 난 생성하고자 하는 이름을 전달했다.
document.getElementById('commentForm').addEventListener('submit', submitForm);
function submitForm(e){
e.preventDefault();
var content = getElementVal('commentCont');
console.log(content); //확인용
saveComment(content);
}
// db push 함수
const saveComment = (content) => {
var newConmment = commentformDb.push();
newConmment.set(
{comment : content}
)
}
const getElementVal = (id) => {
return document.getElementById(id).value;
}commentForm 요소에 submit event를 추가하고, 내 DB에 저장될 수 있도록 했다.
getElementVal(id) : DOM요소 value를 가져온다.
saveComment(content) : 요소의 value를 DB에 넣는다.
.push()와 .set()
.push()는 새로운 고유 키를 가진 자식 노드를 생성하고 반환한다.(값은 안넣음)
.push()로 생성한 위치에, .set()을 사용해 데이터를 저장한다. .set()은 데이터 덮어쓰기도 가능하다.
왜 .set()만 사용하지 않는지 찾아봤는데, 사용은 가능하지만 기존 데이터와 충돌하거나 덮어씌워지는 것을 피하기 위해선, .push() 사용하여 고유 키 노드를 생성하고 그 위치에 데이터를 입력하는 것이 더 안전하고 명확하다고 한다.
Realtime Database을 확인해보니 값이 잘 들어갔다.
방명록 띄우기
값이 잘 들어갔으니 read하면 된다.
// Firebase 실시간으로 데이터 가져오기
commentformDb.on('child_added', (snapshot) => {
const commentObj = snapshot.val(); // 새로 추가된 댓글 데이터
const commentWrapper = document.getElementById('commentWrapper');
// 댓글 내용 가져오기
const comment = commentObj.comment;
// 새로운 댓글 추가
const commentDiv = document.createElement('div');
commentDiv.classList.add('comment');
commentDiv.textContent = comment; // 댓글 내용 추가
commentWrapper.appendChild(commentDiv); // commentWrapper에 추가
});
.on()은 특정 이벤트 수신 메서드다.데이터 이벤트를 감지하면 콜백 함수를 실행한다.
주요 이벤트 타입은, value, child_added, child_removed, child_changed 등이 있는데 나는 새로운 자식 데이터가 추가될때마다 호출되어야 하니 'child_added'를 사용했다. child_added는 새로운 데이터가 추가될 때마다 그 추가된 데이터만을 가져온다. (완전 편리!) 이것을 snapshot으로 넘겨받고, 화면에 추가하는 기능을 구현했다.
결과화면
좀 부끄러운 수준의 테스트 데이터..지만 값은 잘 들어갔다.
Realtime Database와 Firestore의 차이
사실 Firestore를 사용하려고 시도하다가 막혀서 Realtime DB로 변경했는데, 둘 다 Firebase에서 제공하는데이터베이스인데 무슨 차이가 있는 걸까? 라는 궁금증이 들어 찾아보았다.
간단하게 정리하자면,
Realtime DB
-데이터가 트리 구조로 저장
-JSON 객체 형태로 데이터 저장
-복잡한 데이터 구조에는 부적합
-간단한 쿼리 기능(정렬, 범위검색)만 제공
-실시간 동기화 중점적 설계
-수직 확장에 적합, 데이터베이스가 커지면 성능 저하FireStore
-데이터가 컬렉션-도큐먼트 구조(문서 지향적)로 저장
-컬렉션(배열) 안에 도큐먼트(객체)를 넣는 구조로 더 유연한 데이터 모델 제공
-강력한 인덱싱 및 복잡한 쿼리 기능 제공
-오프라인 지원이 우수
-복잡한 구조에 적합
-수평 확장에 적합, 확장성과 성능이 중요한 애플리케이션에 적합이렇게 보니 간단한 방명록 기능은 Realtime DB가 더 적합했던 것 같다.
추가로 구현을 위해 공부하다가 알게 된 사실... Realtime Database는 주로 텍스트 기반 데이터를 저장하고 이미지나 동영상 같은 파일은 ... 직접 저장할 수 없다고 ...한다...
이미지 올려야 하는데.... 방법을 강구해봐야겠다.
