firebase, firebase-hook

shong1332·2021년 9월 10일
1

본격적으로 팀프로젝트를 시작하고서 우리는 firebase에 데이터를 넣는 방법에 관하여 서로 공부를 시작하기 시작했다.

우선 firestore설정 후 컬랙션을 만드는 과정은 그렇게 어렵지 않았다.
그리고 독스를 읽으며 데이터를 set하는것 또한 그렇게 어렵지 않게 해낼 수 있엇지만 문제는 데이터를 가지고 오는 방법이였다.

데이터를 가지고 오기 위해 격었던 시행착오를 기록으로남기고자 한다.

const cityRef = db.collection('cities').doc('SF');

const doc = await cityRef.get();
if (!doc.exists) {
  console.log('No such document!');
} else {
  console.log('Document data:', doc.data());
}

firebase 독스에 있는 '문서 가지고오기'

1. 우선 가장 처음 부딪쳤던 문제는 async 없이 달랑 적혀있는 저 await 였다.

저 친구를 어떻게 사용하나 싶었지만 function에 넣어 async를 붙혀 사용하니 문제없이 데이터를 콘솔로 찍어 볼 수 있었지만 function을 사용하기위해선 button과 같은 트리거가 필요했다.

2. 그래서 두번쨰로 생각한 나의 방법은 useEffect의 활용이였다.

useEffect (()=>{
  const cityRef = db.collection('cities').doc('SF');
  const doc =cityRef.get();
  console.log(doc)
})

처음 내게 promise를 건내주던 친절한 너란 코드..
하지만 역시나 async의 위치는 애매했고 약간의 검색을 통해 Effect 안에서도 함수를 사용 할 수 있다는 글을 찾아냈다.

하지만 여전히 데이터를 불러 오지 못했고 맨토님께 질문을 드려보았다.


  useEffect(() => {
    const data = async () => {
      const cityRef = await firebase.firestore().collection("cities").doc("SF");
     cityRef.get()
    };
    data();
  });
  

이팩트 안에서 함수를 실행시켜야 한다는걸 분명히 배웠고 내 개인 프로젝트에서도 사용했었는데 약이 너무 올라서 기억이 나지 않았던것 같다.

3. 1초에 100만번쯤 데이터를 쏴주는 firebase

우리 팀프로젝트 특성상 get보다는 onSnapshot을 사용해야 했는데
이팩트에 넣어 사용해보니 firebase가 데이터를 1초에 백만번쯤 쏴주는것이 아닌가..

처음엔 의존성 배열을 넣어주지 않아서 그런건가 싶어서 의존성 배열도 넣어보고 get도 써보았지만

onSnapsho를 쓰면 과하게주고
get을 주면 데이터를 주지 않았다.
정확히 말하면 get은 새로고칠때 데이터를 받아오지 못했고
페이지를 나갔다가 들어오면 데이터를 받아왔다.

4. firebase-hook과의 만남

23시가 넘어 막차시간땜에 집에 가야함이 너무 억울했지만 어쩔 수 없이 노트북을 덮고 집에 가며 라이브러리를 검색하다 찾아낸 firebase-hook.

firebase-hook 정말 너무 편하게 데이터를 꺼내올 수 있도록 해주었다.
허탈하기도 했고 기능에 감탄하기도 했다.

5. 마치며

중간에 블로그를 한번 날려먹고
기억이 나는데로 다시작성하다보니 참 의욕없이 써진글 같아 맘이 좋지 못하다..

(독스데로 사용해본다) -> async를 사용하기 애매하다.
(function을 사용한다) -> button과 같은 트리거가 필요하다.
(Effect를 사용한다) -> 데이터를 못불러오거나 미친듯이 불러오거나..

의 무한루프에 빠져 허우적 거리던 나를 살려준 firebase-hook.

라이브러리를 잘 쓰는것도 실력,
라이브러리 없이 코딩하는것도 실력.
바퀴를 새로 만들지 마라라는 말이 있지만 라이브러리의 도움을 받고 안받고는

할 수 있지만 않는것과 할 수 없어 못하는것의 차이가 있다고 생각한다.

결국 나는 팀프로젝트이기도하고 시간이 많지도않아
데이터 저장은 독스데로,
데이터 불러오기는 라이브러리를 혼용하며 코딩중이다..

다음에 시간이 나면 firebase-hook 활용법에 대해 글을적어도 재미가 있을것 같다.

profile
prototype

0개의 댓글