• 기능은 모두 잘 작동 되나 console에 찍힌 React 418, 423 error.

    Untitled

    • console에 error가 찍혀서 lighthouse로 성능 검사 시 점수가 낮게 나옵니다.

    Untitled

  • 청약 예정, 청약 가능 등의 필터를 표시하기 위해 new Date()로 현재 날짜를 불러오는 함수를 만들었습니다.

    // 오늘 날짜 구하기 - 분양 정보 DB의 날짜 형식 0000-00-00
export const getToday = () => {
  const date = new Date();
  const year = date.getFullYear();
  const month = ('0' + (date.getMonth() + 1)).slice(-2);
  const day = ('0' + date.getDate()).slice(-2);
  const today = year + '-' + month + '-' + day;

  return today;
};

  • Next.js에서는 기본적으로 서버 렌더링

    • 서버에서 렌더링 된 ‘현재 시간’ =/= 클라이언트의 ‘현재 시간’ 이라서 오류가 발생한 것

  • 해결 방법

    • Next.js에는 컴포넌트를 클라이언트에서 실행하는 dynamic import 모듈이 있습니다.

    • getToday() 함수를 실행하는 컴포넌트를 dynamic import를 사용해 클라이언트에서 실행되게 했더니 오류가 해결되었고 성능 점수도 개선할 수 있었습니다.

      Untitled