[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;