저번에 알라딘 api를 이용해 도서검색 사이트를 만드려다가 CORB 오류로 실습 중단했다.
이번에는 카카오에 아예 도서 검색 api가 있길래 그걸로 해보려한다.
1. 카카오 api 키 발급받기
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
카카오 디벨로퍼에서는 다양한 api를 제공한다.
카카오 로그인부터 지도, 검색, 카카오페이 등.. 나중에 다른 api로 실습을 해봐야겠다.
일단 이 모든 api를 쓰려면 키를 발급받아야하는데
일단 자기 계정으로 로그인해준다. 요즘 카카오 계정없는 사람 없으니 3초도 안걸리고 회원가입할 수 있다.
여기 애플리케이션 추가하기를 누르고
적당히 이름 지어 넣어줬다.
그리고 저장하면 내 키값이 발급된다.
그리고 바로 실습에 들어가면 되는데 그전에 개발 가이드를 통해 요청은 어떻게 할지, 응답은 어떻게 할지 참고할 수 있다. 정말 실습에 친절한...
2. Dynamic web project 생성
다이나믹 웹 페이지를 만들어주고 index.html와 searchpage.jsp, 그리고 servlet까지 만들어줬다.
컨트롤러로 searchpage 요청을 보내주고 받아줘서 searchpage.jsp로 또 보내줬다.
3. searchpage.jsp 생성
검색을 하고, 검색 결과를 띄워줄 view를 하나 생성해줬다.
그리고 간단히 제목과 검색창&버튼을 만들어줬다.
또 부트스트랩에서 검색결과를 담아줄 곳을 골라서 가져와서 넣어주고 부트스트랩 파일도 넣어줬다. (생략가능 이쁘게 넣으려고 가져옴)
▶ 부트스트랩 참고
이렇게만 넣어주고 화면은 끝내고, 검색 값을 넘겨 검색 버튼을 누르면 값이 나오도록 코드를 짜준다.
4. 기능 구현
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
개발가이드를 참고하면서 요청 코드를 작성하면 된다.
나는 jquery로 작성해줬다.
search 버튼을 누를시 ajax로 카카오 검색 요청을 넘겨줬다.
데이터는 우리가 input 태그에 넣어준 검색값을 val로 가져와줬고
이 모든 과정을 수행하기 위해선 발급받은 키 값도 같이 넣어줬다.
그리고 요청이 끝나면 검색결과를 응답받아줬다.
응답받은 결과에서 내가 원하는 부분만 가져와 원하는 위치에 append해주면 된다.
이렇게 해주고 실행하면 아주 잘 뜨는 걸 볼 수 있다.
참고
댓글