토이프로젝트1 - 직원 인트라넷 서비스 / FireBase TroubleShooting

240513 회고 (FireBase TroubleShooting)

이번 회고에서는 지난 토이프로젝트1을 진행하며 겪었던 FireBase FireStore 문제에 대한 TroubleShooting에 대해 다뤄보고자 한다.

일단 겪었던 문제를 간단히 설명하자면,

• 말도 안 되게 증가했던 읽기 데이터 사용량
• 별 다른 액션이 없었는데도 읽기 데이터 사용량의 지속적인 증가
• 1일 프로젝트 할당량 초과로 인한 데이터베이스 사용 불가

처음 문제를 발견했을 때의 증상은 아직 배포도 되지 않은 로컬환경에서 테스트 중인 페이지에서 데이터베이스가 저장도, 불러와지지도 않았다. 이 점을 이상하게 여겨 FireBase의 FireStore를 확인했고, 페이지는 무한 로딩에 걸려 아무것도 나타나지 않았다..

그래서 프로젝트 할당량을 확인 해보니,

띠용? 읽기 데이터 사용량이 6만이요…..?

지난 24시간동안 모든 팀원(나 포함 5명)이 데이터를 계속해서 불러와도 6만이라는 숫자를 달성하기엔 정말 말이 안 된다고 생각했다. 지금 생각해봐도 말이 안 된다..

일단 뭐가 문제인지도 몰랐고, 다른 해결 방법이 없었기 때문에 하루 할당량이 초기화 되기를 기다릴 수밖에 없었다. 예상시간은 다음날 오후 4시~5시 즈음..

일일 프로젝트 할당량이 초기화되고, 다시 데이터를 입력하고 불러오며 테스트를 진행 중에 분명 처음엔 0으로 시작했던 읽기 데이터 할당량이 3시간만에 벌써 3.5만회로 증가한 것을 확인할 수 있었다.

이게 진짜 고작 3시간동안 벌어진 일..

그래서 대체 왜? 이렇게까지 읽기 데이터가 빠르게 증가했는가?

정답은 바로 내가 사용했던 onSnapshot 메소드 때문이다.

공식 문서에 따르면, onSnapshot() 메소드란

onSnapshot() 메서드로 문서를 리슨할 수 있습니다. 사용자가 제공하는 콜백이 최초로 호출될 때 단일 문서의 현재 콘텐츠로 문서 스냅샷이 즉시 생성됩니다. 그런 다음 콘텐츠가 변경될 때마다 콜백이 호출되어 문서 스냅샷을 업데이트합니다.

Cloud Firestore로 실시간 업데이트 가져오기  |  Firebase

내가 onSnapshot() 메소드를 사용했던 이유는 데이터를 저장했을 때, 새로고침 하지 않아도 자동으로 브라우저에 렌더링하기 위해서였다.

그런데 여기서 문제는.. 내가 원했던 건 데이터가 추가, 삭제될 때 실시간으로 브라우저에 렌더링 하기 위함이였는데 onSnapshot() 메소드를 활용하게 되면 이후 아무런 액션이 없어도 브라우저만 열어두면 계속 이 데이터가 최신 데이터가 맞는지 확인하기 위해 네트워크 요청을 계속해서 보낸다는 것이다.

심지어, 예를들어, 데이터 베이스에 10개의 데이터가 있으면 한 번 요청할 때 10개의 요청을, 100개 1000개가 있더라도 한 번 요청할 때 똑같이 100번, 1000번을 요청하게 되는 것이 위의 ‘읽기 데이터’가 증가하는 것의 원인이 되었다.

• 처음 데이터 요청이 생겼을 때
  

• 처음 데이터 요청을 보내고 아무런 액션을 취하지 않으며 브라우저 창만 열어두었을 때

실제로 위의 사진에서 볼 수 있는 것 처럼, 단지 브라우저만 열어두어도 아래 사진처럼 네트워크 요청이 시간이 지남에 따라 점점 증가하는 것을 볼 수 있다.

아무리 그래도 읽기 데이터가 6만회까지 증가한다는 것은 말이 안 되지만.. 만약 테스트 도중에 무한 루프에 걸렸다면? 그럼 또 충분히 이해가 가는 상황.. 아마 이게 문제였던 것 같다 🥲

그리고 실제로 아래 페이지 같은 데이터가 사용자의 요청이 있을 때만 요청되는 것이 필요할 때에는 onSnapshot() 메소드를 사용하는게 적합하지 않다고 한다.

그럼 onSnapshot() 을 사용하지 않고, 새로고침도 하지 않고, 데이터의 변화가 있을 때는 어떻게 바로 브라우저에 렌더링 해줘야 할까?

세 가지 방법으로 Cloud FireStore에 저장된 데이터를 검색할 수 있습니다.

문서, 문서 컬렉션 또는 쿼리 결과에 다음 메서드 중 하나를 사용할 수 있습니다.

• 메서드를 호출하여 데이터를 한 번 가져옵니다.

• 데이터 변경 이벤트를 수힌하는 리스너를 설정합니다.

• 데이터 번들을 통해 외부 소스에서 Firestore 스냅샷 데이터를 일괄 로드합니다.

리스너를 설정하면 Cloud Firestore는 리스너에 데이터의 초기 스냅샷을 전송한 후 문서가 변경될 때마다 다른 스냅샷을 전송합니다.

Cloud Firestore로 데이터 가져오기  |  Firebase

실시간 데이터 가져오기가 아닌, 그냥 ‘데이터 가져오기’를 사용하면 된다.

하지만 기본적으로 위의 방법들은 return 값이 없기 때문에, 따로 구현 해줘야 한다.

요약

1. Firestore의 onSnapshot() 를 사용하면 실시간으로 데이터가 최신인지 확인하기 위해 네트워크 요청이 지속적으로 발생한다
2. 이를 해결하기 위해 onSnapshot() 대신 get(), getDoc(), where() 을 사용할 수 있다.

3. 그럼 onSnapshot() 은 어떤 경우에 사용하는가?

   • 실시강 채팅 어플 등 정말 ‘실시간’으로 데이터를 불러와야 할 때
4. 자나깨나 무한 루프 조심
5. 디버깅을 잘 하자