'웹' 카테고리의 글 목록 (17 Page)

섬유센터 17층에서 열린 2008년의 웹2.0 관련 산업계의 전망을 들어보는 자리였습니다.
블로그나 업계 비즈니스 전문가 15명이 펼치는 화려한 PT와 말빨은 충분히 설득력이 있었습니다.
중구난방의 주제를 어느정도 무리지어서 3그룹으로 나누었는데, 첫타임에 발표한 그룹이 제일 집중도가 높은 듯 했습니다.

2008년 모바일 산업의 격동기가 될 것 같습니다. 고객들 눈은 높아질 것이고, 별 잡스런 애플리케이션들이 우후죽순 나올 것인데, 안드로이드는 휴먼에 가까운 로봇처럼 사람들의 일상을 파고 들어오려고 하겠지요.

자꾸 보니까 정이 들 것 같은 분들이 많아지고 있습니다. ^^; 저만 이런 생각하는 지도 모르겠습니다만 이런 발표자리에 뉴페이스가 설 자리가 쉽지 않다는 이상한 생각도 듭니다.

재밌자고 하는 행사이고, 생각을 공유하고 가자는 취지는 깊이 동감합니다.

약간 찌질하게 후기가 가는 듯한 이유는 USB 1G가 메모리도 당첨되지 못한 것 때문입니다. java로 하면 뽑혔을텐데요. 야후 코리아에서 협찬한 1등 타거스 노트북은 바라지도 않았습니다. 췟.
읽어주셔서 감사하고, 오늘 발표하신 분들이나 참가하신 분들 그리고 자원봉사하신 분들 좋은 주말 보내세요.

초급자를 위해 준비한 [데브옵스 · 인프라] 강의입니다. Vite 기반의 React 개발 환경을 만들고, Node.js 기반의 API Server와 Swagger를 통한 API 문서를 자동 생성합니다. 로컬 개발환경과 개발서버의 차이를 이해하고, AWS를 쉽게 따라서 이용할 수 있습니다. https://inf.run/E3Qf

리트머스²는 소프트뱅크미디어랩에서 벤처 인큐베이터 역할을 하는 프로그램입니다. 산성인지 염기성인지 판별하는 리트머스 시험지 이름을 따서 비즈니스가 얼마나 가치가 있는지 선별해서 컨설팅, 호스팅, 투자를 지원하는 것으로 알고 있습니다.

내일금일 저녁 토즈 강남대로점에서 6시45분부터 신규 서비스 소개와 간담회를 엽니다. 아이디어를 비즈니스로 실현하기 위해 열심히 노력하는 사람들을 만날 수 있게 되어 자못 기대되는 시간이기도 합니다.

flickr나 youtube 같은 사람들이 대중적으로 즐길 수 있는 대박 서비스가 태어나기를 기원해봅니다.

초급자를 위해 준비한 [데브옵스 · 인프라] 강의입니다. Vite 기반의 React 개발 환경을 만들고, Node.js 기반의 API Server와 Swagger를 통한 API 문서를 자동 생성합니다. 로컬 개발환경과 개발서버의 차이를 이해하고, AWS를 쉽게 따라서 이용할 수 있습니다. https://inf.run/E3Qf

http://www.programmableweb.com/apis/directory/1?apicat=Shopping&pagesize=All

Viewing 1 to 29 of 29 APIs

API	Description	Category	Updated
Amazon eCommerce	Online retailer	Shopping	2006-04-04
Amazon Historical Pricing	Historical product sales data	Shopping	2006-08-04
Authorize.Net	Internet based payment gateway services	Shopping	2007-02-20
AvantLink	Affiliate marketing network	Shopping	2007-07-21
Bountii Price Search	Electronics and appliances price comparison service	Shopping	2007-12-30
Cafe Press	Customized retail product service	Shopping	2006-03-06
CNET	Shopping services	Shopping	2007-02-01
Commission Junction	Online affiliate programs	Shopping	2006-09-23
DataUnison eBay Research	eBay pricing and sales trend data	Shopping	2006-10-21
Direct Textbook	Book price comparison service	Shopping	2007-06-11
eBay	Online auction marketplace	Shopping	2005-12-05
GoodStorm	Online retail ecommerce	Shopping	2006-07-16
Google Base	Platform for structure and semi-structured data	Shopping	2006-08-23
Google Checkout	Shopping cart services	Shopping	2006-08-31
LinkShare	Affiliate marketing network	Shopping	2007-10-08
Oodle	Online classifieds service	Shopping	2007-09-01
PaySimple	Online payment gateway	Shopping	2007-05-06
PriceGrabber	Comparison shopping service	Shopping	2008-01-12
PriceRunner	Shopping comparision engine	Shopping	2007-05-21
QuarkRank	Consumer reviews service	Shopping	2007-12-18
Rakuten	Japanese shopping web service	Shopping	2007-06-29
Shopping.com	Online retail shopping	Shopping	2006-06-14
Shopzilla	Comparison shopping service	Shopping	2008-01-04
SwapThing	Community driven swapping site	Shopping	2006-08-20
UPC Database	UPC lookup service	Shopping	2006-07-09
Windows Live Expo	Online classifieds service	Shopping	2006-06-07
Yahoo Shopping	Shopping services	Shopping	2005-11-19
Zazzle	On-demand product creation service	Shopping	2006-08-31
Zixxo	Online coupons	Shopping	2006-07-29

