ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 카카오 API 로 책 정보 검색 하기
    JavaScript 2019. 2. 1. 15:57

    카카오 API 를 사용하기 위해서는 우선 등록해야 한다.

    카카오 디벨로퍼 에 들어가서 아래 쪽에 앱 개발 시작하기를 눌러 등록 후
    앱 만들기를 눌러서 애플리케이션을 하나 만들어 주면 사전 설정이 끝난다.

    카카오에서 제공하는 개발가이드를 확인해보자.

    우리는 REST API 중 검색 API를 이용할 것이다.
    REST API 개발가이드 REST API 책검색 를 보면

    Request 에 들어가는 값 과 Response 로 받아오는 JSON 객체의 내용이 나온다.

    이제 코드로 작성해보자

    이런 책 데이터를 입력 하는 폼에서 ISBN 을 검색해서 나오는 책 데이터를 자동으로 폼에 넣어볼 것이다.

    ISBN 에 있는 검색 버튼을 누르면 함수가 작동하도록 button 태그에

    onclick="searchISBN($('#isbn').val());"

    onclick 이벤트를 작성한다.

    이제 작동하는 함수를 만들어 보자.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    function searchISBN(isbn){
        event.preventDefault();
        if(isbn !== undefined && isbn !== ""){
            $.ajax({
              url: "https://dapi.kakao.com/v3/search/book",
              headers: {'Authorization''KakaoAK '+ key},
              type : "get",
              data:{
                  query: isbn,
                 target:'isbn'
              },
              success : function(result){
                  let data = result.documents[0];
                  $("#title").val(data.title);
                  $('#author').val(data.authors);
                  $('#pub').val(data.publisher);
                  $('#price').val(data.price);
                  $('#info').val(data.contents+"...");
                  let date = data.datetime.split('T')[0];
                  $('#date').val(date);
                  $('#translator').val(data.translators);
              }
          });
        }
    }

    isbn 의 내용이 있을 경우에만 작동하도록 했다

    ajax를 이용하여 데이터를 전송하고 받아온다.

    카카오에서 제공해준 REST API 키 값은 headers 에 넣어주면 되는 데

    위에 코드에서는 파일에 저장된 키를 불러오도록 되어 있다.

    그냥 쓸 경우에는 headers: {'Authorization': 'KakaoAK key'} 형식으로 적어주면 된다. (KakaoAK 와 key 값 사이에 공백이 있다)

    type은 get 방식으로 보내며

    data에는 들어가는 내용은 다음과 같다.

    JSON 형식으로 넣어줄 내용을 적어준다.

    Response 로 받아오는 JSON 객체는 다음과 같은 내용을 담고 있다

    콘솔로 result 를 출력해보면 이렇게 나온다.

    필요한 내용인 제목, 저자, 출판사, 가격, 책 소개, 발간일, 역자 정보를 받아서 폼에 넣어준다.

    이런식으로 내용이 폼에 들어가게 된다.

    모든 정보를 주지는 않으니 필요한 정보만 받아오고 부가적인 데이터는 따로 넣어줘야 한다.

    반응형

    댓글 0

Designed by Tistory.