Kaisyu's Notes: 홈페이지에 나눔로또 위젯을 달아봅시다

예전에 만들어 놓은 나눔로또 Web API를 사용해서 홈페이지나 블로그에 간단하게 추가할 수 있는 나눔로또 당첨 번호 위젯을 만들어 보았습니다. Google App Engine (Python)에 대해 공부해볼 겸해서 만들었던 것이라 그다지 큰 쓰임새가 없었는데 이렇게라도 소개를 하면 그나마 좀 쓰이지 않을까 해서 글로 남겨봅니다. ;-)

몇 줄 안 되는 HTML + JavaScript 코드이므로 적당한 곳에 그대로 아래 코드를 추가하면 됩니다. (Blogger에서는 대시보드 -> 꾸미기 -> 페이지 구성요소 -> 가젯 추가 -> HTML/JavaScript 선택한 다음 아래 코드를 본문에 붙여넣기 하면 됩니다.) 단, 웹이 제 전문 분야가 아니라서 별로 예쁘지는 않습니다. 그저 그럭저럭 잘 동작한다는 데에 의미를 두고 싶습니다. :-( 그러니 화면에 보여지는 모양을 변경하고 싶거나 다르게 동작하길 원한다면 loadLotto 함수의 내용을 적절히 수정하면 되겠습니다.

<div id="lottoDiv">loading...</div>
<script type="text/javascript">
function loadLotto(a) {
  lotpane = document.getElementById('lottoDiv');
  lotpane.innerHTML = '제 <span style="color: green;"><b>' +
      a.gno + '</b></span>회 (' + a.gdate + ')<br /><b><span style="color: red;">' + 
      a.nums + '</span> / <span style="color: blue;">' + a.bnum + '</span></b>';
}
</script>
<script type="text/javascript" src="http://lotto.kaisyu.com/api?method=get&callback=loadLotto">
</script>

소스 내용이 간단하므로 이해하는 데 큰 어려움은 없겠지만 간단히 설명을 하자면 크게 세 부분으로 나눌 수 있습니다.

div 태그: 나눔로또 번호가 표시될 위치에 id가 lottoDiv인 div 태그를 하나 만들어 둡니다.
첫 번째 script 태그: Callback으로 호출될 JavaScript 함수 loadLotto를 만듭니다. 이 함수는 인자로 넘어온 a 객체에서 필요한 정보를 가져다 화면에 보여줄 HTML 코드를 생성한 다음 lottoDiv의 innerHTML 값으로 지정해줍니다. (a 객체의 구성에 대한 상세한 내용은 나눔로또 Web API를 참고해주세요.)
두 번째 script 태그: 이제 준비가 되었으므로 Lotto-K Web API를 호출하는 URL을 script 태그의 src 속성에 추가합니다. 이 때 첫 번째 script 태그에서 만들어둔 함수의 이름(loadLotto)을 callback 파라미터에 넘겨줍니다.

브라우저에서 직접 이 URL을 입력해보면 그 결과가 아래와 같습니다. JSON 형식으로 된 나눔로또 당첨 번호 오브젝트를 파라미터로 가지는 loadLotto 함수 호출 형태라는 것을 한 눈에 알 수 있습니다.
```
loadLotto({"bnum": 35, "gno": 434, "gdate": "2011-03-26", "nums": [3, 13, 20, 24, 33, 37]})
```
그러므로 이 내용을 script 태그에 src 속성으로 지정하여 실행하면 첫 번째 script 태그에서 정의한 loadLotto 함수에 나눔로또 당첨 번호 오브젝트가 전달되는 것이죠.