일단 스크랩입니다.

초급자를 위해 준비한 [데브옵스 · 인프라] 강의입니다. Vite 기반의 React 개발 환경을 만들고, Node.js 기반의 API Server와 Swagger를 통한 API 문서를 자동 생성합니다. 로컬 개발환경과 개발서버의 차이를 이해하고, AWS를 쉽게 따라서 이용할 수 있습니다. https://inf.run/E3Qf

블로그 우측에 다음의 워크온 배너를 걸었습니다. 클릭하면 100원씩 우토로 마을 돕기에 후원을 하게 되는 것이죠. 12월 29일부터 약 보름 정도 걸어 놓았습니다. 얼마나 모았을까요?

총 누적 기부금액이 100원입니다. 도못미(도와주지 못해서 미안해 ㅠㅠ;)
이와는 별개로 1월 1일부터 12일까지 모은 애드클릭스 에디터 광고는 얼마일까요.

너무 차이가 납니다.

아마도 우토로 마을 돕기 배너를 정성껏 클릭하신 분들이 많이 계실터인데, 비밀은 다음 그림에 표시했습니다. 검은색 영역은 우토로 마을 돕기 안내페이지로 이동합니다.
후원금이 쌓이는 영역은 아래 빨간 표시한 부분입니다.

위 까만 박스 영역의 링크는
http://adclix.daum.net/walkon/event/adc_walkon_campaign.html 입니다.
아래 두 개의 링크는
http://kd.auction.co.kr/kd_redirectse.asp?CODE=~~~
으로 위 링크와 다릅니다.

...

갑자기 우울해집니다. ^^;

초급자를 위해 준비한 [데브옵스 · 인프라] 강의입니다. Vite 기반의 React 개발 환경을 만들고, Node.js 기반의 API Server와 Swagger를 통한 API 문서를 자동 생성합니다. 로컬 개발환경과 개발서버의 차이를 이해하고, AWS를 쉽게 따라서 이용할 수 있습니다. https://inf.run/E3Qf

gmail에서 gtalk로 친구신청된 모습입니다. 오페라 9.2 브라우저에서는 "예"를 클릭해도 처리되지 않습니다.

파이어폭스2.0입니다. 여기는 "예"버튼에 관한 처리가 자연스럽게 됩니다.

오페라 브라우저는 빠른 서핑을 가능하게하는 장치들이 많이 있습니다. 반대급부로 자바스크립트의 해석이 저주받은 것 같습니다. 특히나 자바스크립트로 html을 생성해서 표시하거나 레이아웃에 영향을 주는 경우 아예 동작을 안 하거나, 이 정도면 크게 불만 없습니다만, CPU 100%를 치면서 메모리 증가하면서, 제 맥북프로의 팬을 돌려버립니다. 강제 종료만 있을 따름이죠.

여튼 점점 더 오페라로 서핑하기 힘들어집니다. 한 발 한 발 새로운 영역으로 다가설 때마다 프로세스 킬을 각오하고 다녀야 하니까요.

초급자를 위해 준비한 [데브옵스 · 인프라] 강의입니다. Vite 기반의 React 개발 환경을 만들고, Node.js 기반의 API Server와 Swagger를 통한 API 문서를 자동 생성합니다. 로컬 개발환경과 개발서버의 차이를 이해하고, AWS를 쉽게 따라서 이용할 수 있습니다. https://inf.run/E3Qf

image from: http://whatis.blogs.techtarget.com/2007/06/20/cloud-computing-the-next-big-thing/

