[연습장] Youtube Data API를 통한 유튜브 동영상 리스트를 만들어 보자. (5) 동영상 검색기능 구현

 

이번에는 유튜브 검색 기능을 구현하였다. 바뀐 건 많이 없고 헤더 부분 추가하고, component화 시킨 후

list 컴포넌트 안에 자식 컴포넌트로 추가해주었고, 기존 fetch함수의 then을

async와 await을 활용하여 기능구현 하는 쪽으로 수정해주었다. 그럼 바로 정리해보자.

 

youHeader.js 추가

const url = 'https://www.googleapis.com/youtube/v3/search';
const key = 'AIzaSyBoB2ooooooooooooYTyuk--9pEUOj5Nfo'

export default{
	template : `
        <header>
            <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
                <div class="container-fluid">
                <a class="navbar-brand" href="#">Carousel</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarCollapse">
                    <ul class="navbar-nav me-auto mb-2 mb-md-0">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled">Disabled</a>
                    </li>
                    </ul>
                    <div class="d-flex">
                    	-- 엔터 또는 클릭시 search함수 호출
                        <input class="form-control me-2" type="text" placeholder="Search" aria-label="Search" @keyup.enter="search()" v-model="keyWord">
                        <button class="btn btn-outline-success" @click="search()">Search</button>
                    </div>
                </div>
                </div>
            </nav>
        </header>
	`,
    data () {
        return {
            keyWord : '',
        }
    },
    methods : {
         async search  () {
			//실제호출 url 및 검색조건 데이터 정제
            let newUrl = '';
            let query = '&q=' + this.keyWord;
            newUrl = url + '?part=snippet&type=video&key=' + key + query;
			//실제 fetch를 통한 API통신 및 await을 통한 동기처리
            const response = await ftch(newUrl);
            const json = await response.json();
            //부모 컴포넌트(여기서는 list)의 데이터에 적재해줌
            this.$parent._data.videoList = json.items;
        }
    }
}

 

youList.js

헤더 컴포넌트 import 및 자식컴포넌트 선언 ( 지역 컴포넌트 )
import youtubeHeader from './youHeader.js'
const youtube_header = youtubeHeader;

export default{
    components : { 
        'youtube-header' : youtube_header,
    },
    // 템플릿에 해당 컴포넌트 넣어줌.
    template : '<youtube-header></youtube-header>',
    mounted () {
    	//마운트 완료후 검색 실시
        this.$children[0].search();
    },
    
코드가 길어질까봐 이번에 수정된 것만 넣었음.

 

이렇게까지 하면 검색이 된다. 검색어가 없는 첫 화면에는 아마 인기?순으로 가져오는 것 같고...

 

검색 X

 

 

몬스터헌터 검색

 

이렇게 검색이 잘 되는 것을 볼 수 있다. 유튜브 API 제한이 없으면 그냥 데이터를 30개씩 가져오면서 테스트 하고

싶은데... 그게 마음대로 안되네 다음에는 플레이리스트를 가지고, 검색어와 연관이 있는 플레이 리스트를 뿌려볼까 한다.