FEDev Story

문제점 Swiper.js를 사용하여 슬라이드 적용시 좌우로 무한루프를 적용하기 위해 아래와 같이 옵션을 설정할 수 있다. {loop:true] 문제는 무한 루프를 적용하기 위해 Swiper.js는 DOM을 좌우로 복사하게 된다. 즉 카테고리가 4개라면 다음과 같이 DOM을 복사한다. 카테고리 4개 * 3 = 12개의 DOM 생성 복사된 DOM 자체는 무겁지 않으나 로딩시 데이트를 한번에 불러와 복사된 DOM에 적용하는 과정에서 성능 저하를 가져오게 된다. 카테고리가 많아질 수록 성능이 더 저하될 수 밖에 없는 구조이다. 스킨케어 메이크업 바디/헤어/향수 가방/지갑 해결책 모든 데이터를 한번에 불러오지 않도록 Ajax를 적용하여 현재 활성화된 탭에 대해서만 데이터를 불러온 후 슬라이드 될 때마다 동적으로 ..