2008년 초, 나를 사로잡는 키워드입니다. 몇 년 전 오라클과 델 컴퓨터가 그리드 컴퓨팅이라고 내놓은 컨셉과 유사합니다만, 구글에서 2002년부터 연구하고 서비스에 이용하는 PC급 서버의 클러스터링 방식을 클라우드 컴퓨팅이라고 합니다.

Map Reduce 라는 개념으로 파일을 분산 복제해서 관리를 하게 되는데, 구글 파일 시스템 GFS 에 대한 오픈소스 프로덕트가 하둡입니다. hadoop 이라고 하죠. http://lucene.apache.org/hadoop 사이트에서 이에 관한 정보를 얻을 수 있습니다.

검색엔진과 저는 별로 상관 없을 줄 알았는데, 컴퓨터의 계산 능력을 극대화하기 위한 새로운 접근법 클라우드 컴퓨팅은 매력이 있습니다.

관련:

http://jaso.co.kr/99 하둡 관련 전문 블로그
http://deisys.tistory.com/108 하둡의 퍼포먼스 (삽질기)
http://www.hadoop.co.kr/ 하둡 한국 사용자 그룹
http://wiki.hadoop.co.kr/wiki/moin.cgi 하둡 한국 사용자 그룹 wiki
http://irgroup.org/ 검개그 검색엔진 개발자 그룹
http://www.gruter.co.kr/ 검개그 운영자 블로그

초급자를 위해 준비한 [데브옵스 · 인프라] 강의입니다. Vite 기반의 React 개발 환경을 만들고, Node.js 기반의 API Server와 Swagger를 통한 API 문서를 자동 생성합니다. 로컬 개발환경과 개발서버의 차이를 이해하고, AWS를 쉽게 따라서 이용할 수 있습니다. https://inf.run/E3Qf

openapi

기원
- API를 오픈한다
  - Application Programming Interface
  - 분산 데이터
    - 원격 Select
  - 제한적 오픈이 다수
- 구글맵과 크레이그리스트부동산정보
- 아마존의 웹서비스를 통한 상품등록
현황
- 국내
  - 네이버/다음 포털 중심
  - 알라딘/옥션 등 상거래사이트
  - 오픈마루/미투데이 등의 서비스
- 국외
  - http://www.programmableweb.com/
    - 594 API
    - 2648 mashups
  - Google을 필두
    - http://code.google.com
  - Facebook
    - http://developer.facebook.com
  - Amazon
  - Ebay
구현
- 구분
  - Remix
  - Mashup
- 구현지점
  - Client Side Mixing
    - apikey 노출
    - 조작이 쉽고 다양성
    - 자바스크립트
  - Server Side Mixing
    - 서버의 부하
    - 서버 역할 증가
    - 서버사이드언어
효과
- 서비스 확장 아이디어 발굴
- 서비스인지도 증가
  - powered by ...
- 제휴업무의 간소화

초급자를 위해 준비한 [데브옵스 · 인프라] 강의입니다. Vite 기반의 React 개발 환경을 만들고, Node.js 기반의 API Server와 Swagger를 통한 API 문서를 자동 생성합니다. 로컬 개발환경과 개발서버의 차이를 이해하고, AWS를 쉽게 따라서 이용할 수 있습니다. https://inf.run/E3Qf

우측의 shop gallery 위젯이 페이지를 새로 고칠 때마다 바뀌는 것을 볼 수 있을 것입니다.
티스토리의 스킨 바꾸기에서 다음 스크립트만 삽입하면 됩니다.

확장자는 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" 에러가 나오지 않고 정상적으로 동작하는 것을 보면 현재 도메인의 함수와 원격 도메인의 자바스크립트가 서로 상관하는 것이 없어서인듯 생각되는군요.

일단 화면단에서 가장 기본적으로 처리해야하는 것은 일단락 지겠습니다.

초급자를 위해 준비한 [데브옵스 · 인프라] 강의입니다. Vite 기반의 React 개발 환경을 만들고, Node.js 기반의 API Server와 Swagger를 통한 API 문서를 자동 생성합니다. 로컬 개발환경과 개발서버의 차이를 이해하고, AWS를 쉽게 따라서 이용할 수 있습니다. https://inf.run/E3Qf

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

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

document.write(htmlCode);
}
showShopGallery(); // 함수 호출
</script>

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

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

초급자를 위해 준비한 [데브옵스 · 인프라] 강의입니다. Vite 기반의 React 개발 환경을 만들고, Node.js 기반의 API Server와 Swagger를 통한 API 문서를 자동 생성합니다. 로컬 개발환경과 개발서버의 차이를 이해하고, AWS를 쉽게 따라서 이용할 수 있습니다. https://inf.run/E3Qf

