[JS] 프로젝트 (2) - firebase

서론

지난 aws는 firebase에서 필요하기 때문에 사용했었다! 오늘은 본격적인 데이터 다루기

firebase SDK

npm i firebase@12.0.0 

• 최신 버전
• aws와 마찬가지로 해당 버전 이전에 sdk 사용 방식이 다르다
• 그러므로 코드나 공식문서를 참고할 때 유의하자

참고 사항

• collection이 supabase의 table개념
• document가 supabase의 table item 개념

데이터 가져오기

  // 컬렉션 객체
  const productCollection = collection(db, "product");

export async function getProducts() {  
  // firebase에서 데이터 가져오기
  const productQuerySnapShot = await getDocs(productCollection);
  
  // 데이터 배열로 전처리
  const products = [];
  
  productQuerySnapShot.forEach((doc) => {
    products.push(doc.data());
  });

  return products;
}

(ㅜㅜ내가 왜 supabase를 두고 firebase를 쓰겠다고 했을까?)

• 변수명이 저런 이유는 넘어오는 값이 querySnapShot 형태여서 그렇다
• 저 유사 배열 같은 걸 forEach문으로 돌면서 data메서드로 내가 원하는 데이터를 꺼내줘야한다
• 다른 방법이 있는 지는 검색 해봤는데 없다
• api 한 번 호출할 때마다 저런 과정을 거쳐야 하니 캐시 관리를 해야겠다
• 데이터를 가져올 때는 컬렉션을 참고해 가져오기 때문에 collection 함수로 가져올 컬렉션의 정보를 객체로 만든다

데이터 생성하기

방법1: addDoc

const productCollection = collection(db, "product");

export async function createProduct({ data }) {
  const result = await addDoc(productCollection, data);
  return result.id;
}

• 나는 생성 후 넘어오는 값이 내가 생성한 데이터(id를 포함한 값)인 게 좋은데 id값만 받을 수 있다
• 그래서 상품 데이터 생성 후 생성할 때 사용한 데이터에 응답으로 넘어온 id 값을 추가해 상품 목록에 추가하는 방법으로 구현해야 한다
• 데이터를 불러올 때와 마찬가지로 추가할 컬렉션의 정보로 객체를 만들어 사용한다

방법2: setDoc

  const docObj = doc(db, "product", "이 값이 id가 됨");
  const result = await setDoc(docObj, data);
  return result.id

• 데이터 생성 시 id값을 직접 지정해 주는 방법
• doc함수를 사용해 생성할 document의 정보를 담고 있는 객체를 만들어서 첫 번째 인수로 넘긴다

데이터 수정하기

export async function updateProduct({ id, data }) {
  // 
  const docObj = doc(db, "product", id);
  const result = await updateDoc(docObj, data);

  return result.id;
}

• 수정할 document의 정보를 담고 있는 객체를 생성해 updateDoc 함수의 인자로 넘긴다
• 정보는 컬렉션 이름과 수정할 document의 id값이다
• 역시나 수정한 데이터의 신규 값은 돌려주지 않는다

데이터 삭제하기

export async function deleteProduct({ id }) {
  const docObj = doc(db, "product", id);
  const result = await deleteDoc(docObj);

  return result.id;
}

• 삭제할 document의 정보를 담고 있는 객체를 생성해 deleteDoc 함수의 인자로 넘긴다
• 정보는 컬렉션 이름과 삭제할 document의 id값이다.

마무리

오래된 서비스여서 기능이 많아서 그런가,,,? supabase가 훨씬 직관적이고 편하다 ㅠㅠ SDK도 너무 복잡하고 버전도 여러 개라 헷갈린다
그리고 문서도 뭔가 읽기가 힘들다. 지극히 개인적인 의견이지만 가독성도 떨어지는 것 같고,,, 괜히 엄살 부리는 것 같기도 하고 ㅎ