네이버 체크아웃 이벤트
카테고리 없음2010. 1. 8. 09:07
2010년의 목표.
카테고리 없음2009. 12. 17. 08:51
스프링
스프링 시큐리티
jQuery 마스터(플러그인 개발에 신경쓰자)
안드로이드
이정도? 더하기 플렉스 ..
플렉스 다 까먹겄다~~
스프링 시큐리티
jQuery 마스터(플러그인 개발에 신경쓰자)
안드로이드
이정도? 더하기 플렉스 ..
플렉스 다 까먹겄다~~
jquery 미투데이 플러그인
프로그래밍/웹 쪽2009. 12. 11. 13:52
첨부파일은 안올라가서 집에가서 올려야징
이번에는 간단히 미투데이 오픈 API를 이용하여
자신의 글 목록 및 댓글 목록을 가져오고,
글을 작성 하는 방법을 알아 보도록 하겠습니다.
※ 미투데이(http://me2day.net/)란? 트위터와 같은 국산 마이크로 블로그(150자 제한)
미투데이 인증 방식은 두 가지 방식이 있습니다.(바뀔수도 있어요)
1. 비밀키 조합을 통한 인증 방식(파라미터를 통한 인증 방식)
2. HTTP Basic Authentication(플리커에서 이 방식을 통해 인증하고 사진을 올릴 수 있습니다 - 업로드시만 적용)
이 중에서 비밀키 조합을 통한 인증 방식을 사용해서 미투데이에 게시글을 등록해 보도록 하겠습니다.
※ 미투데이 API(http://codian.springnote.com/pages/86001)
비밀키(ukey) 생성 방법
- nonce + md5(nonce + user_key)
여기서 nonce는 8자리 임시 알파벳을 지정 하면 됩니다.
이를 md5인코딩을 위와 같은 방법으로 해서 ukey를 생성합니다.
플러그인에는 고정 값으로 nonce를 생성하도록 되어있고, md5 인코딩은 http://pajhome.org.uk/crypt/md5/ 에서 하였습니다. md5인코딩을 플러그인 내에서 하고 싶으면 라이브러리를 추가하여 플러그인 내에서 md5인코딩을 수행 하시면 됩니다.
user_key는 me2API 사용자 키 입니다. 미투데이 회원 가입 하시면 자동으로 발급이 됩니다.
이를 조합하여 ukey를 생성합니다.
me2API 애플리케이션 키(akey)는 미투데이 회원 가입 후 발급 요청을 하면 발급 받을 수 있습니다.
이렇게 ukey와 akey를 생성 후 이를 파라미터로 날려주면 인증이 필요한 API 메서드를 사용 할 수 있습니다.
※ 테스트 URL : http://me2day.net/api/noop?uid=codian&ukey=XXXXXXXXXXXXXXXX&akey=XXXXXXXXXXXXXXXX
이제 미투데이에서 제공 하는 API에 대해서 알아 보겠습니다.
- create_post : 지정한 회원의 미투데이 페이지에 글을 작성합니다.
- get_latests : 지정한 회원의 최근글을 가져옵니다.
- get_posts: 지정한 회원의 글을 가져옵니다.
- create_comment : 지정한 글에 댓글을 작성합니다.
- delete_comment: 지정한 댓글을 삭제합니다.
- get_comments : 지정한 글의 댓글을 가져옵니다.
- track_comments: 회원이 최근 작성한, 회원의 미투페이지에 최근 작성된 댓글을 가져옵니다.
- get_person : 지정한 회원 정보를 가져옵니다.
- get_friends : 지정한 회원의 친구목록을 가져옵니다.
- get_settings : 개인 설정 사항을 가져옵니다.
- get_tags: 태그와 태그를 포함하는 글 수를 가져옵니다.
- noop : 사용자인증 테스트를 하거나 서버 동작상태를 검사합니다.
- get_friendship_requests : 지정한 회원에게 요청된 친구신청 내역을 가져옵니다.
- accept_friendship_request : 지정한 회원에게 요청된 친구신청을 수락 합니다.
다른 메서드들은 플러그인에 직접 추가하여 구현 할 수 있습니다.
사실 플러그인 이긴 하지만 워낙에 간단 하기 때문에, 소스 설명이 그다지 없습니다.
기본적인 user-key, ukey, akey 설정을 하는 변수가 있고,
var defaults = {
apiKey : '',
userKey : '',
authKey : '',
userID : ''
};
메서드를 표한 하는 url
var urls = {
baseUrl : 'http://me2day.net/api/',
getPosts : 'get_posts/',
getPerson : 'get_person/',
getComments : 'get_comments/',
createPost : 'create_post/'
};
여기에다가 메서드를 추가하여 확장 할 수 있습니다.
그리고 자신의 글 목록 및 댓글을 가져오는 ajax 요청과, 글을 등록하는 ajax 요청이 있습니다
function createPosts() {
$.ajax({
url : urls.baseUrl + urls.createPost + defaults.userID + '.json',
method : 'post',
data : { 'post[body]' : contents.val(), 'uid' : 'reperion', 'ukey': defaults.authKey, 'akey' : defaults.apiKey},
dataType : 'jsonp',
jsonp : 'callback',
error : function( error) {
// error has code, message, description
},
success : function( data) {
articleList.prepend( getArticleDiv( data));
contents.val( '');
},
complete : function() {
}
});
}
이런 형식으로 REST 방식으로 URL을 호출 하게되면 응답 결과를 XML, JSON으로 리턴해줍니다.
이번에도 역시 JSON이 편하기 때문에 JSON 형식으로 리턴 받아서 사용하게 했습니다.
이 JSON 을 파싱해서 사용 하면 됩니다.
※ get_posts API : http://codian.springnote.com/pages/386176
실행 결과
사용 방법은 플러그인을 사용할 DIV를 생성후 .meToday()를 호출 하면 됩니다.
<script type="text/javascript">
$(function() {
$( '#target').meToday();
});
</script>
</head>
<body>
<div id="target">
<div class="inputArea">
<textarea id="contents"></textarea>
<button id="btnAddArticle">등록</button>
</div>
<div class="articleList">
</div>
</div>
</body>
</html>
$(function() {
$( '#target').meToday();
});
</script>
</head>
<body>
<div id="target">
<div class="inputArea">
<textarea id="contents"></textarea>
<button id="btnAddArticle">등록</button>
</div>
<div class="articleList">
</div>
</div>
</body>
</html>
방명록에 간단 댓글을 작성할때, 여러 방명록에 댓글 등록 시.
프로그래밍/웹 쪽2009. 12. 2. 10:53
상황 : 방명록에 간단한 댓글을 작성 할 려고 한다. 댓글 영역을 생성하기 위한 DIV ID 및 js 변수 명이 고정 되어 있다.
문제 : Div id 및 js 변수명이 고정되어 있기 때문에, 댓글 영역을 여러게 열어 놓고(여러게의 방명록 게시글에 댓글을 작성) 댓글을 작성 할 시, 기능이 동작 하지 않는다.
이유 : 댓글 영역의 식별키(Div id, js 변수)가 고유하지 않기 때문에 브라우저에서 영역을 식별하지 못해서 기능을 수행 하지 못한다.
해결책 : Div id 및 변수 명을 해당 방명록의 SID 로 사용하고, 이를 Object Pool에 넣어서 중복 생성을 방지하여 관리한다.
음 이러면 되나?
문제 : Div id 및 js 변수명이 고정되어 있기 때문에, 댓글 영역을 여러게 열어 놓고(여러게의 방명록 게시글에 댓글을 작성) 댓글을 작성 할 시, 기능이 동작 하지 않는다.
이유 : 댓글 영역의 식별키(Div id, js 변수)가 고유하지 않기 때문에 브라우저에서 영역을 식별하지 못해서 기능을 수행 하지 못한다.
해결책 : Div id 및 변수 명을 해당 방명록의 SID 로 사용하고, 이를 Object Pool에 넣어서 중복 생성을 방지하여 관리한다.
음 이러면 되나?
jQuery에서 IE 8 에러.
프로그래밍/웹 쪽2009. 11. 30. 17:57
IE 8에서 가끔 106번째 라인인가 elem[object] ... 어쩌구 하면서
없는 오브젝트라고 표시될 때가 있다.
왜 그러느냐 하면..
.class( 'height')를 하면 FF 는 숫자를 IE 는 숫자px를 리턴한다.
이렇게 서로 값이 틀려서.. 오류를 -ㅅ-
걍 변하게 .height() 쓰자. -_-;;
Spring Security..Acegi에 대해서 공부합시다.
jsp:include에서 collection 을 param으로 넘길 때.
프로그래밍/웹 쪽2009. 11. 29. 10:34
이것때문에 하루 정도 끙끙...
collection형태를 jsp:include에서 jsp:param으로 넘길 때. 이놈이 toString()을 호출해서 스트링 형태로 변환 해서 넘겨 버린다고 한다. -ㅁ-;;
그래서 해결 책은
http://stackoverflow.com/questions/1254394/jstl-for-each-problem
여길 보고 와서
request scope에 attribute 설정 할 수 있게 해서 ${ cats }로 접근 할 수 있도록 한다.
collection형태를 jsp:include에서 jsp:param으로 넘길 때. 이놈이 toString()을 호출해서 스트링 형태로 변환 해서 넘겨 버린다고 한다. -ㅁ-;;
그래서 해결 책은
http://stackoverflow.com/questions/1254394/jstl-for-each-problem
여길 보고 와서
<%
List<LandingCategory> cats = beanFactory.getLandingCategories();
%>
<c:set var="cats" scope="request" value="<%=cats%>"/>
<jsp:include page="/jsp/modules/index/index_categories.jsp"/>
request scope에 attribute 설정 할 수 있게 해서 ${ cats }로 접근 할 수 있도록 한다.
이번달에 살 책.
My side/잡다한 이야기2009. 11. 26. 09:52
백야행 3권 : 1~2권 재미 있다. 생각보다 몰입하게 되는 책
서버와 인프라를 지탱하는 기술 : 한번 읽어 보면 좋을 책
HTML 리팩토링 : 내 더럽혀지 HTML을 정리하자 ㅠ_ㅠ
Comet과 리버스 ajax : 역자 말 로는 ajax 2.0 어쩌구, 풀링 방식 보다 더 나은 방법
Java FX : 이제야 번역서가?? 플렉스나 실버라이트에 완전 밀리는 javafx 그래도 자바 기반이라 한번은 봐둘만 하다.
저번달에 샀던책 간단히 프리뷰.
비쥬얼 플렉스 디자인 : 플렉스 프로젝트 할 때 보면 좋을 레퍼런스, 좀 보다가 레퍼런스로 하기로함
오픈 API를 사용한 매쉬업 : 매쉬업에 대한 개념과 여러 사용 레퍼런스로 좋을 듯, 매쉬업 입문서로 괜찮음
OSIG & 스프링 DM : 오.. 예전에 RPC 공부하면서 보았던 OSIG가 많이 발전. 경험삼아 읽어 두면 좋을 책
손에 잡히는 정규식 : 난 아직은 안잡힌다. -ㅁ-;; 그래도 정규식에 대한 이해도를 높일 수 있었던 책.
jQuery의 기본은 무엇이냐
프로그래밍/웹 쪽2009. 11. 26. 00:46
뭘까..
가장 핵심은 Selector를 이용하여 element를 찾고 이것에다가 작업을 하는것이 아닌가 싶다.
일단 무슨 작업을 할려면 작업을 할 대상 element를 찾아야 한다!!
그러므로 Selector는 기본 -ㅁ-.. CSS 셀렉터를 기본으로 하기 때문에 잘 알아두면 CSS에서도 그대로 쓸 수 있다.
그 다음이 API에 대해서 얼마나 아는가다.
사실 jQuery 사이트의 API 설명이 거의 완벽에 가깝기 때문에
모를때 마다 찾아가서 보는게 완전 좋다. 하하하.
거기다가 더하여 javascript에 대한 이해가 있으면 금상 첨화.
하지만 난 아직 멀었다 OTL.
jQuery Flickr Gallery.
프로그래밍/웹 쪽2009. 11. 20. 15:53
이번에는 오픈 API은 Flickr를 활용하여 이미지 갤러리를 만들어 보도록 하겠습니다.
오픈 API 란? 영문 , 한글
우리들이 가장 많이 접했던 오픈 API는 지도(네이버, 구글, 야후, 다음 등), 이미지(플리커, ) 등 일 것입니다.
Flickr에 대한 소개
마이크로 블로그로 유명한 미투데이에서는 이미지를 플리커에 업로드하고 사용했었는데, 이를 최근(11월 초) 플리커에서 다 지워 버렸다고 합니다. 아마도 대부분의 사람들이 생각하기를 미투데이가 네이버에 인수되면서 사용량이 폭팔적으로 증가하자(플리커에 미투데이 계정을 가지고 사진을 업로드) 플리커에서 미투데이 계정과 관련된 사진을 다 삭제해 버렸다고 합니다. 아마 플리커에다가 이미지를 저장하면서 네이버에 인수 되니 야후(플리커소유)에서 뿔났나 보죠. ^^
사용으로 사용할 것이 아니면 무료로 사용가능 하고, 작은 규모의 기업에서는 그냥 사용해도 된다고 라이센스 규정에서 본 것 같습니다. 플리커를 이용해 수익을 발생시킬려면 라이센스 관련해서 읽어 보는것은 필수 겠네요!!! (API든 뭐든 일단 라이센스읽는게 필수)
이 플러그인은 플리커를 통해 이미지를 검색 하고, 이를 갤러리 형식으로 보여주는 것입니다.
파프리카에서는 사이트 Thumbnail 및 사용자 이미지를 위하여 이것을 사용 했습니다.
플리커 API : http://www.flickr.com/services/api/
Flickr API를 사용하여 검색하기 위해서는 api_key가 필요 합니다.
api_key를 얻기 위해서는 회원가입을 하여야 합니다. 이외 API를 통해 업로드를 진행 하기 위해선 비밀 키 값도 회원가입을 통해서 얻어야 합니다.
플리커 검색 요청 형식에는 (REST, XML-RPC, SOAP) 방식이 있습니다.
이중에서 가장 사용법이 간단하고 쉬운 REST방식을 사용하도록 하겠습니다.
응답 형식 역시 가장 사용하기 쉬운 JSON 방식을 사용하도록 하겠습니다.
기본적으로 요청을 받기 위한 URL입력하고,
이 결과(JSON)을 가지고 결과 화면을 구성 하면 됩니다.
이것을 생각하면서 보면 이해가 확실히 쉬어 집니다!!!
Flickr API에서는 다양한 API Method 를 지원합니다.
Activity, Blogs, Auth, Collection, Favorite, Search, People, Geo
여기서는 search API를 가지고 이미지 검색을 하도록 하겠습니다.
flickr.photo.search
search api를 살펴보면 다향한 종류의 parameter들이 존재하는 것을 확인 할 수 있습니다.
이 중에서 필요한 것은 method(flickr.photo.search), format(json), api_key, text(검색어), per_page(페이지당 가져올 결과 수)입니다.
검색 URL
위의 URL로 검색을 하게 되면, 검색 결과가 담긴 JSON Object를 반환하여 줍니다.
그러면 우리는 이 Object를 가지고 결과 image를 구성하면 됩니다.
그러면 반환 JSON의 형식을 알아 보도록 하겠습니다.
JSON 응답 샘플보기
성공적으로 응답에 성공 했을 경우 아래의 결과를 보내줍니다.
사용자에게 검색 결과로 보여주는 이미지들의 photo요소의 값에서 추출하여 url을 구성 할 수 있습니다.
URL 설명서
샘플
플리커 검색 방법을 요약 하여 보면
파프리카에서 사용한 Flickr 갤러리도 이러한 방법으로 개발 되었습니다.
사용 방법
이렇게 검색 결과를 보여줄 영역(searchResult)에 favoriteFlicker()를 사용하면 flickr검색을 수행 할 수 있습니다. 검색을 수행 하기 위해서 검색 값(textSearch)의 값을 포함해야 합니다.
이렇게 하여 수행 하게 되면
이렇게 표시 됩니다.
모든 소스를 확인해 볼 수는 없고, 검색 URL을 호출 하여 응답 JSON을 가지고 결과를 구성하는 방법을 확인해 보도록 하겠습니다.
위 소스 코드를 살펴보면 jQuery에서 해당 URL을 AJax형식으로 요청을 하고, 이 결과를 'jsonp'형식으로 사용하는 것을 볼 수 있습니다. 결과 data형식에 'json'이 있는데 왜 'jsonp'형식으로 사용하였느냐 하면
내부 url로 요청을 할 떄는 'json'형식이 가능 하지만 외부 url로 요청을 할때는 'jsonp' 형식을 사용해야 합니다. 이렇게 해야 외부 응답 json을 가져 올 수 있습니다.
응답 결과(json)을 가지고 success에서 이 결과를 조작하여 img url을 생성하면 검색 결과를 화면에 보여줄 수 있습니다. 여기서는 $.each를 사용하여 검색 결과를 보여주고 있습니다.
makeNavigation()함수는 페이지 네비게이션을 만드는 함수 입니다.
자세한 소스 코드는 샘플 파일을 확인하세요.
오픈 API 란? 영문 , 한글
공개 API(Open Application Programmer Interface, Open API, 오픈 API)는 누구나 사용할 수 있도록 공개된 API를 말한다.웹 2.0에 대한 관심이 넓어 지면서 점차 기업들이 API를 공개하고 이를 한대 묶어서 매쉬업 하는 웹 애플리케이션들에 대한 관심이 점진적으로 늘어 나고 있습니다. 개발자들도 매쉬업에 관련해서 많은 관심을 가지고 있습니다. ( 거의 최초의 매쉬업이라고 할 수 있는 구글 맵을 활용한 부동산 매쉬업 APP는 처음에 구글맵 API가 공개되어 있지 않았을 때 이를 한 개발자가 분석해서, APP를 만들었는데.. 이를 본 구글에서 이 사람을 고소 하지 않고 오히려 자사에 채용하고, 구글 맵 API를 공개했다고 합니다. - open api를 활용한 매쉬업 가이드)
우리들이 가장 많이 접했던 오픈 API는 지도(네이버, 구글, 야후, 다음 등), 이미지(플리커, ) 등 일 것입니다.
Flickr에 대한 소개
마이크로 블로그로 유명한 미투데이에서는 이미지를 플리커에 업로드하고 사용했었는데, 이를 최근(11월 초) 플리커에서 다 지워 버렸다고 합니다. 아마도 대부분의 사람들이 생각하기를 미투데이가 네이버에 인수되면서 사용량이 폭팔적으로 증가하자(플리커에 미투데이 계정을 가지고 사진을 업로드) 플리커에서 미투데이 계정과 관련된 사진을 다 삭제해 버렸다고 합니다. 아마 플리커에다가 이미지를 저장하면서 네이버에 인수 되니 야후(플리커소유)에서 뿔났나 보죠. ^^
사용으로 사용할 것이 아니면 무료로 사용가능 하고, 작은 규모의 기업에서는 그냥 사용해도 된다고 라이센스 규정에서 본 것 같습니다. 플리커를 이용해 수익을 발생시킬려면 라이센스 관련해서 읽어 보는것은 필수 겠네요!!! (API든 뭐든 일단 라이센스읽는게 필수)
이 플러그인은 플리커를 통해 이미지를 검색 하고, 이를 갤러리 형식으로 보여주는 것입니다.
파프리카에서는 사이트 Thumbnail 및 사용자 이미지를 위하여 이것을 사용 했습니다.
플리커 API : http://www.flickr.com/services/api/
Flickr API를 사용하여 조치를 수행하려면, 호출 규약을 선택하고, 끝점에 메소드 및 몇몇 인수를 지정하는 요청을 보내야 하며 그러면 포맷된 응답을 받게 됩니다.
API 색인 페이지에 나열된 모든 요청 형식은 명명된 매개 변수 목록을 사용합니다.
REQUIRED 매개 변수
method이(가) 호출 메소드를 지정하는 데 사용됩니다.REQUIRED 매개 변수
api_key이(가) API 키를 지정하는 데 사용됩니다.선택적 매개 변수
format이(가) 응답 형식을 지정하는 데 사용됩니다
Flickr API를 사용하여 검색하기 위해서는 api_key가 필요 합니다.
api_key를 얻기 위해서는 회원가입을 하여야 합니다. 이외 API를 통해 업로드를 진행 하기 위해선 비밀 키 값도 회원가입을 통해서 얻어야 합니다.
플리커 검색 요청 형식에는 (REST, XML-RPC, SOAP) 방식이 있습니다.
이중에서 가장 사용법이 간단하고 쉬운 REST방식을 사용하도록 하겠습니다.
REST 요청 형식
REST는 사용하기에 가장 단순한 요청 형식입니다. 이는 단순한 HTTP GET 또는 POST 조치입니다.
REST 끝점 URL은 http://api.flickr.com/services/rest/입니다.
flickr.test.echo 서비스를 요청하려면 다음과 같이 호출하십시오.
http://api.flickr.com/services/rest/?method=flickr.test.echo&name=value
기본적으로 REST 요청은 REST 응답을 보냅니다.
JSON 응답을 받기 위한 URL
http://api.flickr.com/services/rest/?method=flickr.test.echo&name=value&format=json
응답 형식 역시 가장 사용하기 쉬운 JSON 방식을 사용하도록 하겠습니다.
기본적으로 요청을 받기 위한 URL입력하고,
이 결과(JSON)을 가지고 결과 화면을 구성 하면 됩니다.
이것을 생각하면서 보면 이해가 확실히 쉬어 집니다!!!
Flickr API에서는 다양한 API Method 를 지원합니다.
Activity, Blogs, Auth, Collection, Favorite, Search, People, Geo
여기서는 search API를 가지고 이미지 검색을 하도록 하겠습니다.
flickr.photo.search
search api를 살펴보면 다향한 종류의 parameter들이 존재하는 것을 확인 할 수 있습니다.
이 중에서 필요한 것은 method(flickr.photo.search), format(json), api_key, text(검색어), per_page(페이지당 가져올 결과 수)입니다.
검색 URL
"http://api.flickr.com/services/rest/?method=" +
options.method+"&format=" + options.format + "&api_key=" + options.api_key + "&text=" + options.text +"&per_page=" + options.perpage
options.method+"&format=" + options.format + "&api_key=" + options.api_key + "&text=" + options.text +"&per_page=" + options.perpage
위의 URL로 검색을 하게 되면, 검색 결과가 담긴 JSON Object를 반환하여 줍니다.
그러면 우리는 이 Object를 가지고 결과 image를 구성하면 됩니다.
그러면 반환 JSON의 형식을 알아 보도록 하겠습니다.
JSON 응답 샘플보기
성공적으로 응답에 성공 했을 경우 아래의 결과를 보내줍니다.
{"photos":{"page":1, "pages":7, "perpage":12, "total":"78", , "photo":[{}]}, "stat":"ok"})
각각의 요소에 대해서 알아 보면.- page : 현재 페이지
- pages : 총 페이지
- perpage : 페이지당 가져오는 건 갯수
- total : 전체 건의 갯수
- photo : 가져온 image의 정보
- stat : 실패인지 성공인지 확인
사용자에게 검색 결과로 보여주는 이미지들의 photo요소의 값에서 추출하여 url을 구성 할 수 있습니다.
"photo":[{"id":"3782755242", "owner":"14698775@N08", "secret":"72162a6c9e", "server":"2474", "farm":3, "title":"Vancuber", "ispublic":1, "isfriend":0, "isfamily":0}
이 값들을 가지고 url을 구성하게 됩니다.URL 설명서
샘플
http://farm{farm-id}.static.flickr.com/{server-id}/{id}_{secret}_[mstb].jpg
플리커 검색 방법을 요약 하여 보면
- URL을 구성하여 검색을 요청 한다.
- 응답 결과를 확인 한 후, 응답결과를 가지고 이미지 URL을 구성한다.
- 구성항 URL을 조작 하여 사용자에게 보여준다.
파프리카에서 사용한 Flickr 갤러리도 이러한 방법으로 개발 되었습니다.
사용 방법
$( '#searchResult').favoriteFlicker( {
method : 'flickr.photos.search',
api_key : 'api-key',
format : 'json',
text : $( '#textSearch').val()
});
method : 'flickr.photos.search',
api_key : 'api-key',
format : 'json',
text : $( '#textSearch').val()
});
이렇게 검색 결과를 보여줄 영역(searchResult)에 favoriteFlicker()를 사용하면 flickr검색을 수행 할 수 있습니다. 검색을 수행 하기 위해서 검색 값(textSearch)의 값을 포함해야 합니다.
이렇게 하여 수행 하게 되면
Flickr Plug-in 검색 결과
이렇게 표시 됩니다.
모든 소스를 확인해 볼 수는 없고, 검색 URL을 호출 하여 응답 JSON을 가지고 결과를 구성하는 방법을 확인해 보도록 하겠습니다.
function getList( page) {
refresh();
$( '.flickrThumbnail').addClass( 'flickrIndicator');
$.ajax({
url : url+"&page="+page,
type : 'get',
dataType : 'jsonp',
jsonp : 'jsoncallback',
success : function(data) {
$.each(data.photos.photo, function( index, val){
var imgUrl = getImgUrl(val.farm, val.server, val.id, val.secret, null),
nextImgUrl = getImgUrl(val.farm, val.server, val.id, val.secret, 'default');
target.find( '.flickrResultImgs').append( "<a rel='group' title='"+nextImgUrl+"' href='#'>"+
"<img src='"+imgUrl+"' class='flickrImg' width='100' height='65'></a>");
});
makeNavigation( data.photos);
$( 'a').click( function(){
$( this).find( 'img').addClass( 'flickrImgSelected');
$( '.flickrDetail').empty();
imgurl = $( this).attr( 'title');
img = new Image();
img.src = imgurl;
$( '.flickrDetail').append( img);
}).mousedown( function(){
$( '.flickrImgSelected').removeClass( 'flickrImgSelected');
});
},
complete : function() {
$( '.flickrThumbnail').removeClass( 'flickrIndicator');
}
});
};
refresh();
$( '.flickrThumbnail').addClass( 'flickrIndicator');
$.ajax({
url : url+"&page="+page,
type : 'get',
dataType : 'jsonp',
jsonp : 'jsoncallback',
success : function(data) {
$.each(data.photos.photo, function( index, val){
var imgUrl = getImgUrl(val.farm, val.server, val.id, val.secret, null),
nextImgUrl = getImgUrl(val.farm, val.server, val.id, val.secret, 'default');
target.find( '.flickrResultImgs').append( "<a rel='group' title='"+nextImgUrl+"' href='#'>"+
"<img src='"+imgUrl+"' class='flickrImg' width='100' height='65'></a>");
});
makeNavigation( data.photos);
$( 'a').click( function(){
$( this).find( 'img').addClass( 'flickrImgSelected');
$( '.flickrDetail').empty();
imgurl = $( this).attr( 'title');
img = new Image();
img.src = imgurl;
$( '.flickrDetail').append( img);
}).mousedown( function(){
$( '.flickrImgSelected').removeClass( 'flickrImgSelected');
});
},
complete : function() {
$( '.flickrThumbnail').removeClass( 'flickrIndicator');
}
});
};
위 소스 코드를 살펴보면 jQuery에서 해당 URL을 AJax형식으로 요청을 하고, 이 결과를 'jsonp'형식으로 사용하는 것을 볼 수 있습니다. 결과 data형식에 'json'이 있는데 왜 'jsonp'형식으로 사용하였느냐 하면
내부 url로 요청을 할 떄는 'json'형식이 가능 하지만 외부 url로 요청을 할때는 'jsonp' 형식을 사용해야 합니다. 이렇게 해야 외부 응답 json을 가져 올 수 있습니다.
응답 결과(json)을 가지고 success에서 이 결과를 조작하여 img url을 생성하면 검색 결과를 화면에 보여줄 수 있습니다. 여기서는 $.each를 사용하여 검색 결과를 보여주고 있습니다.
makeNavigation()함수는 페이지 네비게이션을 만드는 함수 입니다.
자세한 소스 코드는 샘플 파일을 확인하세요.
flicker.zip