프론트엔드 개발자 엄성준 블로그

  • 홈
  • 태그

react-swiper 1

React-Swiper로 기존 Slider 성능 개선하기

AuctionWini Seller 사이트의 메인 페이지에서 사용된 Slider는 데이터를 map 함수로 반복 처리하여 1px씩 동적으로 계속 움직이는 방식으로 구현되어 있었습니다. 이러한 방식으로 구현된 Slider는 초기 로드 시 많은 자원을 소모하여 페이지 로딩 시간이 길어졌습니다. 이로 인해 사용자 경험이 저하되었고, Google Lighthouse 평가에서도 성능 점수가 낮게 나오는 문제가 발생했습니다.이 문제를 해결하기 위해 React-Swiper를 도입하여 Slider 문제를 개선했습니다.React-Swiper로 교체 전React-Swiper로 교체 후React-Swiper Code {5 {data.map((carInfo) => { return (..

지식 정리 📝 2024.07.25
이전
1
다음
더보기
프로필사진

꾸준함을 강점으로 삼고 있는 프론트엔드 개발자 엄성준 블로그입니다.

  • 카테고리 📂 (382) N
    • 코딩 테스트 풀이 🛠 (232)
    • 지식 정리 📝 (78) N
    • zero-base 프론트엔드 스쿨 ⛪️ (20)
    • 3월 협업 프로젝트(1석 4조) 👨‍👩‍👧‍👦 (19)

Tag

react, split(), 프론트엔드 스쿨, next.js, 프론트엔드 개발자 엄성준, sort(), Number(), 제로베이스 프론트엔드 스쿨, 제로베이스, autowini, 엄성준, 프론트엔드 개발자, 프론트엔드, String(), forEach(), indexOf(), 오토위니, join(), 프로그래머스, exceljs,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

방문자수Total

  • Today :
  • Yesterday :

꾸준함이 강점이자 자랑인 프론트엔드 개발자 엄성준 입니다.

  • Github
  • 📷 Instar
  • 🎨Portfolio

티스토리툴바