카카오 책 검색 REST API를 사용한 웹사이트 제작

Preface

 

정보처리기능사 실기 시험 신청까지 시간이 남아 카카오의 검색 API를 사용해 간단한 책 검색 웹사이트를 제작해봤다.

 

카카오 API를 사용하는 방법은 조코딩님의 유튜브 강의를 참고했고, 부가적인 기능들은 생각날 때마다 하나하나 추가해가며 만들었다.

 

사실 모든 코드를 혼자 작성했다기보단, GPT에게 질문을 하며 필요한 부분들을 수정하는 방식으로 진행했다.

 

CSS를 자주 사용해보지 않아서 그런지 중요 기능들을 수행하는 코드보다 CSS 코드를 작성하는 데 시간이 더 걸렸다.

 

또, 제작한 페이지를 깃허브에서 호스팅했지만, 인증키 노출 문제로 인해 현재는 중단한 상태이다.

 

깃허브의 action secrets를 사용하면 인증키를 숨긴 상태로 호스팅을 할 수 있을 것 같기도 한데, 아직 해결 방법을 찾지 못했다.

 

추후 인증키 문제를 해결하면 다시 호스팅할 계획이다.

 

 

 

전체 코드는 깃허브 리파지토리에 업로드되어 있다.

---

 

1. 사용 언어 및 툴

 

 

- HTML과 CSS를 사용해 간단한 화면을 구성했다.

 

 

- JavaScript를 사용해 함수를 생성했다.

1) jQuery를 사용해 코드의 양을 줄였다.

2) jQuery의 Ajax를 사용해 API 정보를 받아왔다.

 

---

 

2. 카카오 REST API

 

 

- 카카오 REST API 링크: https://developers.kakao.com/

Kakao Developers

 

 

- 사용 방법

1) 위 사이트에 접속하여 로그인한 후 "내 애플리케이션"에 가서 REST API 인증키를 얻는다.

2) 사용하고싶은 API의 URL을 저장한다: https://developers.kakao.com/docs/latest/ko/daum-search/dev-guide

Kakao Developers

2) Ajax를 이용해 API의 정보를 얻어온다.

$.ajax({
    method: 'GET',
    url: '사용하고싶은 API의 링크',
    data: { query: searchInput, page: page },
    headers: { Authorization: "카카오 인증키"}
})

3) 위 문서의 'Document' 부분에서 얻고싶은 정보를 변수로 만들어 얻어온다.

→ 조코딩 유튜브 참고: https://www.youtube.com/watch?v=QPEUU89AOg8 

 

---

 

3. 구현 내용

 

 

- 메인 화면

 

 

- 검색 결과 출력 화면

 

 

- 페이징 기법을 이용한 다음 페이지 버튼 

 

 

- 썸네일 클릭

 

 

- 추가 정보 클릭

 

- 두 번째 페이지에서 검색하면 새로운 검색 결과의 첫 번째 페이지 출력

 

 

- 특정 키워드만 입력해도 결과 출력

 

 

- 사용 동영상

 

 

- 전체 코드는 깃허브 리파지토리에 업로드되어 있다.