[MainPage] 빈화면 보이는 문제

[daadaadaah]

어떤 문제인가

• console 창의 아래와 같은 에러가 발생하면서 빈화면이 나타남

문제의 원인은 무엇인가?

• 메인 페이지에 있는 DevLink 컴포넌트에 필요한 데이터가 없어 에러가 발생하여, 빈 페이지가 나타나는 것임
• null인 이유는 Firebase Store에 저장된 데이터 구조가 잘못되어 있었기 때문이다.
• DevLink 컴포넌트의 필요한 firstDevlinker 데이터를 user 컬렉션에 있는 문서의 필드 중에 uid 필드로 가져오는데, uid 필드가 없어서 발생한 문제임

어떻게 할 것인가?

• Firebase Firestore의 수동으로 uid 필드와 해당 값 추가함
• 빈화면이 안보이는 문제는 해결함.
  
• 그런데, 추후에 동일한 문제가 발생했을 때, 당황하지 않도록 ErrorBoundary 추가해야 될 것 같음

참고할 만한 자료는 있는가

• ErrorBoundary

import React from 'react';

class ErrorBoundary extends React.Component {
 constructor(props) {
 super(props);
 this.state = { hasError: false };
 }

 static getDerivedStateFromError(error) {
 // 다음 렌더링에서 폴백 UI가 보이도록 상태를 업데이트 합니다.
 return { hasError: true };
 }

 componentDidCatch(error, errorInfo) {
 // 에러 리포팅 서비스에 에러를 기록할 수도 있습니다.
 console.log(error, errorInfo);
 // logErrorToMyService(error, errorInfo);
 }

 render() {
 if (this.state.hasError) {
 // 폴백 UI를 커스텀하여 렌더링할 수 있습니다.
 return <h1>Something went wrong.</h1>;
 }
 return this.props.children;
 }
}

export default ErrorBoundary;