리팩토링 / 부산에 가면 2. Firebase

• 사용자 마다의 wishList를 만들고 싶었다. (로그인, 회원가입, 데이터베이스)
  위의

Firebase 로그인

공식 문서

Firebase 회원가입

Firebase Firestore 에서 데이터 읽어 오기

Firebase의 Firestore에서 모든 데이터 읽어오는 방법 공식 문서 // 우선 firebase 세팅을 해준다.

export const getWishList = async(email) => {
  const wishList = []
  const querySnapshot =  await getDocs(collection(dbService, email))
  querySnapshot.forEach((doc) => {
    let data = doc.data()
    data.docId = doc.id
    wishList.push(data)
})
return wishList
}

getDocs를 통해서 dbService에 접근하고 그 중에서 로그인한 email을 키로 가지는
컬렉션에 접근하고 그 컬렉션에 있는 문서들을 순회한다.

문서에서 필드 데이터를 가져오기 위해서는 data() 메서드를 사용해 줘야한다.

그리고 data.docId = doc.id

데이터를 추가할 때 자동으로 생성되는 doc.id를 data.docId 프로퍼티 값으로 추가해서 이후에 삭제할 때 사용할 수 있도록 만들어 준다.
문서를 순회하며 wishList를 배열에 push해주고 마지막에는 wishList 배열을 리턴해준다.

Firebase Firestore에 데이터 삭제하기

공식 문서

//삭제 코드
export const deleteWishListItem = async({email, docId}) => {
  const okDelete = window.confirm('정말로 삭제하시겠습니까?')
  if (okDelete) {
      await deleteDoc(doc(dbService, email, docId));
  }
}

email컬렉션에서 해당 docID를 가진 문서를 삭제한다.

Firebase Firestore에 데이터 쓰기

//AddWishList.js
import { collection,addDoc } from "@firebase/firestore";
import { dbService } from "../fbase";
export const AddWishList = async(email, wishToGoList, data) => {
  const check = wishToGoList.filter((el)=>el.UC_SEQ === data.UC_SEQ)
  if(check.length>0){
    return alert('이미 저장했습니다.')
  }
  await addDoc(collection(dbService, email),{
    UC_SEQ : data.UC_SEQ,
    MAIN_IMG_THUMB : data.MAIN_IMG_THUMB,
    ADDR1 : data.ADDR1,
    MAIN_TITLE : data.MAIN_TITLE,
    TITLE : data.TITLE,
    ITEMCNTNTS : data.ITEMCNTNTS,
    GUGUN_NM : data.GUGUN_NM,
    LAT : data.LAT,
    LNG : data.LNG
})
window.alert('위시리스트에 추가하였습니다!')
}

check 를 통해 이미 위시리스트에 저장되어 있는 정보는 담기지 않도록 해준다.
firebase dbService에 로그인한 사용자의 이메일 컬렉션에, 바디에 담긴 값을 저장해준다.