[Vue] Vue 정리하기(11) - Pinia, axios, typescript 사용해서 TMDB에서 영화 데이터 가져와서 v-for 로 화면에 보여주기

오늘 할거는 제목 그대로이다

 

pinia와 typescript가 들어가서 카테고리 분류가 좀 애매하긴한데 vue에 정리를 해보겠다

 

이 전글

https://moooostory.tistory.com/entry/Vue-Vue-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B010-Pinia-aixos

[Vue] Vue 정리하기(10) - Pinia, axios

여기서 tmdb에서 영화 데이터 불러와서 콘솔창에 출력하는거 까지는 했는데

거기서 한걸음 더 나아가서 컴포넌트로 가져와서 화면에 보여주는거까지 오늘 해보겠다

일단 스토어에

import axios from 'axios'
import { defineStore } from 'pinia'
export const movieStore = defineStore('movie',() => {

  const getMovieData = () => {
    axios({
      method: "get",
      url: "https://api.themoviedb.org/3/movie/popular?language=en-US&page=1",
      headers: {
        Authorization: 
        //자신의 api 키
        ,
      },
    })
    .then((response) => {
      console.log(response.data)
    })
    .catch((err) => {
      console.log(err)
    })
  }

  return {getMovieData}  
})

 

이런식으로 axios를 사용하여 영화 데이터를 가져오는 action을 만들어줬고

 

<template>
    <div>
        <v-btn @click="getMovie">영화데이터 가져오기</v-btn>
    </div>
</template>
<script lang="ts" setup>
import {movieStore} from '@/store/movie'
// import { storeToRefs } from 'pinia';
const store = movieStore()
const getMovie = () => {
    store.getMovieData()
}
</script>
<style lang="">
    
</style>

 

컴포넌트에서는 일단 버튼을 클릭을 통해 콘솔창에 영화 데이터를 출력해보았다.

 

 

여기까지 왔다면 일단 api 통신은 성공 한거고 이제 

 

state에 담아서 컴포넌트로 보낸뒤에 v-for를 사용해서 화면에 보여주는거까지 해보겠다

import axios from 'axios'
import { defineStore } from 'pinia'
import { ref } from 'vue'
export const movieStore = defineStore('movie',() => {
  const movies = ref([])
  const getMovieData = () => {
    axios({
      method: "get",
      url: "https://api.themoviedb.org/3/movie/popular?language=en-US&page=1",
      headers: {
        Authorization:
     	//자신의 api 키
      },
    })
    .then((response) => {
      console.log(response.data.results)
      movies.value = response.data.results
    })
    .catch((err) => {
      console.log(err)
    })
  }

  return {getMovieData, movies}  
})

store 에서

const movies = ref([])

빈 배열을 state에 넣어주고

movies.value = response.data.results

를 통해서 값을 넣어주었다

 

컴포넌트에서는

<template>
    <div v-for="movie in movies" :key="movie">
        <h1>{{ movie.title }}</h1>
        <img :src="`https://image.tmdb.org/t/p/w200/${movie.backdrop_path}`">
    </div>
</template>
<script lang="ts" setup>
import {movieStore} from '@/store/movie'
import { storeToRefs } from 'pinia';
const store = movieStore()
const getMovie = () => {
    store.getMovieData()
}
getMovie()
const {movies} = storeToRefs(store)
</script>
<style lang="">
    
</style>

store에 있는 action을 실행해주고

movies를 가져와서 

v-for로 title과 이미지만 화면에 보여주도록 코드를 작성하였다

(data에 영화 정보가 많이 넘어오는데 그냥 간단히 title과 backdrop_path 만 사용하겠다)

이런식의 결과를 얻을수 있었고 여기까지는 뭐 잘된다 치자

 

하지만

컴포넌트에서 저런식으로 에러메시지가 뜬다

사실 그냥 실행하는데에는 문제가 없지만

참 거슬린다 ㅎ

 

타입스크립트쪽 문제인것 같은데

아마 movies에서 타입을 지정 안해줘서 title 속성이 없다고 에러가 나는것 같다 

그래서 store 쪽에서

인터페이스로 타입을 지정해주고

movies 의 타입을 명시해줬다

여기서 movieForm[]은 

movieForm객체가 들어가있는 Array라는 뜻이다

(Array<movieForm> 과 같다)

이렇게 작성을 해주면

 

짜잔

빨간줄이 사라진것을 확인할 수 있다

 

그냥 api 받아와서 콘솔창에서 출력할때는 문제가 없었는데

 

받아온 데이터를 컴포넌트에서 보여주려고 하니까 타입 지정에서 에러가 생겨서 해결해 보았다

 

지금은 state에 데이터를 저장한 뒤에 컴포넌트로 넘기는데

 

더 간단한 방법이 있을것 같은데 혹시나 알고있다면 댓글을 남겨주기 바란다

 

쨌든 오늘은 tmdb에서 axiop를 통해 Get으로 데이터를 받아와서

 

그 데이터를 컴포넌트에서 v-for를 통해서 보여주는것을 해보았다

 

부디 도움이 되셨기를~