프리온보딩 | 니콘내콘 과제 리팩토링하기

noopy·2022년 3월 1일
0

프리온보딩

목록 보기
6/6

니콘내콘 과제를 간단히 리팩토링하며 겪은 점을 회고했다.

메인 페이지 Swiper 렌더링 이슈

Swiper가 자동으로 어느 정도 넘어가고나서 메인 페이지가 재렌더링 될 경우 처음으로 돌아가는 애니메이션이 보이는 오류가 존재한다.
브라우저가 재렌더링되면서 처음인덱스로 돌아갈 때 애니메이션이 적용되서 생기는 오류로 추정된다. 이는 초기화 시에 애니메이션을 끔으로써 해결하였다.

해결 전초기화 시 애니메이션 off

getServerSideProps => CSR로 변경

데이터를 동적으로 받는 페이지는 getServerSideProps를 사용했는데, 너무너무 느려서 CSR로 변경하였다. 페이지 진입뿐 아니라, NavigationBar에서 렌더링하는 속도 차이가 많이 나는 것을 확인할 수 있다.
땡철이 페이지는 데이터 fetch 자체가 느려서 로딩화면을 추가해야겠다.

getServerSidePropsClientSideRender

ttfb 개선(?)

카테고리 페이지 진입 시, CSR로 변경한 덕분에 따르게 렌더링이 되지만 땡철이 카테고리에서 ttfb가 느린 것을 발견했다.

useEffect 내부에서 ttfb가 오래걸리는 함수를 먼저 작성해서 해당 작업이 끝나야 다음 데이터를 불러와 화면 렌더링이 같이 늦어지는 결과가 발생했다. 이는 상대적으로 ttfb가 적은 함수를 위로, 오래걸리는 함수를 아래로 배치해 대기 없이 빨리 끝나는 작업이 먼저 fetch 되도록 바꾸었다.

ttfb 개선 전ttfb 개선 후

사실 ttfb 자체를 개선했다기 보단 로직 순서를 변경했다가 더 정확할 것 같다 ㅎㅎ. 클라이언트에서 데이터 fetch로 인한 ttfb가 느려지는 것을 개선할 방법이 있을까?

기존 navigation bar는 active된 DOM 요소를 표시만 해줄뿐 스크롤 위치를 기억하진 않아서 첫 렌더링 때 acitve된 DOM 요소의 스크롤 위치로 이동시키는 작업을 추가했다.

스크롤 반영 X스크롤 반영 O
profile
💪🏻 아는 걸 설명할 줄 아는 개발자 되기

0개의 댓글