2021.06.28

브랜치: main-page

🎉 TIL

1. 😊 vue-swiper 사용하기

: 'vue-awesome-swiper' 라이브러리를 사용하려고 했지만, 현재 프로젝트에 사용하고 있는 vue3는 지원하지 않아서 swiper 공식 사이트에 있는 'swiper/vue'를 사용했다.

• swiper/vue 컴포넌트 import 하기

// Script 영역
// 1.
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/swiper.scss';

data() {
  // 2.
  swiperOptions: {
    // 네비게이션
    navigation: true,

    // 페이지네이션
    pagination: true,

    slidesPerView: 6,
    slidesPerGroup: 6,
    spaceBetween: 10,
    // 반응형 breakpoints
    breakpoints: {
      375: {
        slidesPerView: 1,
      },
      425: {
        slidesPerView: 2,
        slidesPerGroup: 2,
      },
      768: {
        slidesPerView: 3,
        slidesPerGroup: 3,
      },
      1024: {
        slidesPerView: 4,
        slidesPerGroup: 4,
      },
      1400: {
        slidesPerView: 5,
        slidesPerGroup: 5,
      },
    },
  },
}

<!-- HTML 영역 -->
<swiper
	v-bind="swiperOptions"
	class="movie-swiper"
	@swiper="setSwiperRef"
>
  <swiper-slide
	v-for="(movie, index) in movies"
	:key="`${movie.id}-${index}`">
    <MovieItem :movieData="movie"></MovieItem>
  </swiper-slide>
</swiper>

• 1. swiper/vue 라이브러리를 사용하는데 필수적인 css파일과 컴포넌트를 import한다.
• 2. <swiper><swiper> 컴포넌트에 바인딩할 옵션을 객체 형태로 생성한다.
     <swiper :pagination="true"></swiper>와 같이 하나 하나 props를 적용할 수도 있지만,
     <swiper v-bind="swiperOptions"></swiper> vue props 객체 바인딩을 이용해서 옵션을 한번에 적용할 수 있다.

2. 😊 vue-swiper Navigation, Pagination 모듈 적용하기

• 공식문서 데모 소스

• 소스

// 1.
import SwiperCore, { Pagination, Navigation } from 'swiper';

// 2.
import 'swiper/components/pagination/pagination.scss';
import 'swiper/components/navigation/navigation.min.css';

// 3.
SwiperCore.use([Pagination, Navigation]);

// 4.
data() {
  swiperOptions: {
      // 네비게이션
      navigation: true,

      // 페이지네이션
      pagination: true,
  }
}

• 1. SwiperCore와 사용할 모듈을 import한다.
• 2. 사용할 모듈의 css 파일을 import한다.
• 3. SwiperCore.use 메소드를 이용해서 사용할 모듈을 설치한다. 여러개일 경우 배열을 통해 파라미터를 전달한다.
• 4. HTML을 작성할 필요 없이 Swiper 컴포넌트에 'navigation, pagination' 옵션을 적용하면 엘리먼트가 생성된다.

3. ✨✨ scoped css 적용안되는 이슈

: 🤣 MovieRow.vue 컴포넌트에서 'scoped css'를 통해서 swiper를 커스터마이징 했는데, 'swiper-pagination'의 스타일이 변경되지 않는 이슈가 발생했다.

: 두 개의 스타일 태그를 'MovieRow.vue' 파일에 생성해서 문제를 해결했다.
'scoped css'를 사용하면 'data-v-f3f3eg9'와 같은 값이 태그에 추가되는데, 이를 통해 현재 컴포넌트에만 스타일을 적용한다.
아래의 이미지와 같이 data-v-~가 추가된 태그는 'scoped css'가 잘 적용되었지만, 'swiper/vue'에 의해서 동적으로 추가된 엘리먼트인 'swiper-pagination'은 'scoped css'가 적용되지 않은 것을 확인할 수 있다.
현재 컴포넌트 단에서 사용할 'local css는 scoped css'로 '.swiper-pagination-bullets'과 같이 공통으로 수정해야할 스타일은 'global css'를 작성해서 스타일을 적용할 수 있었다.

• 이미지

• 오류를 수정한 CSS 소스

<style lang="scss">
// 🎉 swiper 제대로 잘 동작함
.swiper-pagination-bullets {
	background-color: red !important;
}
</style>

<style lang="scss" scoped>
.movie-row {
	// 슬라이더
	&__slider {
		.slider {
			// slider-container
			&-container {
				position: relative;
				padding: 0 4%;

				.movie-swiper {
					overflow: visible;
					padding-top: 10px;

               // 🎉 제대로 동작하지 않음
               .swiper-pagination-bullets {
                  background-color: red !important;
               }
				}
			}
		}
	}
}
</style>