메인페이지 리팩토링

[bomi8489]

📑 이슈 번호

#321 #310

🚧 구현 내용

메인페이지에 Suspense를 적용하였습니다.

기존 메인 페이지에서는 useGetPopularLinks로 불러와지는 links의 존재여부에 따라서 메인화면의 모든 구성요소들의 렌더링이 결정되었습니다. 즉, links가 늦게 fetch될수록 렌더링이 지연된다는 문제점을 가지고 있었습니다.

// 기존의 코드
function Home() {
  const { links, isPopularLinksLoading } = useGetPopularLinks();
  /*
  ...
  */

  return isPopularLinksLoading ? (
    <Spinner />
  ) : (/*...*/)

이를 개선하고자 Suspense 도입을 시도하였고, 다음과 같은 과정에 걸쳐 리팩토링 하였습니다.

1. links 데이터가 필요한 LinkItem에 대한 코드 모듈화
2. Suspense 적용
3. 동적 모듈 import를 하기위해 next/dynamic을 사용 및 Suspense 제거(dynamic은 React.lazy와 Suspense의 기능이 합쳐졌기 때문)

인기링크리스트 및 메인스페이스리스트에 스켈레톤UI를 적용하였습니다.

이전의 스켈레톤UI를 삭제했던 이유인 CLS 이슈를 해결하였습니다.

🚨 특이 사항

메인페이지의 렌더링 여부가 useGetPopularLinks에 종속적이라 렌더링 지연이 생기는 것일 거라 가정하고 수정하였지만 렌더링지연은 개선되지 않았습니다.