[Vue] Youtube API를 활용하여 Youtube App을 만들어 보자 ⚒️

 

🔥 주요 Keypoint ❕ 상위 컴포넌트 - 하위 컴포넌트 연결 /  props & emit

 

1️⃣ App

<template>
  <div id="app">
    <h1>App.vue</h1>
    <TheSearchBar @input-change='onInputKeyword'/>
    <br>
    <VideoDetail :video='selectedVideo' />
    <VideoList :videos='videos' @select-video='selectVideo'/>
  </div>
</template>

<script>
import axios from 'axios'
import TheSearchBar from '@/components/TheSearchBar.vue'
import VideoList from '@/components/VideoList.vue'
import VideoDetail from '@/components/VideoDetail.vue'
const API_URL = 'https://www.googleapis.com/youtube/v3/search'
const API_KEY = '발급받은 API Key'
export default {
  name: 'App',
  components:{
    TheSearchBar,
    VideoList,
    VideoDetail
  },
  data(){
    return{
      inputValue: null,
      videos:[],
      selectedVideo: null
    }
  },
  methods:{
    onInputKeyword(inputText){
      this.inputValue=inputText
      const params = {
        key: API_KEY,
        part: 'snippet',
        type: 'video',
        q: this.inputValue,
      }
      axios({
        method:'get',
        url: API_URL,
        params
      })
      .then(res => {
        this.videos = res.data.items
        console.log(this.videos)
      })
      .catch(err => {
        console.log(err)
      })
    },
    selectVideo(video){
      this.selectedVideo = video
    }
  }
}
</script>

<style>
#app{
  margin:50px;
}
</style>

💫 searchBar로부터 이벤트 청취 ➡️ 입력값과 API KEY로 params 구성 ➡️ axios로 요청

💫 요청 결과 전달 받은 영상들을 videos 배열에 넣어주기 ➡️ 하위 컴포넌트인 VideoList에 props로 전달

💫 VideoList로부터 이벤트 청취 ➡️ 선택한 비디오 props로 VideoDetail에 전달

 

2️⃣ searchBar

<template>
  <div id="search">
    <h1>검색</h1>
    <input type="text" @keyup.enter='searchInput'>
  </div>
</template>

<script>

export default {
  name: 'TheSearchBar',
  methods:{
    searchInput(event){
      this.$emit('input-change', event.target.value)
    }
  }
}
</script>

💫 input 박스에 작성 후 엔터 ➡️ 부모 컴포넌트(App)에게 이벤트로 입력한 값 전달

 

3️⃣ VideoList

<template>
  <div>
    <h1>VideoList</h1>
    <ul>
      <VideoListItem v-for="video in videos" :key="video.id.videoId" :video='video' @select-video='selectVideo'>
      </VideoListItem>
    </ul>
  </div>
</template>

<script>
import VideoListItem from './VideoListItem.vue'
export default {
  name: 'VideoList',
  components:{
    VideoListItem
  },
  props:{
    videos:{
      type:Array,
      required:true
    }
  },
  methods:{
    selectVideo(video){
      this.$emit('select-video', video)
    }
  }
}
</script>

💫 VideoListItem의 이벤트 청취 ➡️ App으로 이벤트 전달

💫 하위 컴포넌트인 VideoListItem으로 for문 ➡️ v-for에는 v-vind:key 필요

 

4️⃣ VideoListItem

<template>
  <li @click='selectVideo'>
    <img :src="video.snippet.thumbnails.default.url" alt="">
    <br>
    {{video.snippet.title}}
  </li>
</template>

<script>
export default {
  props:{
    video:{
      type:Object,
      required:true
    }
  },
  methods:{
    selectVideo(){
      this.$emit('select-video', this.video)
    }
  }
}
</script>

💫 VideoList의 하위 컴포넌트

💫 리스트 클릭 ➡️ 선택하여 상위 컴포넌트인 VideoList로 이벤트 전달

💫 snippet 속성 속의 썸네일과 타이틀만 출력

 

5️⃣ VideoDetail

<template>
  <div v-if='video'>
    <h2>VideoDetail</h2>
    <iframe :src="videoURI" frameborder="0"></iframe>
  </div>
</template>

<script>
export default {
  props:{
    video:{
      type:Object,
    }
  },
  computed:{
    videoURI(){
      const videoId = this.video.id.videoId
      return `https://www.youtube.com/embed/${videoId}`
    }
  }
}
</script>

💫 App의 하위 컴포넌트

💫 iframe으로 선택한 동영상 가져오기