오늘은 firebase의 기능 중 firestore에 대해서 알아봤다.
사실 처음에 firebase가 뭔지 그 개념을 모르는 상태에서 수업을 들었는데,
백엔드, 서버의 mvp 버전이라고 이해하게 됐다.
Firestore는 Firebase에서 제공하는 클라우드 NoSQL 데이터베이스로, 실시간 동기화와 간단한 CRUD 구현이 가능하다.
시작은 init.js 설정
다른 여타 firebase 기능 사용법과 마찬가지로 firestore 또한 init 설정이 필요하다.
firebaseConfig 를 파이어베이스 웹 앱 설정에서 가지고 와 맞춰줘야 한다.
그리고 파이어베이스 서버에서 initializeApp``getFirestore를 import 한다.
export 값은 db (데이터베이스)
firestore 이해하기 - 게시판의 기본 원리
firestore 기본 기능을 이해하기 위한 html 파일이다.
문서를 생성하고, 읽고, 업데이트하고, 삭제하고, 병합하는 기능을 버튼으로 구현했다.
또한 상황체크와 디버깅을 위한 상태출력 영역도 마련했다.
js파일 연결하기
init.js 파일에서 export한 db를 연결시켜주고, 파이어스토어에서 제공하는 함수 또한 import 해준다.
각 함수 기능 설명
| 함수명 | 기능 설명 |
|---|---|
doc() | Firestore에서 특정 문서의 참조(reference)를 생성하는 함수. 컬렉션 이름과 문서 ID를 지정하여 사용. |
setDoc() | 문서를 새로 생성하거나 덮어쓰는 함수. { merge: true } 옵션을 주면 기존 데이터에 병합 가능. |
getDoc() | 특정 문서의 데이터를 가져오는 함수. 존재 여부 확인 시 docSnap.exists()로 검사. |
updateDoc() | 기존 문서의 일부 필드만 업데이트하는 함수. 문서가 존재하지 않으면 에러 발생. |
deleteDoc() | 특정 문서를 삭제하는 함수. 실행 시 해당 문서가 Firestore에서 제거됨. |
serverTimestamp() | 서버 기준의 현재 시간(Timestamp)을 자동으로 기록해 주는 함수. 생성일/수정일 관리에 사용. |
increment() | 숫자 필드 값을 지정한 만큼 자동 증가시키는 함수. 카운트 기능 등에 활용. |
이러한 함수들은 파이어베이스의 내장 함수임으로 from 값을 아래와 같이 설정하면 된다.
DOM 설정
간단하게 DOM을 설정하기 위해 선택자를 const 했다. $ 안에 document.querySelector() 구문을 삽입하는 것.
단, 이 다음 정의 때는 '#' 을 빼뜨리면 안된다는 것에 유의해야 한다.
상황체크를 위한 setStatus
try-catch 구문에서 버그가 났는지 안났는지 직관적으로 알 수 있도록 setStatus값을 변수로 만들어주고~
문서를 읽어왔을 때 화면에 보일 수 있도록 JSON.stringify() 도 활용한다.
문서 생성하기 (setDoc)
버튼을 클릭하면 async 으로 try-catch 구문이 실행된다.
setDoc() 내장함수로 타이틀과 카운트, 태그, 그리고 생성일시(createdAT) 를 설정했다.
이러한 과정이 진행되면 setStatus 변수에 "문서 생성 요청 보냄" 메시지(m)가 출력된다.
생성된 문서 읽어오기 (getDoc)
btnRead 를 클릭하면 getDoc 내장함수를 통해 데이터가 snap 된다.
JSON 문법으로 출력되는 것을 확인할 수 있다.
문서 업데이트하기 (updateDoc)
업데이트 버튼을 누르면 updateDoc() 와 increment() 내장함수를 통해 카운트가 올라간다.
또한 프로필-닉네임 속성과 테스터라는 값이 추가된다. 업데이트 시간 또한 serverTimestamp()를 통해 남겨진다.
업데이트 버튼을 8번 눌러서 ㅋㅋ 카운트 숫자가 8이 됐다.
필드 병합하기 (merge: true 옵션)
필드를 병합하는것은 setDoc 함수 안에 merge: ture를 적용하면 된다.
이러한 방식과 updateDoc의 차이는,
updateDoc의 경우 업데이트 할 문서가 없으면 에러가 나지만 이 경우 문서가 없더라도 오류가 나지 않고 생성되며, 있다면 일부만 수정된다.
문서 삭제하기
삭제 버튼을 누르면 뭔저 컨펌창으로 "정말 삭제하시겠습니까?" 확인한다. 컨펌창에서 '취소' 즉, false 값이 반환되면 리턴하고, 만약 그렇지 않다면 deleteDoc() 함수가 실행된다.
그러고 나면 setStatus 메시지에 "삭제 완료(요청 보냄)"이 출력되고,
실제로 문서가 파이어베이스 데이터베이스 상에서도 삭제된 것을 확인할 수 있다.
느낀점
게시판의 기본 원리를 이해할 수 있었다는 점에서 고무적이였다.
단순히 게시판의 디자인만 공부하는 게 아니라, 이렇게 동작 원리까지 알고 있는 것이 향후 서비스 기획이나 디자인을 진행할 때 도움이 될 것이라고 생각한다.
또한, 작은 CRUD 게시판을 직접 만들어보는 것도 좋은 연습이 될 것 같다
