[Vue.js] 영화 검색 사이트 예제 - 19. 에러 메세지 출력과 로딩 애니메이션

에러 메세지 출력

에러메세지가 나온 뒤 새롭게 검색하게 되면 에러 메세지와 영화 검색 결과가 같이 나오는 오류가 발생한다.

이를 방지하고, 직관성을 위해 다음과 같이 message의 초기값을 설정한다.

그리고 영화 검색이 시작하면 message를 빈 문자열로 바꾸는 과정을 추가한다.

좀 더 깔끔한 디자인을 위해 MovieList.vue에서 다음과 같은 속성들을 추가한다.

이후 css에서 no-result에 대한 css 속성값을 추가한다.

결과

 

로딩 애니메이션 출력

참조) Spinners · Bootstrap v5.0 (getbootstrap.com)

Spinners

검색이 완료되기 전까지 로딩 애니메이션을 출력할 계획이다.

 

로딩 애니메이션 요소를 집어넣어서 제대로 동작하는지 확인한다.

위의 애니메이션 요소는 검색이 진행중일 때 (로딩중일 때) 만 노출되도록 하고싶으니 v-if를 사용한다.

v-if를 사용하기 위해 movie.js의 state에 loading이라는 변수를 선언하고 movie.js에 연결한다.

movie.js

MovieList.vue

검색을 시작하면 로딩을 true로 바꾸고, 검색이 종료되면 로딩을 false로 바꿔주어야 한다.

오류가 발생하든, 제대로 결과가 출력되든 로딩은 끝난 것이므로 finally를 사용한다.

맨 첫줄의 if문은, 로딩이 되는 도중 여러번 검색 요청이 실행되지 않도록 막아주는 구문이다.

 

완성