1. DB와 연결하기

• 영화 상세 정보 API LINK : http://localhost:8000/api/v1/movies/{int: movieID}
• 영화 상세 정보 링크: http://localhost:8080/movies/:movieId

1) params에 위치한 영화 id를 이용하여 요청하기

created(){
    console.log(this.$route.params)  
  }

• 해당 페이지에 도착했을 때 this.$route.movieId로 영화 id에 접근할 수 있다는 것을 알 수 있다.
• 이 영화 id를 활용하여 api를 보낸다.
• 만약 DB에 저장되지 않은 영화 id면 404페이지로 이동시킨다.

actions: {
    // 영화 상세정보 vuex에 저장하기
    setMovieDetail({commit}, data){
      commit("SET_MOVIE_DETAIL", data)
    },

    // 영화 상세정보 요청하기
    fetchMovieDetail({dispatch}, movieId){
      axios({
        url: drf.movie.movieDetail(movieId),
        method: "get"
      }).then((response)=> {
        dispatch("setMovieDetail", response.data)
      }).catch((error)=> {
        if (error.response.status === 404){
          router.push({name: "NotFound"})
        }
      })
    }
}

해당 요청을 페이지를 created()할 때마다 한다.

2) 컴포넌트를 생성한다.

비동기적으로 데이터를 받아서 컴포넌트를 구성하다보면 데이터가 오기전에 랜더되어 undefined값을 받아오는 경우가 있다. (화면에는 영향을 끼치지 않지만, 콘솔로그에는 오류 로그가 뜬다.)

<template>
  <movie-detail-card
    v-if="imageUrl !== undefined"
    :image="imageUrl"
    width="100px"
    height="200px"
  ></movie-detail-card>
</template>

그런 상황을 막기 위해 위와 같은 조건을 주었다.