API

👉 API란?

개발자가 개발해놓은 것으로, 프론트엔드나 퍼블리셔가 요청해 쓴다.
"xx 데이터 주세요" 요청하면 개발자가 만들어놓은 소스가 있기 때문에 그 요청에 대한 데이터를 json으로 준다.

⭐️ API는 그냥 쓸 수 없고, 키값이 있어야 한다.

Youtube 키값 분석

예시 키값 (주소창에 치면 데이터가 나온다.)
https://www.googleapis.com/youtube/v3/search?part=snippet&q=먹방&maxResults=20&key=AIzaSyCvA0JdmROOxx3C60fBqO6geUp8B7xFAMs

쿼리스트링(Query String)
어떤 리소스를 요청할지 더 구체화해서 요청을 보낼 수 있도록 파라미터를 전달하는 방법을 약속한 것

https://www.googleapis.com/youtube/v3/search?{쿼리스트링}

키값 구조

https://www.googleapis.com/youtube/v3/search?part=snippet&q=kpop+music&key={본인의_API_KEY}

//여기까지는 공통적
https://www.googleapis.com/youtube/v3/search?part=snippet

key=value 형태로 이루어져 있고
q 는 내가 요청한 것 = 먹방
maxResults = 갯수
key = 키값
이러한 값들 사이는 & 로 연결

👉 예시

<ul class="list">
</ul>


//
<script>
fetch(`https://www.googleapis.com/youtube/v3/search?part=snippet&q=먹방&maxResults=4&key=AIzaSyCvA0JdmROOxx3C60fBqO6geUp8B7xFAMs
`)
.then((response)=>response.json())
.then((json)=>{
	data=json.items;
	let html='';
	data.forEach(element => {
		html+=`<li>
                   <a href="${element.id.videoId}">
                     <img src="${element.snippet.thumbnails.high.url}" alt=""><br>
                     <strong>${element.snippet.title}</strong><br>
                     <p>${element.snippet.description}</p><br>
                     <span>${element.snippet.channelTitle}</span>
                     <hr>
                   </a>
               </li>`;
	});

	$('.list').html(html);
})
</script>

• html+= : 반복되는 내용 입력
• html의 내용 <li>~</il> 내용이 키값에 기재된 갯수만큼 삽입된다.
• $(element.id.videoId} 변수의 경우 중간을 생략하고는 불가하다.