개요

이번엔 DB에 값을 저장하고 불러오는 방식에 대해 알아볼 예정이다.

사용자가 시스템 상의 텍스트 필드에 값을 작성하면

그 값을 서버에 저장하는 내용을 진행하려고 한다.

1. 데이터 베이스에 접근하기: collection, doc

먼저 사용자가 작성한 내용을 저장하고 불러올 컬렉션을 생성한다.

필자의 경우 user_info 라는 컬렉션을 생성하였다.

생성한 컬렉션을 참조하기 위해선 collection(), doc() 함수가 필요하다.

collection()

• Firestore에서 특정 컬렉션(모음집, 테이블 개념)을 참조하는 함수

const collectionRef = collection(db, "컬렉션명");

첫 번째 인자: Firestore 데이터베이스 참조

두 번째 인자: Firestore 컬렉션 명

필자의 경우 두 번째 인자로는 user_info를 작성하면 되겠다.

이렇게 참조한 변수를 토대로 컬렉션에 접근할 수 있다.

doc()

• doc()은 컬렉션 안의 특정 문서(Document)에 접근하는 방식

const docRef = doc(db, "컬렉션명", "문서명");

collction에 비해 더 하위 접근을 하는 함수라고 보면 된다.

컬렉션에서 특정 문서만 가져오고 싶다면 위 함수를 사용하면 된다.

2. 값을 저장하기: addDoc

addDoc()

• Firebase에서 컬렉션에 새로운 문서를 추가하는 함수

addDoc(collection(db, "컬렉션명"), { 필드명: 값 })

첫 번째 인자 | collection(db, "컬렉션명"): 위 내용 참고

두 번째 인자 | { 필드명: 값 } : 저장할 데이터

json 형태로 값을 주고 받기 때문에, 키(필드명): 값 형태로 넣어주면 된다.

// 사용 예시
const MailRef = collection(db, "user_info");

await addDoc(MailRef, {
  receiver: receiver,
  message: message,
  timestamp: new Date(),
});

• 서버로 요청을 보내기 때문에 await를 통해 값을 보내준다.

이 과정을 통해 firebase DB에 있는 컬렉션에 접근하여 값을 저장할 수 있다.

2. 값을 불러오기(내보내기): getDoc(), onSnapshot()

firebase 에서 값을 불러올 땐 두 가지 함수를 주로 사용한다.

바로, getDoc()와 onSanpshot() 이다.

getDoc()

• Firestore에서 한 번만 데이터를 가져오는 함수

실시간 반영이 되지 않기 때문에, 자주 변경되지 않는 정보를 불러올 때 사용하는 함수

getDoc(collection(db, "컬렉션명"));

접근할 컬렉션(혹은 문서)을 인자로 받는다.

위 과정을 통해 원하는 값을 가져올 수 있다. 그러나 불러온 후에는 요청이 끝나기 때문에 자주 업데이트가 일어나지 않는 경우에만 사용하는 것이 좋다.

onSnapshot(): 실시간 데이터 감지

• Firestore의 데이터를 실시간으로 감지하는 함수

onSnapshot(collection(db, "컬렉션명"), 콜백 함수, 에러 처리 함수);

두 번째 인자: Firestore 데이터의 변화(추가, 수정, 삭제)를 감지할 때마다 실행되는 함수

(userSnap) => {
	if (userSnap.exists()) {
		console.log("✅ 실시간 사용자 데이터:", userSnap.data());
	} else {
		console.log("❌ 해당 사용자가 존재하지 않습니다.");
	}
}

userSnap: DocumentSnapshot 또는 QuerySnapshot 객체

• DocumentSnapshot: 단일 문서(doc())를 참조했을 때 반환

주요 메서드

.exists()	문서가 Firestore에 존재하는지 확인
.data()	문서의 데이터를 객체로 반환
.id	문서의 ID 반환

• QuerySnapshot: 여러 문서(collection())를 참조했을 때 반환

주요 메서드

.docs	컬렉션의 모든 문서를 배열로 반환
.size	컬렉션 안의 문서 개수 반환
.empty	컬렉션이 비어있는지 확인 (true/false)

세 번째 인자: Firestore 요청 도중 발생한 에러를 처리하는 함수

보안 규칙 설정 오류나 네트워크 연결 문제 등을 잡을 수 있음

(추후 이 부분을 통해 발생한 오류를 잡는 내용도 업로드 하겠다. onSnapshot에서 빈번히 발생하는 오류가 있기 때문에…)

위와 같은 과정을 통해 값을 저장하고 불러올 수 있게 된다.

이제 어느정도 firebase의 db 접근하는 방법에 익숙해진 거 같다(제발)

아무래도 개인 개발을 진행하다 보니 백에 관한 부분은 이런 요소에 의존할 수 밖에 없는 듯 하다…

다음 게시물에는 onSnapshot을 사용하며 발생한 이슈에 대해 정리해보려 한다.