fetch(), API를 사용한 데이터 호출

sealkim·2023년 1월 11일
0

json파일, fetch함수 기초 사용법에 이어 이번엔 fetch() 함수로 원격 API 호출을 해보려 한다.


🟩 유튜브 API 호출

◻️ 유튜브 API

제공된 API에서 필요한 부분/경로 확인

◻️ HTML

<ul class="list1">
    <!-- api로 불러올 부분(마크업xxx) -->
</ul>

◻️ JS

fetch('https://www.googleapis.com/youtube/v3/search?part=snippet&q=새해&maxResults=5&key=AIzaSyCvA0JdmROOxx3C60fBqO6geUp8B7xFAMs')
    .then((response) => response.json())
    .then((json) => {
        data = json.items;

        let html = '';
        data.forEach(element => {
            html+=`
                    <li>
                        <a href="https://www.youtube.com/watch?v=${element.id.videoId}">
                            <img src="${element.snippet.thumbnails.high.url}" alt="">
                            <p>${element.snippet.title}</p>
                        </a>
                    </li>`;
        });

        $('.list1').html(html);
        // console.log(data);

    });

fetch()문 요청 URL 분석

fetch('https:~search?~q=새해&~maxResults=5~')

  • search 뒤에 물음표(?): 쿼리스트링의 시작을 표시하기로 약속한 문자
  • q: 해당 키워드로 검색
  • maxResults: 필요한 갯수만큼 검색
  • type: 'video'는 영상을, 'channel'은 채널을, 'playlist'는 재생목록을 검색
<li>
     <a href="https://www.youtube.com/watch?v=${element.id.videoId}">
        <img src="${element.snippet.thumbnails.high.url}" alt="">
             <p>${element.snippet.title}</p>
     </a>
</li>`;

${element.id.videoId}
${element.snippet.thumbnails.high.url}
${element.snippet.title}
📍 각 필요한 부분들을 제공된 API에서 찾아 경로 설정

◻️ 결과 화면

'새해'를 검색했을때 나오는 5개의 유튜브 영상



🟩 유튜브 검색 기능 추가

◻️ HTML

<input type="text" class="text">
<button class="submit">검색</button>
<ul class="list1">
</ul>

◻️ JS

$('.submit').click(function(){
    keyword = $('.text').val();//submit을 클릭하면 .text의 value값을 가져옴
    search(keyword,2)//아래 작성한 매개변수 자리에 들어갈 내용
});

function search(k,c){
    fetch(`https://www.googleapis.com/youtube/v3/search?part=snippet&q=${k}&maxResults=${c}&key=AIzaSyCvA0JdmROOxx3C60fBqO6geUp8B7xFAMs`)
    .then((response) => response.json())
    .then((json) => {
        data = json.items;

        let html = '';
        data.forEach(element => {
            html+=`
                    <li>
                        <a href="https://www.youtube.com/watch?v=${element.id.videoId}">
                            <img src="${element.snippet.thumbnails.high.url}" alt="">
                            <p>${element.snippet.title}</p>
                        </a>
                    </li>`;
        });

        $('.list1').html(html);

    });
};   
search();

검색 기능 추가를 위해 원래 작성했던 fetch문을 함수로 만들어 준다

  • function search(k,c){ fetch문~}
    : 매개변수를 이용해 필요한 부분을 가져오기 위해 함수로 만들어 줌
  • $('.submit').click(function(){ keyword = $('.text').val() });
    : submit을 클릭하면 .text의 value값을 가져옴(검색창에 검색할 값)
  • search(keyword,2)
    : 함수에 작성한 매개변수 자리에 들어갈 내용

◻️ 결과 화면

profile
📚 Coding Notes

0개의 댓글