알라딘 상품 API를 이용해 책 정보 넣어보기

하.. 이틀동안 개삽질을 했습니다. 외부 API를 이용하는 법은 처음이고, 더군다나 구글링을 해보니 php나 asp.net으로 서버측에서 api를 이용해 처리하는 예제가 많아서 제가 javascript로 구현하려는 것을 찾기가 쉽지 않았네요. 그리고 API를 제공하는 사이트가 다 그런지는 모르겠는데, Cross-Origin-Policy 때문에 꽤 애먹었습니다.

1. 알라딘 상품 API 파악하기

API 이용안내 알라딘 상품API 안내

우선 API이용안내에 들어가서 하라는 대로 합니다. 알라딘은 자체 ttb서비스에 가입해야 인증키를 받고 API를 사용할 수 있게 되어있네요. ttb서비스란 통합적인 외부 블로거 지원 서비스같은데, OpenAPI를 사용하게 위해 여기에 가입하는 게 조금은 껄끄럽긴 합니다. 저의 경우 ttb서비스 신청해서 승인받기까지 하루 걸렸습니다.

2. 자바스크립트(와 jQuery)로 정보 받아서 처리하기

제가 생각한 방안은 이런 겁니다. <div id="aladin-bookinfo-[isbn]></div> 따위를 블로그 안에 넣으면 자동으로 책 정보를 알라딘에서 받아와서 화면에 출력해주는 것!. 이 처리를 자바스크립트(jQuery)로 해야겠죠. 아래 스크립트는 티스토리 기본 편집할 수 있는 HTML(skin.html) 푸터 영역에 넣었습니다.

var main = $("div[id^=aladin-bookinfo]"); // aladin-bookinfo로 시작하는 id를 가진 div 엘리먼트를 찾습니다.
// 그 엘리먼트가 존재한다면
if(main.length>0) { 
     var id = main.attr("id").substr(16, 10); // ISBN(10자리)부분을 잘라내서 얻습니다 (16칸부터 10개만큼의 문자 얻기)
     var url = "http://www.aladin.co.kr/ttb/api/ItemLookUp.aspx?ttbkey=[TTBKEY]&cover=big&ItemId=" + id + "&output=js&callback=bookDisplay";
    
     // 콜백 함수입니다.
     function bookDisplay(success, data) {
 
        /* 여기서 책 정보를 이용해 구조를 만듭니다! */
     }
 
    // AJAX 요청을 보냅니다. getJSON() 함수는 알라딘 API 대용으로 사용불가.
     $.ajax({
        url: url,
        jsonp: "bookDisplay",
        dataType: "jsonp"
     });
}

일단 XHR(XMLHttlRequest)를 이용하는 건 포기했습니다. 자꾸 Cross-Origin 정책에 막혔기 때문이죠. ㅠㅠ 서버측에서 CORS 기술을 적용해주었으면 좋겠지만 메일을 보내도 묵묵부답이더군요. 사실 Cross-Origin 이게 뭘 의미하는 건지 이해를 잘 못하겠네요. 브라우저상으로 요청을 보내면 데이터가 잘 오는 것이 티스토리 스크립트 상으로 요청을 보내면 막힌다니. 둘의 헤더를 비교했을 때 Origin이 있고 없고의 차이가 있더군요. 어쨌든 그래서 요청 파라미터 output을 js로 했습니다. 구글링 결과 jsonp라는 것을 이용하면 Cross-Origin 문제를 피할 수 있답니다.

특이한 건, 알라딘 API 요청이 처리된 후 콜백함수로 들어가는 파라미터가 두 개라는 점 입니다(?!). 첫번째는 성공 여부일까요, true라는 불린값이고, 두번째가 비로소 json 데이터입니다. 그래서 단순히 getJSON()은 안되더군요. 안에 콜백 함수에 들어가는 파라미터가 불린값 하나만 들어가니. 어쩔 수 없이 따로 저렇게 콜백 함수를 만들고 콜백 함수를 지정해줘야 했습니다.

받은 데이터를 보면 저렇게 되어있습니다. 적당히 data.item[0].title 등으로 데이터를 추출할 수 있습니다. 

3. 구조 만들고 css 적용시키기

...는 생략하도록 하겠습니다. 

짜잔! 구조나 CSS는 크롬에서 개발자모드로 보실 수 있고, 스크립트도 이 html 페이지 아래쪽 뒤지면 있으니깐 참고해주세요.