[Vue.js] 영화 검색 사이트 예제 - 21. 단일 영화 상세 정보 가져오기

참조) OMDb API - The Open Movie Database

OMDb API - The Open Movie Database

이제 홈페이지는 다 만들었으니, 상세 페이지 만들기를 할 차례다.

기존에는 검색할 때 by Search 항목의 parameters를 통해 검색했지만, 이제는 by ID or Title을 이용한다.

기존에 작성했던 searchMovies() 는 여러 영화의 정보를 가져오는 함수이다.

따라서 새로운 함수 searchMovieWithId를 선언한다.

id값만을 가지고 _fetchMovie()를 돌려야하므로 3항연산자를 이용해 url을 동적으로 만들어준다.

이 로직은 Movie.vue에서 동작시킬 것이다.

searchMovieWithId의 매개변수는 원래 다음과 같은 구조다.

그런데 여기서 사용하는 값은 id 하나이므로 이를 굳이 객체 구조분해를 할 필요가 없으므로 다음과 같이 사용해도 된다.

 

Movie.vue를 클릭하면 디폴트 페이지로 이동하는데, url주소 뒤에 영화의 id값을 붙여서 페이지를 구성할 것이다.

먼저, src/routes/index.js에서 movie의 path를 /movie/:id로 바꿔준다.

이렇게하면 id라는 변수에 의해 동적으로 페이지를 만들게 된다. (id는 다른 이름으로 사용해도 된다)

 

Movie.vue에 다음과 같은 메소드를 정의하여 movie.js의 searchMovieWithId 메소드를 실행시킨다.

이 때 this.$route.params.id는 위의 route/index.js에서 지정한 /:id를 의미한다.

 

헤더 상단에 movie를 눌렀을 때 기본적으로 이동 될 페이지를 설정한다.

frozen2의 imdbID를 기본 페이지로 설정해봤다.

 

시스템 콘솔 창에서 this.$route의 정보를 확인할 수 있다.

Header.vue에서는 Movie를 눌렀을 때 /movie/tt4520988로 이동하라고 지시했고

이에 대한 정보를 routes/index.js가 :id에 tt4520988을 할당했다.

그리고 해당 id를 Movie.vue의 this.$store.dispatch에서 넘겨주어 그 id로 검색이 된 것을 확인할 수 있다.

 

이제 movie.js에서 검색된 데이터를 사용하기 위해 변수를 하나 준비한 뒤 저장하는 로직을 작성한다.

theMovie라는 객체 데이터 변수를 추가한 뒤, res.data를 그곳에 담는다.

추가로 loading 개념을 여기에도 도입하여 중복실행이 일어나지 않도록 방지한다.

searchMovieWithId가 실행되면, 일단 theMovie를 한번 초기화하여 이전 실행결과가 영향을 미치지 않게 만든다.

 

이제 받아온 정보(theMovie)를 활용하여 화면에 뿌려주는 작업만 남았다.

그 작업은 다음 시간에..