[Vue.js] 영화 검색 사이트 예제 - 15. 영화 검색 코드 리팩토링
영화 정보를 요청하는 부분을 따로 모듈화 하여 코드의 유지보수성과 보안성을 높일 계획이다.
따로 모듈화를 하게 된다면 OMDbAPI 키를 노출하지 않아도 될 뿐더러 재사용에도 용이하다.
1. _fetchMovie()
우선 movie.js 내부에서 사용할 것이므로 searchMovies 내부에 이름 앞에 언더바(_)를 붙인 _fetchMovie()를 선언한다.
이것은 영화정보를 요청하는 로직으로, 성공한다면 resolve문이 발동할 것이며 오류 발생시 reject로 에러 메세지를 반출한다.
그럼 기존에 영화검색을 요청하는 파트가 필요없어졌으니 정리한다.
_fetchMovie의 인자로 payload와 page 정보를 넘겨준다.
해당 페이지의 내용을 호출할 예정이므로 _fetchMovie()의 url을 수정한다.
추가요청 함수의 로직 또한 수정해준다.
이러면 searchMovies에서 객체 구조분해를 했던 부분 중 number를 제외한 나머지 부분은 사용할 필요가 없으므로 제거해준다.
2. 오류 제어
만약 데이터 요청을 할 때 parameter 없이 오로지 apikey만을 가지고 요청을 하게 되면,
논리상으로는 영화를 찾을 수 있는 정보가 없기에 오류가 발생해야 한다.
그러나 OMDbAPI에서는 이를 정상적인 객체 데이터로 반환한다.
(status 코드가 200이면 정상 응답이라는 의미. 실제로 res를 통해 console에 출력된 결과이며 err은 undefined이다.)
그러므로 이를 오류라고 판단할 로직을 만들어야 한다.
에러 데이터가 발생하게 되면, 위의 res 객체에는 Search 대신 Error 속성이 생기며 에러 메세지를 출력한다.
그러므로 _fetchMovie()에 다음과 같이 res.data.Error 속성에 값이 존재하면 reject하는 로직을 작성한다.
searchMovies의 내부 로직을 모두 잘라낸 뒤, try - catch문을 선언한다.
try문에는 잘라낸 로직을 모두 붙여넣고, catch문에는 위와 같은 코드를 작성한다.
위의 코드는 updateState라는 mutation을 호출하여 movies의 데이터를 비우고, 매개변수를 통해 넘어온 에러메세지를 message에 대입한다.
message에는 res.data.Error에 담겨있는 오류 문자열이 넘어오게 된다.
이를 화면에도 출력하기 위해 MovieList.vue의 Template에 div 요소를 추가한다.
