Vue에서 Slick 슬라이드가 새로고침 후만 적용되고, 페이지 이동 후에는 적용되지 않는 문제 해결하기
🔍 문제 상황
Vue는 **SPA(Single Page Application, 단일 페이지 애플리케이션)**라서 페이지를 이동해도 전체 HTML이 새로고침되지 않고 필요한 부분만 변경됨.
이 때문에 slick.js가 메인 페이지에서 최초 한 번만 실행되고, 다른 페이지로 이동 후 다시 돌아오면 슬라이드가 깨지는 문제가 발생했음.
💡 문제 원인
- slick.js는 페이지가 처음 로딩될 때 한 번만 실행되도록 되어 있음.
- Vue에서 다른 페이지로 이동 후 돌아오면 mounted()가 다시 실행되지 않음 → slick이 다시 초기화되지 않음.
- 이로 인해 슬라이드가 풀려서 모든 배너가 펼쳐진 상태로 보이는 문제 발생.
✅ 해결 방법
📌 해결 목표
- 페이지 이동 후 메인 페이지로 돌아오면 slick이 다시 적용되도록 설정해야 함.
- 슬라이드 중복 적용 방지를 위해 페이지 이동 시 slick을 제거하는 방식도 고려.
🔹 1️⃣ MainHome.vue에서 slick을 다시 적용하도록 설정
👉 MainHome.vue 파일 수정 (slick.js 적용)
Vue 3의 Composition API를 사용하여 컴포넌트가 마운트될 때 slick을 초기화하도록 설정했음.
<!-- src/views/MainHome.vue -->
<template>
<div class="section_banner">
<div class="slide_banner banner1">
<div class="inner_slide">
<strong>네이쳐기어 신규 행사</strong>
<p>
런칭 기념<br />
한 달간 텐트 구매 시 알전구 증정<br />
2024-07-31 ~ 2024-08-31
</p>
<span>※리뷰 작성 필수※</span>
</div>
</div>
<div class="slide_banner banner2">
<div class="inner_slide">
<strong>네이쳐기어 회원가입 혜택</strong>
<p>
회원가입 쿠폰 증정<br />
10% 할인 쿠폰 증정<br />
10만원 이상 구매 시
</p>
<span>※첫구매 이후부터 사용가능※</span>
</div>
</div>
<div class="slide_banner banner3">
<div class="inner_slide">
<strong>네이쳐기어 특별 이벤트</strong>
<p>
캠핑 용품 대할인<br />
모든 상품 20% 할인<br />
2024-08-01 ~ 2024-08-15
</p>
<span>※선착순 100명 한정※</span>
</div>
</div>
</div>
</template>
<script>
import { onMounted, nextTick, onBeforeUnmount } from 'vue';
import $ from 'jquery';
export default {
name: 'MainHome',
setup() {
// ⭐️ 메인 페이지가 마운트될 때 slick을 다시 적용함
onMounted(() => {
nextTick(() => {
$(".section_banner").slick({
dots: true,
infinite: true,
speed: 500,
fade: true,
cssEase: "linear",
autoplay: true,
autoplaySpeed: 3000
});
});
});
// ⭐️ 페이지 이동 시 slick을 제거해서 중복 실행을 방지함
onBeforeUnmount(() => {
$(".section_banner").slick("unslick");
});
}
};
</script>
🔹 2️⃣ 적용 방식 설명
📍 이 코드가 어디에 들어가는지
- MainHome.vue (메인 페이지)에서만 적용하면 됨.
- MainHome.vue는 라우터에서 / 경로를 담당하는 페이지.
- src/views/MainHome.vue에 위의 코드를 적용하면 됨.
🔹 3️⃣ 코드 설명
✅ 1) onMounted()에서 slick 슬라이드 초기화
onMounted(() => {
nextTick(() => {
$(".section_banner").slick({
dots: true,
infinite: true,
speed: 500,
fade: true,
cssEase: "linear",
autoplay: true,
autoplaySpeed: 3000
});
});
});
- onMounted() → 컴포넌트가 화면에 추가될 때 실행됨.
- nextTick() → Vue에서 DOM이 완전히 렌더링된 후 실행되도록 보장함.
- 이제 페이지가 처음 로드될 때 slick이 정상적으로 적용됨! 🚀
✅ 2) onBeforeUnmount()에서 slick 제거
onBeforeUnmount(() => {
$(".section_banner").slick("unslick");
});
- 다른 페이지로 이동할 때 slick을 제거하는 역할.
- 슬라이드가 중복 적용되는 걸 방지해서 메모리 누수를 막아줌.
🎯 결론
🔹 문제 원인: Vue는 SPA이기 때문에 페이지를 이동해도 slick이 재적용되지 않음.
🔹 해결 방법: mounted()에서 메인 페이지로 돌아올 때 slick을 다시 적용해주고,
🔹 최적화: onBeforeUnmount()에서 slick을 제거해서 중복 실행을 방지.
💡 이제 페이지 이동 후 다시 메인으로 돌아와도 slick 슬라이드가 정상적으로 동작함! 🚀
[추가이슈1]
위와같이 적용을 했는데 추가적인 에러가 발생했다.
ERROR Failed to compile with 2 errors 11:22:02 PM
[eslint]
/Users/hyosukjung/git/vue-first-app/vue_project/src/views/MainHome.vue
142:31 error 'onBeforeUnmount' is defined but never used no-unused-vars
✖ 1 problem (1 error, 0 warnings)
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
error in ./src/views/MainHome.vue?vue&type=script&lang=js
Module not found: Error: Can't resolve 'jquery' in '/Users/hyosukjung/git/vue-first-app/vue_project/src/views'
ERROR in ./src/views/MainHome.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/MainHome.vue?vue&type=script&lang=js) 2:0-23
Module not found: Error: Can't resolve 'jquery' in '/Users/hyosukjung/git/vue-first-app/vue_project/src/views'
@ ./src/views/MainHome.vue?vue&type=script&lang=js 1:0-200 1:0-200 1:201-390 1:201-390
@ ./src/views/MainHome.vue 2:0-59 3:0-54 3:0-54 6:49-55
@ ./src/router/router.js 3:0-36 12:13-17
@ ./src/main.js 10:0-37 16:8-14
ERROR in [eslint]
/Users/hyosukjung/git/vue-first-app/vue_project/src/views/MainHome.vue
142:31 error 'onBeforeUnmount' is defined but never used no-unused-vars
✖ 1 problem (1 error, 0 warnings)
webpack compiled with 2 errors
chatGPT에게 물어보니 에러의 원인은 두개 였다.
1️⃣ 'onBeforeUnmount' is defined but never used (ESLint 경고)
이 에러는 onBeforeUnmount()가 선언되었지만 사용되지 않아서 발생하는 ESLint 경고야.
→ 해결 방법: 정확한 위치에 사용했는지 확인하고, 필요 없으면 제거하면 됨.
2️⃣ Module not found: Error: Can't resolve 'jquery'
이 에러는 jquery가 설치되지 않아서 발생한 문제야.
→ 해결 방법: jquery를 프로젝트에 설치하면 해결됨.
여기에서 [1]번 에러의 경우 내가 onBeforeUnmout 를 사용하지 않는데 코드를 복붙하는 과정에서 넣게 되어 발생된 부분이기 때문에 그것만 삭제해서 해결했다.
그 다음 [2]번 에러는 jquery가 설치되지 않아서 발생한 에러라고 하는데, 나같은 경우 현재 cnd으로 jquery를 불러와 사용하기 있기 때문에 어떻게 해결하는지 확인하니 npm 설치를 통해 package.json 파일에 jquery가 dependencies로 추가하면 되는 부분이었다.
npm install jquery
이렇게 설치를 하니 package.json 파일 내 dependencies에 jquery가 추가되었다.
[추가이슈2]
자, 이제 진짜 다 됐다고 생각하고 다시 실행을 해봤다.
그런데 또 추가 문제가 발생했다.
ERROR
jquery__WEBPACK_IMPORTED_MODULE_1___default(...)(...).slick is not a function
TypeError: jquery__WEBPACK_IMPORTED_MODULE_1___default(...)(...).slick is not a function
at eval (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/MainHome.vue?vue&type=script&lang=js:13:74)
이 에러에 대해서 chatGPT에게 물어보니
이 에러는 $(...).slick()을 실행하려고 했는데, slick()이 jQuery에서 인식되지 않는다는 의미라고 한다.
그리고 이를 해결하기 위해서는 slick-carousel을 설치해야 된다고 한다.
1️⃣ slick-carousel이 설치되었는지 확인
slick-carousel이 제대로 설치되지 않았거나 빠져 있을 가능성이 있음.
→ 설치 명령어 실행
npm install slick-carousel
이렇게 설치명령어를 통해 설치하니 package.json에서 slick-carousel이 추가되었다.
이렇게 하고 나니 드디어 해결이 됐다.
'IT개발 > 이슈관리' 카테고리의 다른 글
| [Vue] Vue 프로젝트에서 CSS, JS 파일 적용하기 - 오류(해결진행중) (0) | 2025.02.10 |
|---|---|
| 스프링부트(Spring Boot) 타임리프(Thymeleaf) sec:authorize 적용 안됨 (0) | 2025.01.24 |
| 포트 충돌 문제(해결) (0) | 2025.01.24 |
댓글