[shopgallery] 개발 구조에서 일단 화면에 보이는 것을 만들었습니다. 이렇게 만들어진 화면에 컨텐츠를 자유롭게 바꾸기 위해서는 동적으로 html 태그가 만들어져야 합니다.

데이터가 들어가는 부분 외의 style영역은 따로 파일을 만들어도 좋을 듯 합니다.
다음과 같이 코드가 분리됩니다.

style.css

.shopg {
border: 1px solid #88F;
background-color: #FEE;
padding : 1px;
}
.shopg img {
border: 1px solid #88F;
width : 65px;
}
.shopg td {
font-size : 11px;
width: 65px;
}
.shopg_name {
height: 39px;
overflow: hidden;
}

simple.html

<link rel="stylesheet" type="text/css" href="style.css" />

<table class="shopg"><tr>
<td rowspan="2"><a
href="http://itempage.auction.co.kr/detailview.aspx?itemno=A099090503"><img
src="http://image.auction.co.kr/itemimage/016/85/02/0168502107.gif"></a></td>
<td><div class="shopg_name">1+1고객행복상품07가을/에니팅그래픽티셔츠시즌2/R13552/남여공용/착불</div></td>
</tr>
<tr>
<td>8,900원</td>
</tr></table>

이제 simple.html 을 javascript를 이용해서 출력하도록 바꿔보겠습니다.
html에서는 모두 큰따옴표를 썼기 때문에 자바스크립트에서 문자열은 작은따옴표를 이용해서 둘러싸도록 하겠습니다.

자바스크립트 문자열의 특징은 자바와 다르게 줄 끝에 \ 를 붙여서 이어쓰기 할 수 있습니다. 때문에 이렇게 문자열을 만들 수 있습니다.
simple.html

<script type="text/javascript">
var htmlCode =
'<link rel="stylesheet" type="text/css" href="style.css" />\
\
<table class="shopg"><tr>\
<td rowspan="2"><a \
href="http://itempage.auction.co.kr/detailview.aspx?itemno=A099090503"><img \
src="/'>http://image.auction.co.kr/itemimage/016/85/02/0168502107.gif"></a></td>\
<td><div class="shopg_name">1+1고객행복상품07가을/에니팅그래픽티셔츠시즌2/R13552/남여공용/착불</div></td>\
</tr>\
<tr>\
<td>8,900원</td>\
</tr></table>\
';

document.write(htmlCode);
</script>

일단 프로그램화 시키는 것은 성공했습니다. 이제 변수를 뽑아야죠.
'... href="http://itempage.auction.co.kr/detailview.aspx?itemno=A099090503"> ...'
위 코드가 다음과 같이 나눠집니다.
'... href="'+'http://itempage.auction.co.kr/detailview.aspx?itemno=A099090503'+'"> ...'
동적으로 변하는 부분의 양쪽을 문자열 덧셈표시로 바꾼 것이죠. ' 로 막고 + 붙이고 ' 로 다시 문자열 시작을 합니다. 이것을 변수처리해주면 됩니다.
var shopg_link = 'http://itempage.auction.co.kr/detailview.aspx?itemno=A099090503';
...
'... href="'+shopg_link+'"> ...'

코드를 바꾸면 다음과 같습니다.
simple.html

document.write(htmlCode);
</script>

데이터의 1차 분리가 끝났습니다. 점점 프로그램 짜는 듯 느껴지십니까.

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

초급자를 위해 준비한 [데브옵스 · 인프라] 강의입니다. Vite 기반의 React 개발 환경을 만들고, Node.js 기반의 API Server와 Swagger를 통한 API 문서를 자동 생성합니다. 로컬 개발환경과 개발서버의 차이를 이해하고, AWS를 쉽게 따라서 이용할 수 있습니다. https://inf.run/E3Qf

OK 괜찮아, 동네 개발자형

웹

2008 Future Camp 후기

내일 리트머스² 신규 서비스 소개를 위한 블로거/업계관계자 간담회 갑니다.

프로그래머블 웹의 쇼핑몰 카테고리

다음 워크온 도못미

Opera 서핑을 괴롭게 하는 자바스크립트

cloud computing 그리고 hadoop

오픈API 개괄

[shopgallery] 클라이언트 작업 1차 완료

[shopgallery] 함수로 만들기

[shopgallery] 컨텐츠 동적으로 바꾸기

+ Recent posts

티스토리툴바