[이미지 갤러리] 웹 성능 최적화까지 해보자-14

이번에는 이미지 갤러리 서비스를 최적화해볼 것이다.

 

초기 페이지에서는 여러 이미지들을 그리드 형태로 보여준다.

이미지 위 필터링 버튼도 있고, 특정 이미지 클릭 시 클릭한 이미지가 모달 창으로 나타난다.

모달의 배경 색 또한 이미지 색상과 비슷한 색으로 맞춰지도록 했다.

 

이번에는 다음과 같은 기법을 학습할 것이다.

• 이미지 지연 로딩
• 레이아웃 이동 피하기
• 리덕스 렌더링 최적화
• 병목 코드 최적화

 

이미지 지연 로딩

이전에는 Intersection Observer API를 이용했는데 이번에는 npm에 등록되어 있는 이미지 지연 로딩 라이브러리를 이용해서 적용해볼 것이다.

 

레이아웃 이동 피하기

레이아웃 이동이란 화면상의 요소 변화로 레이아웃이 갑자기 떨리는 현상을 말한다.

특히 이미지 로딩 과정에서 레이아웃 이동이 많이 발생한다.

사용자 경험에 좋지 않은 영향을 줄 수 있기 때문에 분석하고 해결해보자.

 

리덕스 렌더링 최적화

리덕스를 사용하다보면 다양한 성능 문제가 발생하기도 하는데 이를 효율적으로 해결하는 방법을 배워보자.

 

병목 코드 최적화

이번에는 로직을 개선해서 최적화할 뿐만 아니라 메모이제이션이라는 방법을 적용해서 성능 문제를 해결해볼 것이다.

 

분석 툴 소개

이전에 사용해본 Network 패널, Performance 패널, Lighthouse 패널에 더해 React Developer Tools(Profiler)를 사용해볼 것이다.

React Developer Tools는 Profiler 패널과 Components 패널로 나뉘는데 우리는 Profiler 패널을 사용할 것이다.

이 툴은 리액트 프로젝트를 분석해서 얼마만큼의 렌더링이 발생했고 어떤 컴포넌트가 렌더링되었는지, 어느 정도의 시간이 소요됐는지 플레임 차트로 보여준다.