우측의 shop gallery 위젯이 페이지를 새로 고칠 때마다 바뀌는 것을 볼 수 있을 것입니다.
티스토리의 스킨 바꾸기에서 다음 스크립트만 삽입하면 됩니다.
<script src="http://www.okjsp.pe.kr/mashup/shopg.jsp">
</script>
확장자는 jsp 입니다만 브라우저에 저 주소를 호출해보면 자바스크립트만 나오는 것을 알 수 있습니다.
서버 쪽의 소스는 따로 설명해드리겠습니다. shopg.jsp 의 소스를 공개하면 다음과 같습니다.
<%@ page pageEncoding="utf-8" import="java.util.*, service1.*"%><% String q = "macbook"; Map item = GetSearchResults.getItemByRandom(q);%>function showShopGallery() {
var shopg_link = 'http://itempage.auction.co.kr/detailview.aspx?itemno=
<%= item.get("itemId") %>';
var shopg_image = 'http://image.auction.co.kr/itemimage
<%= item.get("image") %>';
var shopg_name = '
<%= item.get("name") %>';
var shopg_price = '
<%= item.get("buyItNowPrice") %>';
var htmlCode =
'<link rel="stylesheet" type="text/css" href="http://www.okjsp.pe.kr/mashup/style.css" />\
\
<table class="shopg"><tr>\
<td rowspan="2"><a \
href="'+shopg_link+'"><img \
src="'+shopg_image+'"></a></td>\
<td><div class="shopg_name">'+shopg_name+'</div></td>\
</tr>\
<tr>\
<td>'+shopg_price+'</td>\
</tr></table>\
';
document.write(htmlCode);
}
showShopGallery();
키워드는 "macbook"입니다. 이것을 자바스크립트 호출시 부르도록 바꿀 수도 있습니다. 그건 따로 설명하겠습니다. 아주 기본적인 프로그램이기 때문에 예외적인 데이터 처리는 빠져있습니다. 보안, 캐싱, 문자열 처리 등의 안전장치들이 앞으로도 추가되어야 합니다.
서버쪽에서 어떤 변화가 있었는지 궁금하신 분들은 프로젝트 홈페이지의 소스들을 받아보세요. 커밋해 놓았습니다.
http://code.google.com/p/shopgallery 블로그에서 자바스크립트를 호출하는 도메인이 다른데도 "Access Violation" 에러가 나오지 않고 정상적으로 동작하는 것을 보면 현재 도메인의 함수와 원격 도메인의 자바스크립트가 서로 상관하는 것이 없어서인듯 생각되는군요.
일단 화면단에서 가장 기본적으로 처리해야하는 것은 일단락 지겠습니다.
![초급자를 위해 준비한 인프런 [데브옵스 · 인프라] 강의](https://okdevtv.com/images/inflearn-react-api.webp)
