yamoo9
commented
1 year ago 문제 분석
개발 과정에서 과도한 리소스 요청으로 과금이 필요하다는 오류 메시지가 출력됩니다.
아마도 Firebase에 반복 요청(useEffect 종속성 배열 설정 이슈)으로 할당량이 초과된 듯 보입니다. 새로운 Firebase 프로젝트를 생성한 다음 인증, 데이터베이스, 스토리지를 설정하고 사용해야 합니다. 😥
그리고 Firebase v9, v8 API 문법이 모두 사용된 부분이 useCategoryData 훅 코드에서 보입니다. 😱
challenges 콜렉션의 모든 문서를 불러오는데 Firebase v8 API가 사용 되었습니다.
문제 해결
먼저 거론한 이슈 해결 이후에야 Firestore에서 데이터를 불러와 화면에 렌더링 하는 코드를 검토해볼 수 있습니다. 🤔 우선 현재 이슈는 Closed 하겠습니다. 문제 분석이 가능해지면 새 이슈를 등록해주세요. 검토하여 해결 방법을 제시하겠습니다. 🙂
질문 작성자
윤성민
문제 상황
fbase.js 코드는 문제가 없어 보이는데 데이터가 아무것도 로드되지 않는 점으로 인해 이슈를 남깁니다.
현재 데이터가 뜨지 않는 점 이외에도 더미 데이터로 시험할 때는 잘 뜨던 필터 버튼까지 뜨지를 않고 있습니다.
제가 생성한 컴포넌트는 Category.jsx / ChallengeCard.jsx / ChallnegeFilter.jsx / ChallengeList.jsx / FilterButton.jsx가 있고 그 밖의 컴포넌트는 공통 컴포넌트(BackButton.jsx, Navbar.jsx, CreateChallengeButton.jsx)에 속합니다.
firebase 데이터를 받는 코드는 Category.jsx 와 ChallengeCard.jsx입니다. 코드도 같이 첨부하겠습니다
컴포넌트를 너무 많이 분리한 탓에 복합적으로 데이터를 불러올 때 이런 현상이 나타나는건지 궁금합니다.
처음엔 fbase.js에서 데이터를 로드하고 전달하는 로직을 짰지만 그럼 너무 복잡해질까봐 useCategoryData.js라는 훅을 만들어 넘겼습니다. 코드도 같이 첨부하겠습니다
프로젝트 저장소 URL
node_modules폴더를 제외한 나머지를 압축해 이 곳에 첨부하세요. filter.zip환경 정보