오늘의 오류

vue를 다뤄본지 일주일도 안되어 벌써 trouble을 겪게 되었고,
해당 부분을 해결하며 배운점을 기록한다..

vue를 다뤄본지 일주일도 안 돼서 트러블은 당연한건가 ..^^ ...

상황

기존 vue에서 구현된 carousel을
splide 라이브러리를 활용해 교체해야하는 상황이었다.

기존 vue에서 구현된 carousel은 vue-awesome-slider였고,
레거시코드이므로! vue3를 고려해 splide 라이브러리를 택하고
해당 라이브러리로 교체하려는 상황이었다.

그 러 나 !!!!!

새로고침을 했을 땐 carousel이 동작하지 않고,
hmr update가 발생했을 때에만! carousel이 동작하는 버그가 발생했다.

??????
아니 대체 왜
??????

더불어 console.log에도 splide가 마운트 되었다고 나오지만,
실제 슬라이드가 동작하지 않았다 ..

살려주소 ...

그럼 hmr과 새로고침의 차이가 뭔데?

• hmr: 개발중에 소스가 수정되면 전체 앱을 전체 재로드 없이 특정 컴포넌트만 다시 렌더링한다.
• 새로고침: 앱이 완전히 리프레시 된다.

📍 코드 수정 후

hmr update가 발생했을 때
지금까지 받은 데이터를 그대로 들고 있으면서 splide를 초기화하므로
=> 오 슬라이드가 있네! 정상 작동!

📍 새로고침 후

새로고침 후 앱이 리프레시 되면서
데이터, 상태도 처음부터 비어있게 되므로
=> 내용이 없다.. slides=0이야.. 동작하지 않을래!

원인

슬라이더에 내용에 해당하는 컨텐츠 데이터를 불러올 때,
비동기로 불러오고 있는 구조이다.

따라서 컴포넌트가 처음 마운트 될 때는 컨텐츠의 length가 0으로 나온다.

splide가 이 시점에 슬라이더 요소들을 찾으려해도
아무것도 찾을 수가 없으니 slides=0으로 인식해
슬라이더가 동작하지 않았다.

무한 콘솔로그를 찍어 찾은 원인이랄까 ..

해결과정

1. this.splide 자체가 null 값이라 의심

1. mounted 되는 시점에 console.log(this.splide) 값을 찍어봄
    → null 값이 아님
2. mounted 직후 DOM이 준비되지 않았을까.. 싶어 setTimeout으로 지연시켜 splide 초기화
    → 해결 안 됨

2. this.$nextTick() 적용으로 해결 시도

1. 해당 구문은 실제 DOM이 갱신된 직후에 특정 콜백을 실행하도록 예약하는 메서드
    → 렌더타이밍만 꼬였을 땐 이 구문을 활용하여 해결할 수 있지만, 실제 원인과 관련이 없엇으므로 해결 안 됨

3. 원인을 찾고, v-if 구문으로 컨텐츠가 1개 이상일 때만 carousel을 조건부 렌더링

1. 원인과 직접적인 관련이 있었으므로 이 방식으로 해결함

<CustomCarousel v-if="contents.length" :period="5">

마치며

vue를 처음 접하기도 하고, 처음에 splide 문제라고 생각해서 원인을 찾기까지 시간이 걸렸던 것 같다. 그래도 항상 배움이 있는 trouble shooting은 ㅈ..즐겁다..