Vue3-carousel 적용

쇼핑몰을 만드는 팀 프로젝트를 진행하며 swiper를 vue에서 조금 더 효율적으로 진행할 수 있는 Vue3-carousel패키지를 설치를 해 이용을 해보았다.

공식문서에 적혀있는 예제를 따라 아래와 같이 작성을 한 경우 slide영역 부분에 숫자 1,2,3 이 2초 간격으로 잘 작동하는 것을 확인할 수 있었다.

<template>
  <Carousel :autoplay="2000" :wrap-around="true">
    <Slide v-for='slide in 10' :key='slide'>
      <div class='carousel__item'>{{ slide }}</div>
    </Slide>

    <template #addons>
      <Pagination />
      <Navigation />
    </template>
  </Carousel>
</template>

문제상황

문제는 프로젝트를 거의 마무리 한 후 슬라이드 이미지 소스를 선택해 업로드 하는 부분에서 생겼다.🥲

첫번째

  data() {
    return {
      settings: {
        itemsToshow: 1,
        snapAlign: 'center',
        swiperSrc: [
          {
            imgsrc : 'slide1',
            imgtitle: 'BOSE',
            imgdes : '묵직한 베이스의 강자'
          },
          {
            imgsrc : 'slide2',
            imgtitle: 'XBOX',
            imgdes : 'SERIES X/S'
          },
          {
            imgsrc : 'slide3',
            imgtitle: 'SENHEISER',
            imgdes : '최고의 소재와 음질'
          },
          {
            imgsrc : 'slide4',
            imgtitle: '뱅앤올룹슨',
            imgdes : '프리미엄 명품 사운드'
          },
          {
            imgsrc : 'slide5',
            imgtitle: 'EGLOOCAM',
            imgdes : '해킹되지 않는 안전한 카메라'
          },
        ]
      },
    }

<Carousel
     :autoplay="2000"
     :wrap-around="true">
  <Slide
     v-for="slide in swiperSrc"
     :key="slide.imgsrc">
    <img :src="`../../assets/swiper/${slide.imgsrc}.jpg`">
    <div>
      <strong>{{ slide.imgtitle }}</strong>
      <span>{{ slide.imgsrc }}</span>
    </div>
  </Slide>

위와 같이 사용할 데이터 경로 및 상세 묘사를 swiperSrc라는 데이터로 초기화한 후 뿌려보아도 작동이 되지 않고 콘솔창에 다음과 같은 경고문구가 떴다.

분명 데이터 초기화도 했는데 무엇이 문제인지 감을 잡지 못해 <img :src="../../assets/swiper/${slide.imgsrc}.jpg">와 같이 경로를 표시하는 것의 문제는 아닌지 한참 고민과 씨름을 하게 되었다.🥲

첫번째 문제점은 데이터를 초기화하는 과정에 있었다.

  data() {
    return {
      settings: {
        itemsToshow: 1,
        snapAlign: 'center',
        swiperSrc: [{..},{..},..]
      }
    }
...

위 내용을 다시 확인해보면 swiperSrc를 settings라는 데이트 안에서 만들고 있는 것을 확인할 수 있다.

콘솔창에서 그렇게 반복해 이야기를 해주었지만 이미 내 머리속에 저긴 문제가 없는데? 라고 생각하고 나니 문제점을 확인하지 못했다. (스스로 판단내리지 말고 콘솔창에 안내를 잘 확인해야한다는 반성을 하게 되었다.👉👈)

두번째 문제

  data() {
    return {
      settings: {
        itemsToshow: 1,
        snapAlign: 'center',
      },
      swiperSrc: [{..},{..},..]
    }
...

위와 같이 수정을 하고 난 후에도 문제는 계속되었다.

이는<img :src="../../assets/swiper/${slide.imgsrc}.jpg"> 이미지 경로인해 발생하는 문제이었다.

만약 <img :src="../../assets/swiper/${slide.imgsrc}.jpg"> 와 같이 작성을 하는 경우 문제가 되지 않지만 위와 같이 ${}을 이용한 경우 최종적으로는 /assets/swiper/${slide.imgsrc}.jpg와 같이 절대경로를 기준으로 번들되기 때문이었다.

이 과정에서 새로운 정보도 접하고 정리를 하는 시간이 되었다.

assets폴더 하위에 이미지를 저장하고 불러다쓰는 경우 프로젝트를 진행하는 동안은 문제가 되지 않지만 나중에 빌드하고 배포를 할 때 이미지를 찾아오지 못한다고 한다. ( 자세한 내용은 vue-vite 이미지 동적 설정에서 확인할 수 있습니다.)