탐구하는 취르미

리액트에서 Swiper 라이브러리를 사용할 때, SCSS로 커스텀 스타일을 주려는데 스타일이 전혀 적용되지 않았던 경험, 혹시 있으신가요?이 문제는 SCSS 모듈(CSS Modules) 때문에 발생합니다. 그 이유와 해결 방법에 대해서 알아봅시다.문제의 원인: SCSS Modules의 클래스 네이밍 방식SCSS 모듈을 사용하면 클래스명은 로컬 스코프(local scope)로 변환됩니다. 즉, 아래처럼 작성한 .swiper 클래스는 실제 HTML에선 swiper_xyz123처럼 바뀝니다.하지만 Swiper 라이브러리는 HTML을 렌더링할 때 순수한 전역 클래스명인 .swiper를 사용합니다.결과적으로, SCSS 모듈에서 정의한 스타일은 Swiper의 클래스에 적용되지 않는 거예요. 해결 방법: :globa..

웹 사이트에서 이미지 갤러리나 캐러셀처럼 슬라이더가 필요하다면, Slick 플러그인으로 간단하게 구현할 수 있습니다.  slick - the last carousel you'll ever needslick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!kenwheeler.github.io더 자세한 내용은 Slick 공식 문서를 참조해 주세요. Slick 플러그인 설치 및 사용법1. Slick은 jQuery 기반 플러그인입니다. 아래 코드를 사용해 jQuery와 Slick을 설치하세요. 2. 슬라이더를 표시할 HTML 구조를 작성..

웹 개발에서 Swiper를 사용하면 간편하게 슬라이드 기능을 구현할 수 있지만, 브라우저 리사이징 중에 Swiper가 제대로 동작하지 않는 문제가 발생할 수 있습니다. 이를 해결하기 위해 아래와 같은 방법을 통해 Swiper를 안정적으로 유지할 수 있습니다. let eventSwiper; function initializeSwiper() { //Swiper 초기화 함수 const eventSwiper = new Swiper('.swiper', { loop: true, slidesPerView: 1, // spaceBetween: 10, pagination: { el: '.swiper-pagination', clickable: true, type: 'fraction', renderFraction: func..

https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 홈페이지 구축할 때, 자주 사용하는 UI 중 하나다 현업에서 slide, slider, carousel, swiper로 불린다 슬라이더 중에 가장 유명한 Swiper 모듈을 설치해 보자 1. swiper 설치하기 npm i swiper package.json에 설치된 swiper 모듈 2. 기본적인 html 뼈대는 swiper 공식 홈페이지 문서에서 그대로..