refactor: lighthouse 성능개선 #155
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Summary of ChangesHello @dasosann, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 이 PR은 Lighthouse 성능 개선을 목표로 하며, 특히 앨범 생성 완료 페이지와 카운트다운 타이머 컴포넌트의 렌더링 및 애니메이션 로딩 방식을 최적화합니다. 이를 통해 사용자 경험을 향상시키고 웹 성능 지표를 개선하는 데 기여합니다. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
이번 PR은 Lighthouse 성능 점수 개선을 위한 리팩토링을 다루고 있네요. CreateComplete 컴포넌트에서 useCallback을 사용하여 불필요한 함수 재생성을 방지하고, CountdownTimer 컴포넌트에서는 framer-motion의 LazyMotion을 적용하여 번들 크기를 최적화하고 CLS(Cumulative Layout Shift)를 방지하기 위해 스켈레톤 UI를 추가하는 등 좋은 성능 개선이 이루어졌습니다. 한 가지 제안 사항으로, CountdownTimer에 추가된 스켈레톤 UI 코드에 중복이 있어 이 부분을 개선하면 유지보수성이 더 좋아질 것 같습니다. 자세한 내용은 개별 코멘트를 참고해주세요.
| // 레이아웃 시프트 방지를 위해 초기 렌더링 시에도 공간 확보 | ||
| if (!targetDate) { | ||
| return ( | ||
| <div className='flex items-end justify-center opacity-0'> | ||
| <div className='mx-2 flex flex-col items-center gap-2'> | ||
| <div className='bg-element-gray-lighter flex h-[50px] w-[50px] flex-col items-center justify-center rounded-xl'></div> | ||
| <span className='typo-caption-sm-medium text-text-subtler uppercase'> | ||
| Days | ||
| </span> | ||
| </div> | ||
| <span className='mb-9 text-2xl font-semibold text-[#D9D9D9]'>:</span> | ||
| <div className='mx-2 flex flex-col items-center gap-2'> | ||
| <div className='bg-element-gray-lighter flex h-[50px] w-[50px] flex-col items-center justify-center rounded-xl'></div> | ||
| <span className='typo-caption-sm-medium text-text-subtler uppercase'> | ||
| HOURS | ||
| </span> | ||
| </div> | ||
| <span className='mb-9 text-2xl font-semibold text-[#D9D9D9]'>:</span> | ||
| <div className='mx-2 flex flex-col items-center gap-2'> | ||
| <div className='bg-element-gray-lighter flex h-[50px] w-[50px] flex-col items-center justify-center rounded-xl'></div> | ||
| <span className='typo-caption-sm-medium text-text-subtler uppercase'> | ||
| Mins | ||
| </span> | ||
| </div> | ||
| <span className='mb-9 text-2xl font-semibold text-[#D9D9D9]'>:</span> | ||
| <div className='mx-2 flex flex-col items-center gap-2'> | ||
| <div className='bg-element-gray-lighter flex h-[50px] w-[50px] flex-col items-center justify-center rounded-xl'></div> | ||
| <span className='typo-caption-sm-medium text-text-subtler uppercase'> | ||
| Secs | ||
| </span> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
There was a problem hiding this comment.
CLS(Cumulative Layout Shift)를 방지하기 위해 스켈레톤 UI를 추가하신 것은 아주 좋은 접근입니다. Lighthouse 점수 개선에 큰 도움이 될 것 같습니다.
다만 현재 스켈레톤 UI 코드가 Days, HOURS, Mins, Secs 각 단위마다 반복되어 중복이 발생하고 있습니다. 이로 인해 향후 타이머의 디자인이나 구조가 변경될 때 여러 곳을 수정해야 하는 유지보수성의 문제가 생길 수 있습니다.
이러한 중복을 줄이기 위해 스켈레톤 UI를 별도의 컴포넌트로 분리하는 것을 제안합니다. 예를 들어, AnimatedNumberSkeleton과 같은 컴포넌트를 만들 수 있습니다.
function AnimatedNumberSkeleton({ label }: { label: string }) {
return (
<div className='mx-2 flex flex-col items-center gap-2'>
<div className='bg-element-gray-lighter flex h-[50px] w-[50px] flex-col items-center justify-center rounded-xl' />
<span className='typo-caption-sm-medium text-text-subtler uppercase'>
{label}
</span>
</div>
);
}이렇게 분리한 컴포넌트를 사용하면 if (!targetDate) 블록 내부 코드를 아래와 같이 더 간결하고 유지보수하기 쉽게 만들 수 있습니다.
if (!targetDate) {
const labels = ['Days', 'HOURS', 'Mins', 'Secs'];
return (
<div className='flex items-end justify-center opacity-0'>
{labels.map((label, index) => (
<React.Fragment key={label}>
<AnimatedNumberSkeleton label={label} />
{index < labels.length - 1 && (
<span className='mb-9 text-2xl font-semibold text-[#D9D9D9]'>:</span>
)}
</React.Fragment>
))}
</div>
);
}
요약
refactor: lighthouse 성능개선
구현 사항
📸 스크린샷
Need Review
Reference
📜 리뷰 규칙
Reviewer는 아래 P5 Rule을 참고하여 리뷰를 진행합니다.
P5 Rule을 통해 Reviewer는 Reviewee에게 리뷰의 의도를 보다 정확히 전달할 수 있습니다.