개발

[kakao Daum검색] kakao API 사용해서 Daum이미지 가져오기

철산92 2020. 9. 27. 16:42
반응형

1. kakao API키 발급

   사이트 접속 developers.kakao.com/console/app

 

카카오계정 로그인

여기를 눌러 링크를 확인하세요.

accounts.kakao.com

애플리케이션 추가하기
저장 클릭
REST API 키 복사

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.실행 결과

반응형