[Spring Legacy] 카카오 책 검색 api 및 Ajax를 이용하여 책 검색하기

이번 포스팅에서는 카카오에서 제공하는 책검색 api를 이용하여 Spring에서 책검색을 간단하게 해보도록 하겠습니다.

 

참고로 해당 포스팅은 아래의 기준으로 작성 되었습니다.

- jdk version : 1.8

- Spring version : 5.0.7.RELEASE

- jquery 3.6.1

 

개발환경이 Spring Legacy이긴 하지만 Spring Boot에서도 방법이 다르지 않기 때문에 api를 어떤식으로 사용하는지를 관점으로 보시면 될듯합니다.

1. Kakao Developers에 접속하여 카카오 api key 발급 받기

https://developers.kakao.com/docs/latest/ko/daum-search/dev-guide

Kakao Developers

위 사이트에 접속해보시면 kakao developers에서 제공하고 있는 여러가지 API를 확인할수가 있습니다.

 

여러가지 api들을 제공하고 있지만 Ctrl+F를 이용하여 책 검색하기라고 브라우저에서 검색해보시면 위와 같은 카카오 책 검색하기 api와 관련된 정보들을 확인할수 있습니다.

 

간단하게 살펴보면 현재 카카오에서 제공하는 책 검색하기에 대한 기본 정보는 아래와 같습니다.

 

메서드	GET
URL	https://dapi.kakao.com/v3/search/book
인증 방식	REST API키

 

즉, 책 검색을 하려면 GET 타입으로 위와 같은 URL을 호출하면 책 검색 결과 데이터가 반환된다는 의미입니다.

인증 방식이 REST API키를 요구하고 있기 때문에 일단 API키를 얻어보도록 하겠습니다.

 

kakao developers 웹사이트의 상단 중간에 애플리케이션이라는 카테고리가 있는데 클릭해줍니다.

이때 로그인이 되어있어야 접속이 가능하니 로그인을 진행해주셔야 합니다.

 

애플리케이션 카테고리를 클릭하면 이런 화면으로 넘어오실겁니다.

 

지금 캡쳐 화면을 보면 제가 미리 생성해둔 ten99라는 애플리케이션이 있는데 저런식으로 애플리케이션을 생성하면 해당 애플리케이션 자체에서 REST API 키를 제공해줍니다.

 

애플리케이션이 등록이 안되어 있다면 애플리케이션 추가하기를 클릭한후에 앱이름 및 사업자명을 입력하신후 저장해주시면 애플리케이션 추가가 완료됩니다.

 

추가된 애플리케이션을 클릭하면 여러가지 앱키들이 적혀있는 페이지로 넘어오게 되는데 이번 포스팅에서는 REST API 키를 사용할 예정이기 때문에 해당 키를 복사해주시면 됩니다.

2. list.jsp 생성

<div class="card" style=" min-height: 500px; max-height: 1000px;">
	<div class="card-body">
		<h4>Book SEARCH</h4>
		<div class="input-group mb-3">
			<input type="text" class="form-control" id="bookName" placeholder="Search"/>
			<div class="input-group-append">
				<a type="button" class="btn btn-primary" id="searchBtn">검색</a>
			</div>
		</div>
	</div>
</div>

bookName이라는 id의 input 태그를 이용하여 카카오 책 검색 api에 검색을 요청합니다.

3. Ajax로 책 검색 api 연동 및 요청

<script type="text/javascript">
 	$("#searchBtn").click(function(){
	  	  var bookName=$("#bookName").val();	
	  	  if(bookName==""){
	  	  	alert("책 제목을 입력하세요");
	  	  	return false;
	  	  	}	
            
		  	$.ajax({
		  		url : "https://dapi.kakao.com/v3/search/book?target=title",
		  		headers : {"Authorization": "KakaoAK ${REST_API_KEY} "},
		  		type : "get",
		  		data:{"query" : bookName},
		  		dataType: "json",
		  		success : searchResult,
		  		error : function(){alert("error");}
		  	});
	  	});
 </script>

jQuery의 ajax를 이용하기 때문에 api 연동 및 요청에 대한 코드가 상당히 간단합니다. ajax 코드를 살펴보면 일단 url은 카카오 api에서 지정한 url을 그대로 작성해주시면 됩니다.

 

headers(헤더) 같은 경우에는 headers : {"Authorization": "KakaoAK ${REST_API_KEY} "} 이런식으로 작성하시면 됩니다.

headers : {"Authorization": "KakaoAK 1234 "}

예를들어 REST API KEY가 1234이면 최종적으로 위와 같은 형태로 작성해주시면 됩니다.

 

type은 카카오 api 자체에 GET으로 요청해달라고 적혀있었기 때문에 GET방식으로 요청을 보낼겁니다.

 

data는 현재 카카오에서 제공하는 책 검색 api 체가 query라는 이름의 검색 질의어를 필수적으로 요구를 하고 있기 때문에 bookName이라는 데이터를 query라는 이름으로 카카오 api에 요청을 해주었습니다.

 

dataType은 Json으로 작성했습니다.

 

success는 ajax에서 url로 요청하여 데이터가 성공적으로 넘어왔을때 어떻게 처리할지를 정해주는 파트입니다.

searchResult라는 javascript내 함수를 생성해주었으니 성공하게 되면 searchResult라는 함수를 실행하게 됩니다.

 

error는 success의 반대입니다. 즉, ajax에서 url로 요청하였지만 데이터가 정상적으로 넘어오지 않았을때 어떻게 처리할지에 대해 정해주는 파트입니다. 따로 함수로 넘어가지 않고 error라는 메시지창을 호출하도록 코드를 작성했습니다.

4. Succes후 serachResult함수

<script type="text/javascript">
 	$("#searchBtn").click(function(){
   		//생략
	  	});
        
        function searchResult(data){
  		$.each(data.documents,function(index,obj){
			var title=obj.title
			var datetime=obj.datetime
			var price=obj.price;
			var url=obj.url;
		
			console.log(title);
			console.log(datetime);
			console.log(price);
			console.log(url);
  		});
  	}
 </script>

「3. Ajax로 책 검색 api 연동 및 요청」 의 예제에서 success에 searchResult라는 함수로 이동하겠다고 작성하였습니다.

그렇다면 script단에 searcResult라는 함수가 무조건 있어야 하는데 굳이 해당 함수로 data를 넘기는 이유는 무엇일까요?

console.log(data)

ajax가 url에서 요청하여 넘어온 데이터는 json타입의 data로 넘어옵니다. 즉 현재 data 안에 카카오 api에서 요청에 응답한 data가 들어있습니다. console.log(data)를 참고하시면 어떤식으로 data가 들어있는지 확인하실수 있습니다.

 

위에 이미지를 보시면 아시겠지만 해당 data로 View단에서 무언가 처리하기에는 여러개의 array가 한꺼번에 들어있기 때문에 jQuery의 $.each( )를 이용해서 index(순서)별로 출력되도록 처리했습니다.

 

최종 결과물

최종적으로는 위와 같은 결과가 나오게 됩니다.

 

현재는 title(도서제목), datatime(출판일자), price(가격), url(주소) 정도만 출력되게 해주었는데 document안에는 다양한 종류의 값들이 넘어오고 있기 때문에 공식문서를 확인해보시는것을 추천드립니다.