도서 검색 API 변경하기 (feat. 실수로그 또 생성)

Ava Kim·2022년 7월 6일

리팩토링/개선 프로젝트 1

목록 보기

6/6

Intro

프로젝트 기능 개선하면서 유저 피드백에 따라 도서 API를 Google에서 Kakao로 변경했다.

Chingu 팀 프로젝트 할 때는 외국인 멤버랑 하는 거니까 당연히 영어로만 진행했고 Google API를 이용해서 책 검색할 때 불편한 점은 없었다. 그런데 혼자 프로젝트 업데이트하고 유저 피드백 수집할 때, 한국어로 검색했을 때 검색되지 않는 책들이 있어 아쉽다는 의견이 있었다. ‘파친코’ 등 검색이 제대로 되지 않는 책들이 꽤 많아 국내 도서 API로 변경하기로 했다.

Kakao API 선택 이유

국내 도서 Open API 검색했을 때 굉장히 잘 비교해 놓은 블로그 포스트가 있어서 이 포스트를 참고했다.

참조: https://steemit.com/kr/@anpigon/open-api

네이버와 카카오 중에서 고민했는데 아래의 경우에 카카오가 더 낫다고 판단해 최종적으로 카카오 API를 이용하기로 했다.

	네이버	카카오
저자 여러명일 때	String	Array
이미지 크기	82 x 116	120 x 174

API 변경하기

카카오 계정만 있으면 쉽게 애플리케이션 추가하고 REST API KEY를 받아 이용할 수 있고, 문서 정리도 잘 되어 있어서 금방 변경할 수 있었다.

카카오 API 문서

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

Postman 활용하기

코드 변경 전에 Postman으로 먼저 잘 되는지 해보고 시작했다.

중요발견

포스트맨으로 데이터 잘 전달되는 건 확인했다.
그런데 카카오 API는 구글처럼 따로 도서 ID를 제공해주지 않는다는 걸 발견. 찾아보니 ISBN이 모든 도서마다 부여되는 개별적인 고유번호라고 해서 ID로 사용하기로 했다.

또 하나 문제점은 ISBN 넘버가 중복되는, 즉 같은 책 데이터가 2개 넘어오기도 한다는 건데, 이건 정말 우연히 '파친코'로 검색했다가 발견한 거였다. 그래서 데이터 받아온 후 서비스 파일에 중복 데이터 걸러내는 로직을 추가했다.

Request URL

아래처럼 Authorization에 API KEY 넣을 때 앞에 반드시 ‘KakaoAK’ string이 붙어 있어야 하니, .env에 키값 설정할 때 주의해야 한다.

GET /v2/search/web HTTP/1.1
Host: dapi.kakao.com
Authorization: KakaoAK ${REST_API_KEY}

코드에 적용하기

카카오 service 관련 로직은 별도 클래스로 만든 후, search 페이지에서 client와 max-result 값을 DI로 전달해서 인스턴스를 생성했다.
이 부분을 한 번만 생성되게 index.js로 옮기는 게 맞는지 아직도 고민 중이다.

//search.jsx

const client = axios.create({
  baseURL: 'https://dapi.kakao.com/v3/search/book?query=',
  headers: {
    Authorization: process.env.REACT_APP_KAKAO_API_KEY,
  },
});

const kakaoBooks = new Kakao(client, 40);

const Search = ({ cardRepo }) => {
  const [bookList, setBookList] = useState([]);

  const handleSearch = (value) => {
    kakaoBooks
      .search(value)
      .then(setBookList)
      .catch((error) => {
        console.log(error);
        setBookList(null);
      });
  };