lazy 썸네일형 리스트형 JavaScript - Lazy Loading 웹 페이지를 이용하는 사용자는 웹 사이트의 로딩 시간과 성능에 대해서 높은 기대치를 가지고 있다. 그렇기 때문에 로딩속도가 짧고 성능이 높은 사이트의 경우에는 많은 이용자가 방문을 하게 되지만 로딩 속도가 느리거나 컨텐츠의 확인에 시간이 걸리는 사이트의 경우 이용자의 이탈률과 불편함이 높아지게 된다. 이러한 문제를 해결하고 전반적인 사용자의 경험을 개선하기 위한 방법 중 하나로 Lazy Loading을 사용한다. Lazy Loading이란? Lazy Loading이란 웹 페이지의 성능을 최적화하기 위한 기법 중 하나로, 페이지의 로딩 속도를 빠르게 만들기 위해 필요한 리소스(예: 이미지, 스크립트, 동영상 등)를 초기 페이지 로딩 시에 모두 로드하는 것이 아니라 스크롤을 통해 해당 이미지가 화면에 나타나.. 더보기 react-virtuoso 사용해서 리스트 렌더링 최적화하기 개인 스터디 목적으로 만든 포켓몬을 활용한 도감 사이트가 있다 포켓몬의 정보를 보고 어떤 능력치와 타입을 가지고 있는지, 약점은 무엇인지 알 수 있는 진짜 도감 같은 사이트를 만들고 싶어서 스터디, 내가 주관적인 입장에서 게임을 할 때 쉽게 찾아보고 이용하려는 목적으로 만들게 되었다 그동안 스터디 목적으로 여러 프로젝트를 구성해 봤지만 혼자 개발을 하면서 많은 데이터를 이용해서 사이트를 만들어본 적은 처음이라 여러 문제를 겪어보았고 이번에 부딪힌 문제도 이런 부분에서 처음 겪는 이슈였다 문제점 메인 화면은 포켓몬의 정보를 카드 형식으로 보여주는 화면인데 처음 개발을 시작할 때는 1세대의 포켓몬만을 이용하여 화면을 구성했기 때문에 성능에 대한 이슈는 없었는데 모든 포켓몬의 정보를 가져오니 1000개가 넘는.. 더보기 이전 1 다음
