[React] 프로젝트 최적화/ firebase 할당량초과 / Overfetching
어찌 돌아가는 파이어베이스인가..
유저 테스트를 받기 전부터, 어찌 된 영문인지 mock data를 넣는 작업만 하여도 데이터 읽기가 5만을 초과하기 일쑤였다.
피드백을 받는 동안 firebase가 다운되는 일은 없어야 하기에, 급한 대로 일일 할당량에서 초과되는 사용량만큼 결제하기로 했다. (얼마가 나올지 몰라 불안..)
뭐가 문제니..
처음에는 이미지를 가져오는 방식이 문제라고 생각하였다. 사용자가 게시물을 작성할 때 이미지를 업로드하면, storage에 게시물의 id 값을 제목으로 한 이미지 파일이 저장된다. 게시물 데이터를 가져올 때 하나의 커버이미지를 가져오기 위해 storage 내의 모든 데이터를 읽어야 하도록 로직이 구성되어 있었는데, 이 부분이 서버에 부하를 줄 수 있다는 것을 알게 되었다. 그래서 게시물을 작성할 때 (데이터 업로드 시) 각 document에 coverImage 필드를 추가하고 여기에 url 값을 저장하는 방식으로 바꾸었다.
그렇게 변경 후 어느정도 나아진 것 같기는 하지만, 동일한 문제가 여전히 발생하고 있다.....
어제 저녁 내내 머리를 싸매고 고민을 해보았다. 그리고 지금까지 생각해 본 이유 몇 가지들을 돌아보면,
1. getDocs가 필요이상으로 호출되고 있다.
2. 데이터 캐싱을 제대로 활용하지 못하고 있다. useQuery를 사용하고 있지만 어딘가에 문제가 있을 가능성.
3. 렌더링이 빈번하다. + 렌더링 될 때마다 데이터가 계속해서 refetch 된다.
Overfetching
데이터를 가져올때 useQuery로 캐시콘텍스트에서 데이터를 받아오고 있으니 괜찮은 것 아닌 가라 하며 넘기면서 생각해보지 않았던 부분이 getDocs자체를 얼마나 호출하고 있느냐였다. 확인해 보니 하나의 데이터를 가져오기 위해 컬렉션 내에 있는 전체 document를 읽어오는 부분들이 있었다. 만약, 지금보다 읽어야 할 전체 데이터 수가 훨씬 많다면.. 큰 문제가 될 수 있을 것이다....
Firestore에서 특정 문서를 조회할 때는 doc과 getDoc 함수를 사용할 수 있다. 특정 문서의 ID를 알고 있을 때 하나의 문서만 정확하게 조회할 수 있게 해준다. 이걸 써야 한다.
모든 부분이 지금처럼 overfetching의 문제가 있는 것은 아니지만, 우선 내가 작업한 부분부터 체크해서 수정하기로 했다.
아래 코드는 상위랭킹 유저 리스트를 가져오는 부분이다. 이제까지는 리스트를 보여줄 때, 각 user들의 닉네임과 프로필이미지를 보여 주어기 위해 전체 유저 목록을 돌며(getAllusers) user.uid와 일치하는 document에서 displayName과 profileImg 값을 가져왔다.
수정하자..
1. uid 값을 매개변수로 받아 하나의 document를 반환하는 비동기 함수를 만든다.
함수에 uid값을 넘겨주는 부분을 어떻게 해야 하나 고민이 되었는데, ProfileImg와 UserName 부분만 따로 컴포넌트로 분리하여 props로 내려면 될 것 같았다. 그리고 해당 컴포넌트 내에서 useQuery로 받은 데이터를 사용하여 화면 렌더링을 하기로 했다.
2. TopUserDetail 컴포넌트 분리하기
3. uid값과 index를 TopUserDetail 컴포넌트로 내려준다.
작동은 똑같이 되지만 overFetching 하지 않도록 다른 한 곳도 동일한 방법으로 수정하였다.
중간발표 이후 추가로 더 구현하고 싶은 기능들이 있었지만, 피드백을 받고 수정하다 보니 최적화 작업이 얼마나 중요한지 깨닫는다. 앞으로 당장 이부분 하나로 크게 달라지는 부분은 없겠지만, 계속해서 남은 부분들을 확인하고 고쳐나가야할 것 같다.