어제 방송을 재밌게 했습니다.
녹화방송 일주일간 공개됩니다. 혹시 JavaScript 개발에 관심이 있다면 도움이 될 것입니다. 개발에 사용한 브라우저는 크롬브라우저입니다.
http://afbbs.afreeca.com:8080/app/read_ucc_bbs.cgi?szBjId=kenuheo&nStationNo=12409927&nTitleNo=5784764&szSkin=
제 방송국 주소는 http://afreeca.com/kenuheo 입니다.
즐겨찾기 하시면 매일 밤 자정에 시작되는 방송 알림을 앱을 통해서 받으실 수 있습니다.
도메인이 다르면 원격의 JSON데이터를 가져올 수 없습니다. 그래서 JSON 데이터를 제공해 주는 쪽에서 사용하려는 사이트의 callback 함수명을 파라미터로 받아서 JSON데이터를 감싸주는 기능을 제공합니다. JSON with Padding 줄여서 JSONP 방식이라고 합니다.
클라이언트 쪽의 간단한 코드입니다. Daum Open API 를 이용해서 데이터를 가져옵니다.
Daum Open API 월 3억 호출 축하합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>title</title>
<style type="text/css">
#banner-message {
}
#banner-message img {
width: 200px;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="banner-message">melong</div><div id="button-container"><button>hello</button></div>
<script type="text/javascript">
function parse(obj) {
var items = obj.channel.item;
var tag = '';
for(var idx in items) {
tag += '<img src="'+items[idx].image+'">';
}
document.getElementById('banner-message').innerHTML = tag;
}
function rawJSXHR() {
var xhr = document.createElement('script');
xhr.src = 'http://apis.daum.net/search/image?q=snsd&apikey=3803541fce89370275fcefe628ed9f9acafe223e&output=json&callback=parse';
document.getElementsByTagName('head')[0].appendChild(xhr)
}
// apikey는 향후 바꿀 수 있으니 http://dna.daum.net의 나의API에서 발급받으세요.
rawJSXHR();
</script>
</body>
</html>
![초급자를 위해 준비한 인프런 [데브옵스 · 인프라] 강의](https://okdevtv.com/images/inflearn-react-api.webp)