오전 2시간동안 WoC의 프로젝트 멤버들과 함께 쇼핑몰 위젯에 대한 SVN 연결을 시도 했습니다. openAPI에 대한 세션 발표와 개발환경구축에 관한 정리 시간이 있었고, 구글 코드에 만들어 놓은 지난 프로젝트를 받아서 실행하고 수정하는 것을 함께 했습니다.

http://code.google.com/p/shopgallery

학생들이 만든 위젯 초안도 마음에 듭니다.
http://yoshiboarder.tistory.com/9

한빛ENI교육센터에 스터디 진행이 저희 팀까지 두 팀이었습니다. 오후 스터디 모임은 TDD를 주제로 10명 조금 안 되는 사람들이 모이는 듯 했습니다.

저작자표시 비영리 변경금지
팀원으로 선발한 4분 중 3분만 지난 토요일 부트캠프에 참여했습니다. 네이트온 메신저를 공유하고 오늘 첫 멀티 채팅을 했습니다. 한 명은 원격제어 신청으로 이클립스 개발환경 구축을 코치해주었고, 이번 돌아오는 일요일 오후3시에 모여서 스터디하기로 했습니다. 6주간의 프로젝트 기간인데, 개발 환경에 익숙해지도록 2주간을 할애할 생각입니다.

나머지 한 분이 어떻게 될지 모르겠습니다. 연락처를 구할 방법을 WoC 사무국에 알아봐야 할 것 같습니다.

대략 오늘 전달한 내용은 다음과 같습니다.

http://okjsp.tistory.com/tag/jsp  자바 웹 개발에 친숙해지기
http://okjsp.tistory.com/tag/eclipse 개발 도구 익숙해지기
http://okjsp.tistory.com/tag/shopgallery  지난 WoC 프로젝트 살펴보기
일요일 오후 3시 스터디 모임 갖기

저작자표시 비영리 변경금지

WoC 프로젝트 "쇼핑몰 위젯 만들기 시즌2" 시작합니다.

허광남입니다. kenu(케누)라고 불러주세요.

yoshi*man, sun*gyoul81,unti*lson,t*sday 님들과 함께 합니다.

프로젝트를 함께 하게 되어서 기쁩니다. 또한 협업으로 잘 이뤄냈으면 좋겠다 하는 기대감도 있습니다.

의사소통을 위해서 메신저를 이용하려고 합니다.

http://www.skype.com 을 이용합니다.

저는 스카이프에서 kenu.heo 로 찾을 수 있습니다.

제 휴대폰 번호는 0 1 0 - 9 4 8 6 - 2 0 4 5 입니다.

연락 주세요.

쇼핑몰 위젯 멋지게 만들어 보자구요.

시즌1의 소스는 구글 프로젝트 호스팅에 있습니다.

http://code.google.com/p/shopgallery


저작자표시 비영리 변경금지
지난 번과 마찬가지로 강남 토즈에서 멘티와 WoC관련 프로젝트 스터디를 했습니다.
프로젝트 진행이라기 보다는 학습에 가까웠죠.

http://code.google.com/p/shopgallery 에 내용이 더해진 것은 다행이라 할 수 있습니다.
그리고 우측에 쇼핑갤러리 위젯을 다시 살릴 수 있었구요.

할 게 많은 일요일 저녁입니다.

수고했어요. 멘티, 그리고 친구.
auction openapi를 이용한 소스입니다.
invalid-file

이클립스 자바 프로젝트 압축입니다.

http://code.google.com/p/shopgallery/source 
에서 최신의 소스를 받을 수 있습니다.
사용자 삽입 이미지
우측의 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" 에러가 나오지 않고 정상적으로 동작하는 것을 보면 현재 도메인의 함수와 원격 도메인의 자바스크립트가 서로 상관하는 것이 없어서인듯 생각되는군요.

일단 화면단에서 가장 기본적으로 처리해야하는 것은 일단락 지겠습니다.
자바스크립트의 특징 중 하나는 위에서 아래로 해석되면서 실행되는 것입니다. 때문에 위에서 선언되지 않은 함수를 호출하면 undefined 라고 에러를 발생하게 됩니다. 그 함수가 바로 아래 빤히 보여도 말이죠. 때문에 함수의 선언은 상단에서 이뤄져야 합니다. 함수의 호출은 아래쪽에 위치해야 합니다.

동적으로 바꾼 자바스크립트 부분을 함수로 바꿔보겠습니다.

<script type="text/javascript">
function showShopGallery() {
  var shopg_link = 'http://itempage.auction.co.kr/detailview.aspx?itemno=A099090503';
  var shopg_image = 'http://image.auction.co.kr/itemimage/016/85/02/0168502107.gif';
  var shopg_name = '1+1고객행복상품07가을/에니팅그래픽티셔츠시즌2/R13552/남여공용/착불';
  var shopg_price = '8,900원';
  var htmlCode =
'<link rel="stylesheet" type="text/css" href="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(); // 함수 호출
</script>


함수로 만드는 것은 아주 간단하게 끝났습니다.


관련글: http://okjsp.tistory.com/tag/openapi

관련글 : http://okjsp.tistory.com/tag/openapi

WoC(Winter of Code)에서 함께 할 파트너가 정해졌습니다. 돌아오는 토요일에 처음 만나게 됩니다. 함께 진행하지 못하는 네분의 신청자분들에게 고마움과 미안함을 전합니다. 이 프로젝트가 어떻게 진행되는지는 프로젝트 홈페이지(http://code.google.com/p/shopgallery)를 통해서 확인할 수 있습니다.

사용자 삽입 이미지

구걸 코드에서 제공하는 오픈소스 프로젝트 호스팅 서비스를 이용해서 다음과 같은 일들을 진행할 수 있습니다.

  • 프로젝트 홈페이지
  • 다운로드 서비스
  • 위키
  • 이슈트래커
  • 소스버전관리 - subversion
  • 프로젝트 멤버 관리
비슷한 류의 원조격인 서비스는 sourceforge.net 입니다. 한국어로 된 서비스로 kldp.net도 있습니다. 자바닷넷도 오픈소스 프로젝트 인큐베이터를 자처하고 있습니다.

현재 프로젝트에는 옥션의 openAPI 샘플만 들어가 있습니다. 소스 탭에 나온 설명대로 다음의 소스 주소를 통해서 확인할 수 있습니다.

svn checkout http://shopgallery.googlecode.com/svn/trunk/ shopgallery-read-only

내년 2월까지 진행되는 이 프로젝트를 통해서 오픈소스에 대한 감각을 좀 더 익히고 싶습니다.

+ Recent posts

티스토리툴바