웹 프로젝트(12books) -03. kakao 책 검색 api

1. kakao search api

카카오 개발자 에서 어플리케이션 등록을 했고, api key를 발급받았다. 카카오 개발자 센터의 설명에 따라 header에 api key 를 넣어서 양식에 맞게 api를 검색 키워드를 입력해서 호출하면 검색 키워드에 따른 json 데이터를 가져올 수 있다. 이를 우리 프로젝트에 맞게 가공해서 modal에 띄우는 작업을 했다. 예를 들면 자바라는 키워드로 책을 검색하면 카카오 api를 통해서 json 데이터를 가져오고 이를 modal 창에 뿌려주는 것이다. modal 창에서 내가 읽을 책을 선택하면 해당 isbn(책의 고유값, 사람으로 치면 주민등록번호)가 DB에 있는지 확인하고 없으면 DB에 저장을 하고 저장한 데이터를 고객의 화면에 띄워주고 모든 정보를 사용자가 입력해서 저장을 하면 challenge table에 저장이 되는 로직이다.
(횡설수설한것 같은데 이유는 아직 이 로직을 할지 정하지 못했기 때문이다. 확실히 정해지면 다시 글을 수정하겠다.)

아무튼 어제 kakao api를 우리 서버단에서 호출해서 json 데이터를 받아서 view에 뿌려주는 걸 했고, 오늘은 그걸 예쁘게 가공했다. ajax로 modal을 띄움과 동시에 검색 결과를 modal에 띄워주는 로직을 하려니깐 꽤나 삽질을 많이 했는데, 이유는 아직 자바스크립트 공부가 미흡했기 때문이었다. 아무튼 하루종일 수많은 구글링과 공부 그리고 삽질 끝에 검색어를 입력하는 input의 value의 유무에 따라서 그리고 검색 결과의 길이에 따라서 modal창을 먼저 띄우고 modal 창 안에 있는 div에 값을 담아야한다는 것을 찾아내서 해결했다. 하루종일 한 것치고는 성과는 적었지만, 막상 modal 창에 데이터를 띄우니깐 굉장히 뿌듯했다.

function bookSearch(page){
            var page = page ? page : 1;
            var form = document.getElementById("search_form");
            // var modal = document.getElementById(modal);
            if (form.searchWord.value == "") {
                alert("검색어를 입력하세요");
            }else{
                $('#myModal').modal('show'); --> 여기에서 modal을 먼저 띄우는 게 중요했다. 
                $.ajax({
                    url : "/api/searchBooks",
                    data : $(form).serialize(),
                    beforeSend : function(){
                        $(form).find("button[type=button]").text("Searching for ...");
                    },
                    success :function(res){
                        if(res.meta.total_count < 1) {
                            $("#books > ul").html("");
                            $("#books > #resultMessage").show();
                        }else{
                            $("#books > #resultMessage").hide();
                            console.log(res);
                            var html = "";
                            $(res.documents)
                                .each( --> 이 후의 코드는 너무 길어서 깃헙에서 보는 것이 나을 것 같다. 아무튼 여기는 ajax.each
                                        써서 하는건데 좀 어렵다 공부가 더 필요하다.