MyTemplatePage 초기 랜더링 Layoutshift 개선 #706
Conversation
…, categoryList, tagList로 이름 변경, 불필요한 서스펜스 제거
frontend/src/api/templates.ts
Outdated
| if (keyword) { | ||
| queryParams.append('keyword', keyword); | ||
| } | ||
|
|
There was a problem hiding this comment.
놓친부분이라기보다는 백엔드에서 요구사항이 변경에 따른 변화입니다..!ㅎㅎ
이전에는 키워드가 없어도 반드시 쿼리에 추가해서 보내달라고했는데,
이번에 리팩토링하면서 키워드가 없을때 주지 않도록 해달라고 하여 변경하게 되었습니다!ㅎㅎ
| const { isChecking } = useAuth(); | ||
|
|
||
| if (isChecking) { | ||
| return null; | ||
| } |
There was a problem hiding this comment.
해당 suspense 처리만 해주어도 footer 관련 Layout Shift가 해결이 되나요??
There was a problem hiding this comment.
이 부분은 Header와 동일한 로직으로 변경한 것인데요, 로그인한 유저인지 아닌지 검사하는동안 footer를 null 로 처리했다가 나중에 return 해주었습니다.
(footer는 언제나 맨 하단에 위치하기 때문에 나중에 떠도 Layout Shift가 발생하지 않을 것이라 생각하였습니다.)
이렇게 하면 Layout Shift을 완벽하게 해결할 순 없지만 처음에 너무 빨리 렌더링 되는 것을 막아 깜빡이는 현상을 없앨 수 있었습니다.
There was a problem hiding this comment.
괜찮은 방법이라고 생각되네요! 더 좋은 방법이 떠오르지 않습니당
| handleDelete: () => void; | ||
| } | ||
|
|
||
| const ConfirmDeleteModal = ({ isDeleteModalOpen, toggleDeleteModal, handleDelete }: ConfirmDeleteModalProps) => ( |
There was a problem hiding this comment.
요 모달은 따로 서브 컴포넌트로 파일 분리 안해도 괜찮을까요?
There was a problem hiding this comment.
앗, 서브컨포넌트 분리하던거 다 reset 한줄 알았는데 아래 남아있었군요!
이 부분은 추후 MyTemplatesPage 리펙토링 할 때 함께 하겠습니다 👍
frontend/src/routes/router.tsx
Outdated
| <ErrorBoundary fallback={<NotFoundPage />}> | ||
| <Suspense | ||
| fallback={ | ||
| <Flex align='center' justify='center' css={{ width: '100vw', height: '100vh' }}> |
There was a problem hiding this comment.
요게 Flex에 width, height 속성이 사실 있을텐데..! Flex 컴포넌트 리팩토링이 시급해보이긴하네요
There was a problem hiding this comment.
오랜만에 Flex 를 사용하다보니...ㅎㅎ
추후에는 저희 함께 논의했던 것처럼 Flex 컴포넌트를 사용하지 않는 방향으로 리팩토링할 예정입니다!👍
(현재 이 컴포넌트도 LoadingFallback 컴포넌트를 새로 만들어서 대체하였습니다!!)
| const { isChecking } = useAuth(); | ||
|
|
||
| if (isChecking) { | ||
| return null; | ||
| } |
There was a problem hiding this comment.
괜찮은 방법이라고 생각되네요! 더 좋은 방법이 떠오르지 않습니당
⚡️ 관련 이슈
🪧 리펙토링 결과
- GLS 0.837 => 0.012 로 개선
📍주요 변경 사항
1. 템플릿 목록, 카테고리 목록, 태그 목록을 한 번에 불러오도록 하고, 서스펜스를 통해 감싸주어 Layoutshift를 개선
useTemplateCategoryTagQueries에서 3개의 요청이 모두 성공할 때 까지 기다림2. 템플릿 목록 요청시 keyword 있는 경우에만 params 에 추가하도록 변경
3.
-List로 용어 통일🎸기타
1. 현재 서스펜스가
MyTemplatePage자체를 감싸고 있기 때문에, 새로운 요청을 보낼때마다 페이지 전체가 fallback 이 보이는 현상이 있습니다. 개인적으로 이 부분은 사용자 경험이 좋지 않아 반드시 개선되어야 한다고 생각합니다.=> 추후 컴포넌트 계층 분리를 다시 한 후 서스펜스를 각각 감싸보면 어떨까 싶습니다.