[Vue.js] 영화 검색 사이트 예제 - 27. Vue 플러그인(이미지 로드 이벤트)

영화 검색을 하게 되면 전체 검색 란은 로딩 애니메이션이 나오지만, 개별 포스터를 로딩하는 데에는 아직 없다.

로딩같은 것은 자주 사용하는 애니메이션이므로 이를 플러그인으로 만들어보자.

 

참조) 플러그인 | Vue.js (vuejs.org)

플러그인 | Vue.js

플러그인은 일반적으로 전역 수준의 기능을 추가하는 self-contained 코드이다. (함수 또는 객체)

즉, 플러그인을 사용하게 되면 $ 기호를 통해 전역에서 접근이 가능하다.

예를 들면, $store, $route, $router 등이 있다.

Loading 애니메이션 구현해보기

/src/components/Movieitem.vue

기본적인 로직을 먼저 작성해보고 해당 로직을 플러그인으로 사용할 예정.

load라는 이벤트가 발생하면, imageLoading을 false로 바꾸어 로딩 이벤트를 종료시킨다.

여기서 주의할 점은, 콜백 함수를 사용하므로 화살표 함수를 사용해야 this를 통해 imageLoading에 접근할 수 있다.

 

Loader 사용하기

여기서 init()을 mounted에 사용하는 이유는, HTML 요소에 연결하는 로직이 있기 때문이다.

 

결과

플러그인으로 제작하기

/src/plugins/loadImage.js 생성

MovieItem.vue에 작성했던 로직

플러그인

Promise 객체를 이용하여 load 이벤트가 발생하면, resolve를 발생시켜 비동기 완료 시점을 잡아준다.

플러그인 사용하기

/src/main.js

플러그인을 사용하기 위해 main.js에서 선언해준다.

/src/components/MovieItem.vue

결과

로드 이미지가 제대로 출력된다.

 

다른 곳에도 적용해보기

/src/routes/Movie.vue - HTML

수정 전

수정 후

여기서 주의할 점은, Loader에 absolute를 사용했으므로, 그 상위 요소인 .Poster에 position 값이 들어있는지를 확인해야 한다.

/src/routes/Movie.vue - Script

url을 변경하여 요소에 할당이 되므로, 사이즈 변경 알고리즘에 포함한다.

수정 전

수정 후

await this.$loadImage를 사용하지 않은 이유는, 변경된 주소를 src에 담아서 넘겨주어야 하기 때문이다.

만일 await를 사용했다면, 주소가 넘어가지 않아 load 이벤트가 발생하지 않고, 무한 대기 현상이 발생할 것이다.

따라서 .then을 사용하여 src는 src대로 넘어가고, 로딩 이벤트는 로딩 이벤트대로 완료될 수 있도록 한다.

 

완료