[회고록] - suspense와 lazy로 skeleton

지금까지 작업 현황..

팀 내에서 내가 맡은 r&r은 모두 마무리 되었고, 배포후 내가 작업한 부분에 에러또한 발견되지 않는것을 확인하였다. 팀 미팅을 통해, 앞으로 나는 주기적인 배포를 통해 우리팀 레포에 배포관련 오류가 없는지 확인하고 공유, 프로젝트 기획상의 필수 구현기능외의 추가기능 작업을 맡고, 팀내 디스코드에 상주하여 다른 팀원 분들을 도와드리는 역할을 맡게 될것 같다.

---

추가 기능 생각하기..

먼저 강사님과 화상 면담을 요청 드렸고, 프로젝트 진행사항과 성능최적화, 고도화에 대한 방향을 여쭈어 보았다. 다만 강사님께서는 팀프로젝트1은 규모가 작은 초급 프로젝트기에, 최적화가 큰의미가 없을것이라고 말씀하셨고, 지금 단계에서는 ux, ui에 초점을 맞추어 기본적으로 많이 구현하는 skeleton, api 가 너무 자주 요청되지는 않는지 정도를 파악하고 해결하는 것만으로도 앞으로 규모가 큰 프로젝트를 할때에 많은 도움이 될거라고 얘기해주셨다.

귀중한 피드백을 받았으면 바로 해야지 😤

Skeleton

//skeleton 애니메이션을 위한 style.jsx 파일 

import theme from "../../../styles/theme";
import styled, { keyframes } from "styled-components";

const GradientWave = keyframes`
  from {
    background-position-x:200%;

  }
  to {
    background-position-x: -200%;
  }
`;

export const SkeletonContent = styled.div`
  animation: ${GradientWave} 1.7s linear infinite;
  width: 100%;
  background: linear-gradient(
    to right,
    ${theme.color.Grayscale200} 25%,
    ${theme.color.Grayscale100} 50%,
    ${theme.color.Grayscale200} 75%
  );
  background-size: 200% 100%;
  height: 100px;
  @media (max-width: 480px) {
    height: 44px;
  }
...

• keyframe을 이용해서 skeleton 애니메이션을 만들고 애니메이션이 적용되었으면 하는 요소에 animation: &{만든 애니메이션} 을 값으로 주어 애니메이션을 적용했다.

이부분 짤로 바꾸기!

import { Suspense, lazy } from "react";
import Skeleton from "./Skeleton/Skeleton.jsx";
...

const DynamicContent = lazy(() => import("./Messages.data.jsx")); 
//lazy이용, skeleton이 먼저 로딩되고, 데이터를 받아와서 동적으로 렌더링 되는 부분은 렌더링이 후순위가 되게 했다.  

....

  return (
    <S.GridBoxes>
      {!isEdit && (
        <S.CreateBox>
          <Link to="message">
            <S.Plus src={PlusIcon} />
          </Link>
        </S.CreateBox>
      )}
      <Suspense fallback={<Skeleton />}>
        <DynamicContent
          deletedIds={deletedIds}
          setDeletedIds={setDeletedIds}
          isEdit={isEdit}
          messages={messages}
        />
      </Suspense>
    </S.GridBoxes>
  );
}

• suspense와 lazy를 이용해 만든 skeleton이 먼저 로딩되고, 데이터를 받아와서 동적으로 렌더링 되는 부분은 lazy를 이용해 렌더링이 후순위가 되게 했다.