본문 바로가기

웹 프로그래밍

Ajax 사용한 Daum 검색 API 사용하기

@markdown

# Ajax 사용한 Daum 검색 API 사용하기

____


## Daum 개발자 페이지 등록 및 API 키 생성

- API 사용하기 위해선 다음 계정이 필요하다.

- [개발자 페이지] <u>[http://developers.daum.net](http://developers.daum.net)</u> 로그인

- 콘솔창 탭에서 앱 만들기

![](https://user-images.githubusercontent.com/12658717/27367539-9e418744-5688-11e7-8dba-91921447ce4c.png)

- API Key 생성

![](https://user-images.githubusercontent.com/12658717/27367676-761fe8ea-5689-11e7-9f63-94eff243f48e.png)

- 웹브라우저 또는 모든 플랫폼 선택

![](https://user-images.githubusercontent.com/12658717/27367663-622ddf5e-5689-11e7-9a73-ca83a13c5e41.png)


## Daum 블로그 검색 API  

____

- 블로그 검색 API : XML, JSON(P) 형식으로 전달하는 API 서비스

- API 키와 GET 방식을 통해 검색 데이터를 가져온다.

- 다음 블로그 검색 API 문서 : [https://developers.daum.net/services/apis/search/blog](https://developers.daum.net/services/apis/search/blog)


![](https://user-images.githubusercontent.com/12658717/27368290-a0949eec-568c-11e7-94bc-e45f9cf5dda2.png)


- 블로그 검색 API 기술문서에 파라미터 값과 사용 예제가 있으니 참조하면 좋다.

`https://apis.daum.net/search/blog?apikey={apikey}&q=카카오프렌즈 -네오&output=json`

- 질의 검색(q)을 `카카오프렌즈`로 검색하고, `-네오`는 제외하는 질의문이다.

- 오류 없이 검색 성공하면 `json` 형식으로 데이터 출력이된다.


## Daum 블로그 검색 Javascript 소스 코드

____

- 내부 `localhost` 서버로 사용하는 테스트 환경에서는 `dataType`에 `json`으로 설정해주면 보안상 내부 데이터만 가져오기 때문에 외부에 있는 daum 서버에서 결과 값을 가져오지 못하게 된다. 그래서 ajax의 dataType을 `jsonp`로 설정해야 출력할 수 있다.

<pre><code class="html" style="font-size:14px"><script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>

<script>

$(document).ready(function(){

$(":button").click(function(){

$.ajax({

url: "https://apis.daum.net/search/blog",

type: "get",

data: {

apikey: "Your API Key",

q:'알고리즘',

result: 5,

output: "json"

},

dataType: "jsonp",

success: callback,

error: function(){

alert('error');

}

});

});

});

function callback(data){

var itemList = data.channel.item;

for(var i=0; i<itemList.length; i++){

var item = itemList[i];

var title = item.title;

var link = item.link;

var desc = item.description;

$('#searchResult').append('<hr/>');

$('#searchResult').append("<a href='" + link + "'>" + title + "</a>");

$('#searchResult').append("<br/>");

$('#searchResult').append(desc + '<br/>')

$('#searchResult').append('<hr/>');

}

}

</script>

</code></pre>


## Daum 블로그 검색 HTML 소스 코드

____


<pre><code class="html" style="font-size:14px"><body>

<h2>블로그 검색페이지</h2>

검색어 입력 : <input type="text" name="search" size="40"/>

<input type="button" value="검색"/><br/>

<h4>검색결과</h4>

<div id="searchResult"></div> 

</body>

</code></pre>