차근차근
[kakao Daum검색] kakao API 사용해서 Daum이미지 가져오기 본문
1. kakao API키 발급
사이트 접속 developers.kakao.com/console/app
카카오계정 로그인
여기를 눌러 링크를 확인하세요.
accounts.kakao.com
2. kakao API Daum 이미지 가져오기 html 파일
|
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script> <script>
kakaoImgApiInsert();
function kakaoImgApiInsert(){ //https://developers.kakao.com/tool/rest-api/open/get/v2-search-image $.ajax({ type: "GET", url: "https://dapi.kakao.com/v2/search/image", headers: { 'Authorization':'KakaoAK 발급받은 REST API키 삽입' // 'KakaoAK 0000000000000000000000000000000000' }, data : { 'query' : 'bts', 'sort' : '', //accuracy(정확도순) 또는 recency(최신순) 'page' : 1, //결과 페이지 번호, 1~50 사이의 값, 기본 값 1 'size' : 5 //한 페이지에 보여질 문서 수, 1~80 사이의 값, 기본 값 80 }, success: function (jdata) { //console.log(jdata);
$(jdata.documents).each(function(index){
$("div#content").append('<img src="'+this.image_url+'"/>');
});
}, error: function (xhr, textStatus) { console.log(xhr.responseText); console.log("에러"); return; } }); }
</script> <body> <div id="content" style="display: grid;"> </div> </body>
</html> |
3.실행 결과
'개발' 카테고리의 다른 글
| service 와 ServiceImpl 사용하는 이유 (0) | 2021.03.31 |
|---|---|
| 제이쿼리 input,select 초기화 방법 input배열 중복값 출력 (0) | 2020.12.10 |
| [YouTube Data API v3] YouTube API 사용해서 검색 데이터 가져오기 (0) | 2020.09.27 |
| [Firebase Realtime Database] 자바스크립트 파이어베이스 리얼타임데이터베이스 연동 예제 (0) | 2020.09.26 |
| [Firebase Cloud Firestore] 스프링 파이어베이스 데이터 베이스 연동 예제 (0) | 2020.09.26 |
