최적화 고군분투기

SWR을 사용한 데이터 캐싱

• axios를 사용한 캐싱도 가능한가요?

  평소에 비동기 통신을 Axios 라이브러리를 사용하여 구현하고 있는데, Axios에서는 어댑터(Adapter)를 통해 요청 핸들링을 커스텀 할 수 있는 방법을 제공하고 있습니다. Axios Extensions에서 제공하는 cacheAdapterEnhancer를 활용하면 API 요청을 캐싱하기 위한 어댑터를 매우 쉽게 생성 할 수 있습니다.

위의 방법으로 중복되는 요청을 캐싱하면 API 통신 시간을 줄여 더 빠른 화면 렌더링을 할 수 있습니다. 하지만 여기에는 함정이 있습니다. library 데이터는 동적인 데이터이기 때문에 항상 캐싱한 데이터만 사용해서 화면에 출력할 수는 없습니다. 다른 사용자가 작성한 새로운 데이터가 생길 수도 있기 때문입니다. 이런 문제점을 해결하기 위해서 SWR 개념을 도입했습니다.

사용자가 API에 요청을 보내면 우선 캐싱된 데이터를 먼저 준 후 비동기 통신으로 API 요청을 보냅니다. 이 후 응답이 오면 데이터를 캐시하고 새롭게 받은 데이터를 다시 한번 사용자에게 주는 방식입니다. 이렇게 되면 데이터가 변하지 않았다면 캐시의 효과를 누릴 수 있고. 데이터가 변했다면 바로 화면 데이터를 변경해주는 효과를 얻을 수 있습니다.

.

리플로우, 리페인트

• 애니메이션이 들어간 엘리먼트(PlayButton)의 position을 absolute로 지정 일반적으로 JS나 CSS로 width/height 또는 위치이동을 구현한 애니메이션은 초 단위로 상당한 Reflow를 불러일으킵니다. 이러한 경우에 해당 개체의 position 속성을 fixed 또는 absoute로 주게 되면 다른 요소들의 레이아웃에 영향을 끼치지 않으므로 페이지 전체의 Reflow 대신 해당 애니메이션요소의 Repaint만을 유발합니다.

.

이미지 사이즈 최적화

네이버 VIBE 서비스에서 제공하는 이미지 컨텐츠들은 pstatic.net이라는 별도의 서버를 거쳐 제공됩니다. 이는 CDN을 위한 것으로 추측됩니다. lighthouse를 통해 웹 성능을 확인하니 적절하지 않은 이미지 사이즈를 가진 이미지 파일들로 인해 성능이 저하됨을 확인하였습니다. 이를 해결하기 위해 resetImgSize라는 함수를 만들어 DB에서 가져온, pstatic.net을 거치는 이미지 url에서 'type=사이즈' 형태로 추가 or 수정함으로써 컴포넌트별 화면에서 보여지는 사이즈만큼 이미지사이즈를 조정하여 성능을 개선할 수 있었습니다.

.

리액트 훅을 사용한 렌더링 최적화

• useMemo를 사용한 변수 메모이제이션

  const trackIdList = useMemo(() => trackList.map(track => track.id), [trackList]);

• React.memo를 사용한 성능 최적화 relatedArtist, relatedPlaylist 는 한번 생성되면 또 렌더링이 될 필요가 없는 요소들이므로 React.memo로 감쌈으로써 한번 렌더링 뒤에는 리렌더링을 방지하여 최적화를 시도하였습니다.