[고양이와 책을] 팀 프로젝트(6)

현재 상황

서평의 수정의 정보가 서버로 잘 들어가는지 확인을 하는 시간을 가졌다. 하지만 이상하게 자꾸 데이터에 null값이 뜨면서 오류가 나는 것이었다. 어떤 부분에서 문제가 생겼는지 확인하기 위해 데이터를 카카오 api를 통해 받아오는 과정부터 차근차근 확인해나가고 있었다. 이 과정에서 오류의 이유를 마침내 찾아낼 수 있었다. 카카오 api를 isbn을 통해 가져오는 과정에서 생긴 것이었다.

문제

실제로 책의 title과 author를 통해 카카오 api를 불러올 때는 문제 없이 데이터가 잘 출력이 되었었다.

//카카오 api 가져오기 
    async function booksdata(title, author) {
        const params = {
            target: 'title' & 'person',
            query: title, author,
            size: 1,
    };
    const {data: {documents}} = await ResultApi(params); console.log(documents);
    setDatas(documents[0])
} 

    useEffect(() => {
       booksdata(bookvalue[0].bookTitle, bookvalue[0].bookAuthors)
    },[])

하지만, 다음과 같이 isbn을 통해 불러오는 과정에서는 문제가 자꾸 생기는 것이 아니겠는가.

async function booksdata(isbn) {
        const params = {
            target: 'isbn',
            query: isbn,
            size: 1,
    };
    const {data: {documents}} = await ResultApi(params); console.log(documents); 
    setDatas(documents[0])
    } 

 useEffect(()=>{
        booksdata(reviewvalue[0].bookId) //isbn => bookId //
    },[])

그래서 카카오 api 공식문서를 찾아보았다.
정리를 하자면 검색하려는 책의 isbn은 10자리의 isbn인 isbn10 또는 13자리의 isbn인 isbn13을 제공해주고, 둘을 동시에 제공해주는 경우도 있다고 한다.
isbn을 api를 통해 데이터로 받을 때는 예를 들어 "8950973022 9788950973025" 식으로 받아오지만, isbn으로 api 요청할 때는 저 값을 통채로 query에 집어넣으면 값을 찾지 못하는 문제가 발생하였다.

해결 방법

다음과 같이 isbn10 또는 isbn13을 제공, 또는 둘 다 제공할 때의 경우를 나누어 카카오 api 를 불러올 수 있도록 하였다.

async function booksdata(isbn10, isbn13) {
        const params = {
            target: 'isbn',
            query: isbn10 || isbn13,
            size: 1,
    };
    const {data: {documents}} = await ResultApi(params); console.log(documents); 
    setDatas(documents[0])
    } 

 useEffect(()=>{
        if (reviewbid.indexOf(' ') !== -1){ //isbn10과 isbn13이 동시에 주어진 경우
        const isbn10 = reviewbid.slice(0,10)
        const isbn13 = reviewbid.slice(11)
        booksdata(isbn10, isbn13)
    } else {
        booksdata(reviewbid) //둘 중 하나만 주어진 경우
    }
    },[])

이렇게 isbn을 이용하여 카카오 api 통해 책 정보를 성공적으로 불러올 수 있었다.