[WEB] 카카오 검색 API 활용(+jQuery,Ajax)

HyeJi9908·2022년 12월 4일
0

[WEB] 기초

목록 보기
8/8

전체코드

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API연습</title>
</head>

<body>
    <h1>하이요</h1>
    <p id="test"></p>
    <ul></ul>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"
        integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
    <script>
        $.ajax({
            method: "GET",
            url: "https://dapi.kakao.com/v2/local/search/keyword.json?y=37.514322572335935&x=127.06283102249932&radius=20000",
            data: {query:"서울 강남구 삼성동 159"},
            headers:{Authorization: "KakaoAK 00b285e6c72f581d9c2f16bb7c585100"}
        })
            .done(function (msg) {
                console.log(msg);
                console.log(msg.documents[0].place_name);
                console.log(msg.documents[0].category_name);
                $("#test").append(" <strong>"+msg.documents[0].place_name+"</strong>");
                $("ul").append("<li>"+msg.documents[0].category_name+"</li>");
            });
    </script>
</body>

</html>


(키워드로 주소, 검색 조건으로 중심좌표의 제한 반경까지 추가했지만 documents리스트가 많은 이유는 키워드로 입력한 주소가 빌딩이기 때문에 여러 점포가있어서 그런거다..)

jquery CDN 추가

<script src="https://code.jquery.com/jquery-3.6.1.min.js"
        integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

jquery ajax 추가

  • jquery ajax Example 원본)
$.ajax({
  method: "POST",
  url: "some.php",
  data: { name: "John", location: "Boston" }
})
  .done(function( msg ) {
    alert( "Data Saved: " + msg );
  });
  • 카카오 API를 활용하기 위해 수정(+REST API Key발급받기!)
        $.ajax({
            method: "GET",
            url: "https://dapi.kakao.com/v2/local/search/keyword.json?y=37.514322572335935&x=127.06283102249932&radius=20000",
            data: {query:"서울 강남구 삼성동 159"},
            headers:{Authorization: "KakaoAK 00b285e6c72f581d9c2f16bb7c585100"}
        })
            .done(function (msg) {
                console.log(msg);
                console.log(msg.documents[0].place_name);
                console.log(msg.documents[0].category_name);
                $("#test").append(" <strong>"+msg.documents[0].place_name+"</strong>");
                $("ul").append("<li>"+msg.documents[0].category_name+"</li>");
            });

여기서 url부분

"https://dapi.kakao.com/v2/local/search/keyword.json"

이 기본 이지만
중심좌표 y=37.514322572335935 ,x=127.06283102249932로부터 20000km? 반경으로 검색하기위해 추가함! (->검색조건을 url에 추가한다!)

data부분의 query는 실제 내가 검색하는 키워드이다.

data: {query:"서울 강남구 삼성동 159"},
  • .done메서드는 ajax에서 파라미터대로 요청한 데이터들이 잘 응답받았을 때 실행할 함수이다. 그때 매개변수인 msg는 응답받은 데이터이다.

  • 콘솔에서 응답받은 데이터 확인하기

console.log(msg);

을 적어놓고 구글 검사 - 콘솔 창에서 확인가능(전역변수로 저장하는 버튼먼저 눌러야함)

  • jquery활용해서 ajax로 받은 데이터들을 html에 추가하기
    (참고 사이트)
$("#test").append(" <strong>"+msg.documents[0].place_name+"</strong>");
$("ul").append("<li>"+msg.documents[0].category_name+"</li>");

id = test인 태그에 msg.documents[0].place_name을 강조태그로 추가 +
ul태그에 msg.documents[0].category_name을 리스트로 추가


기타

참고 강의

1개의 댓글

comment-user-thumbnail
2022년 12월 21일

블로그 잘봤어요~ 깔끔하게 잘 정리하시는거 같아요!

지금처럼 공부하면서 프로젝트를 진행했을 때 어렵고 막힌적이 있어요?

답글 달기