출처 :http://developer.yahoo.com/yui/imageloader/

YUI 의 ImageLoader 유틸리티는 페이지 내에 지금 당장 필요하지 않은 이미지들은 로딩하는 것을 잠시 뒤로 미루어 페이지 로딩 속도를 높이게 해주는 툴이다.
따라서 불필요한 로딩을 줄여준다.
대신 그 이미지가 필요한 순간 이미지를 호출한다.

이미지로더는 이미지 로딩을 위한 트리거와 초기화 시간제한 설정을 사용해 유저가 이미지를 보려는 시도전에 이미지를 로딩시켜준다.

예컨데... 옥션같은 쇼핑몰에 스크롤압박이 심한 상품페이지를 많이 봐왔을 것이다.
이 페이지를 열때 아래 보이지도 않는 부분이 로딩되는 동안 페이지가 버벅거린 경험들이 있을 것이다.
이럴때 유저 화면에 표지되는 이미지 부분만 먼저 로딩을 해서 페이지를 바로 보이게 하고 유저가 스크롤을 하려는 순간 아래부분 이미지를 가져오게 하는 것이다.
그렇게하면 유저가 느끼는 체감 속도가 향상되고 , 보이지도 않는 부분을 로딩하느라 불필요한 부하도 줄일 수 있다.

브라우저는 한 호스트당 2개의 커넥션만 동시연결을 허용한다.(권장사항) 이미지로더를 사용하면 프로그래머가 이를 효율적으로 사용할 수 있게된다.


예제보기

특히,
http://developer.yahoo.com/yui/examples/imageloader/imgloadfold.html
이 예제는 흥미롭다.
차이점을 알아보려면 창을 줄여서 아래이미지가 안보이게 한 후에 페이지를 다시 리로드 해보면 된다.
그후에 아래로 스크롤을 하거나 리사이즈를 해서 아래 이미지가 보이게 영역을 넓히면 아래이미지를 그때 로딩하는 것을 알 수 있다.

신고

댓글을 달아 주세요

YUI2.5.0 나왔다.

javascript/yui 2008.02.29 17:02 |

2월20일 이미 출시가 되었나보다.

출처 : YUI 2.5.0 Released — Big upgrades to DataTable, new Layout Manager, Flickr-style multi-file Uploader, and more

주목할 만한 것은

드디어 YUI-멀티파일업로더가 나왔다는 것.

The YUI Uploader is the same code that drives Flickr's multi-file photo uploading interface.
플리커 업로드 같은 깔끔한 업로더를 만들 수 있게 되었다.

그리고 그동안 왜 빨리 안만들었는지 모르겠지만, Resize 컨트롤 기능이 추가되었고
이걸 이용해 Layout-Manager 란 것도 생겼다.
레이아웃 매니저는 아직 베타지만 꽤 흥미로운 놈이다.

그리고 ImageCropper Control 도 추가 되었다.

여로모로 쓸모가 많을 듯 하다.

기타 이것 저것 많이 추가되고 샘플들도 많이 추가된 것 같은데..슬슬 살펴봐야 겠다.

신고

댓글을 달아 주세요

출처 : YUI 2.4.0 Released — Selector, Charts, Profiler, Script/CSS Get, and JSON Support

YUI 2.4.0 가 나왔다.

추가된 기능을 잠깐 살펴보면

Select Utility : CSS3 에서 엘리먼트를 지정하는 방식을 사용해 html 엘리먼트 노드를 지정할 수 있게 해준다는 것 같다. 아직 베타다.

var nodes = YAHOO.util.Selector.query('div p');
위 처럼 , div 태그 안에 있는 p 태그들을 지정하여 가져올 수 있게 해준다는 것이다.
proposed CSS3 Selector extensions 의 문법을 참고하면 도움이 된다.

Chart Control : 플래쉬로 동작하는 차트를 제공한다.
http://developer.yahoo.com/yui/charts/ 에서 볼 수 있다.
사용자 삽입 이미지


Get Utility : 동적으로 스크립트 노드나 CSS 링크 노드를 추가할 수 있게 해준단다.
크로스 도메인이 필요한 북마크릿 같은 것에서 쓸모가 있을 듯 하다. AJAX 가 크로스 도메인에 막혀 있기 때문에 그에 대한 대안으로 만들어 진 듯 하다.
또한 javascript 라이브러리를 꼭 필요한 경우에만 동적으로 로딩하기 위한 목적으로 쓸 수 있다.
http://developer.yahoo.com/yui/get/

Profiler : 유닛 테스트 등에 사용 될 수 있는 자바스크립트 프로파일러 제공.
성능측정 , 동작 정보등을 제공한다. 아직 관심이 없어서 그냥 패스.
http://developer.yahoo.com/yui/profiler/

JSON Utility : JSON 문자열을 오브젝트로 만들어주는 파서와 오브젝트를 JSON 문자열로 만들어 주는 문자화 기능을 제공한다.
http://developer.yahoo.com/yui/json/ 

Button : 다양한 버튼 기능 추가
사용자 삽입 이미지
http://developer.yahoo.com/yui/button/

Drag&Drop , Calendar , Rich Text Editor 등이 보강 되었다.
http://developer.yahoo.com/yui/dragdrop/
http://developer.yahoo.com/yui/calendar/
http://developer.yahoo.com/yui/editor/
신고

'javascript > yui' 카테고리의 다른 글

YUI-ImageLoader Utility  (0) 2008.04.01
YUI2.5.0 나왔다.  (0) 2008.02.29
YUI 2.4.0 Released — Selector, Charts, Profiler, Script/CSS Get, and JSON Support  (2) 2007.12.05
YUI2.3.0 가 릴리즈 되었다.  (0) 2007.08.22
Cross Domain AJAX Request  (4) 2007.07.13
YUI 동적 로딩시 버그  (2) 2007.06.25

댓글을 달아 주세요

  1. Favicon of http://mop.freerunso.com/ BlogIcon Nike Free Run 2 2013.04.10 23:56 신고 Address Modify/Delete Reply

    진정한 자신감, 사람들 처음부터 맹인 신뢰 대한 열등감 중간에서 자신감을 사실에 더 자신감이 없습니다.

  2. Favicon of http://kdy.gencbeyin.net/ BlogIcon oakley sunglasses cheap 2013.04.11 14:50 신고 Address Modify/Delete Reply

    삶의 목표는 너무 많은 아니라, 계속 한 것은, 투자 관심과 열정을 찾아, 당신은 성공합니다.

YUI 블로그를 보니 7월31일 발표된 듯 하다.
요즘 스크립트 질을 안하다보니 몰랐네...

6가지 새로운 것이 라이브러리에 추가 되었고, 스키닝이 개선 되었고, 250여가지나 개선되거나 버그 픽스 되었다고 한다.

대충보니 정말 비주얼은 많이 개선된 것 같다.

블로그에서 언급한 내용을 잠시 보면,

1. Rich Text Editor(beta) 
크로스 브라우저 텍스트 에디터를 지원한다. 오......(다른 에디터도 되던거 아닌가.ㅡㅡ;)
암튼 yui 라이브러리로 에디터 까지 지원되면 땡큐지 머

사용자 삽입 이미지
야후답게 플리커와 연동되는 기능도 있나보다. 당연히 상단 툴바는 커스터마이징이 된다고 한다.
아직 베타!

2. Base CSS
크로스 브라우징을 위한 다양한 CSS 템플릿을 제공해 주는 것인데, 전에도 있던 것같은데..
새롭게 더 보강한 것 같다.

3. YUILoader Uitility(beta)
재미있는 발상인 듯 하다. 스크립트 라이브러리를 스태틱하게 하드 코딩하는 것이 아니라, 동적으로 필요한 것을 로딩하게 하여 사용하는 것을 만든것으로 보인다.
모든 페이지에서 필요없는 스크립트 라이브러리를 로딩하는 불합리함을 해결하고
프로그래머가 좀 더 직관적인 코딩을 할 수 있게 해주는 것 같다.

4. ImageLoader Utility (experimental)
 페이지의 빠른 로딩을 위해 이미지가 필요한 시점까지 이미지로딩을 컨트롤하는 것이라고 하는데..
아직 실험중이므로 패스

5. Color Picker Control(beta)
사용자 삽입 이미지

이러건 제공한다는 ...

6.YUI Test Utility(beta)
YUI 유닛테스트 프레임웍을 제공한다고 한다. 안써봐서 모르겠지만 좋은 것이겠지.


그밖에 컨트롤들의 스키닝(스타일 입히기)에 대해 매우 강조를 하는 것으로 봐서 , 전 보다는 스키닝이 쉽게 신경을 썻나보다.

전에 짜증났던 버그가 하나 있었는데 해결 되었는지 함 봐야겠다.
신고

댓글을 달아 주세요

FindingAndPreventing_CrossSiteRequestForgery.pdf

Finding and Preventing Cross-Site Request

북마크릿에 대한 여러가지 테스트를 하던중, 당연히 될 것이라고 생각햇던 북마크릿에서의 AJAX 호출이 갑자기 에러를 토해냈다.
"Access Deny".....

이유를 찾아보니 브라우저의 원천서버 정책(server of origine)에 의해 타 도메인으로 요청을 보낼 수가 없다는 것이다.(Cross-Domain Ajax Insecurity)

해결책을 찾아 몇시간을 골머리 썩다가 아이러니 하게도 "Finding and Preventing Cross-Site Request" 라는 자료를 통해 해결책을 찾게 되었다.

간단히 말하면, "Ajax 요청은 막히지만 폼 전송은 가능하다" 이다.
오...맞다 트랙백도 그래서 문제가 됐었다. 전에 문제라고 생각했던 것이 절대절명의 위기에서 희망으로 떠올랐다.

자 그럼 AJAX 처럼 콜백을 받아 처리할 방법은 없는가?

여기서 갑자기 YUI 의 connection manager 를 팀원들을 위해 문서화 하면서 해석했던 기억이 났다.
그때 YUI 는 AJAX 로 파일 업로드를 하기위해 폼 전송시 XmlHttpRequest 를 사용하지 않고 IFrame 을 사용했다. 그리고 콜백을 지원했다.(YUI 의 Forms and File Upload )

YUI 를 수개월간 써오면서.. 바로 생각해 내지 못했다니...돌고 돌아 결국 가장 가까운 곳에 해답이 있었다.

허탈하고도 기쁘도다

콜백 호출은 되나...response 객체의 responseText 값을 읽을 수가 없다..역시 보안문제로..

다른 방법을 시도중...

---이하 답글에 따라 추가한 내용 ----

문제가 됏던 부분은 바로 로그인 처리문제였다.
데이타의 전송은  AJAX  를 사용하지 않고 폼 전송으로 가능하지만 북마크릿의 로그인 처리가 문제가 되었던 것이다.
할수없이 로그인 처리는 북마크릿에 아이프레임을 사용하기로 했다. 하지만 이방법도 해결해야 하는 것들이 있다.

문제1 - 아이프레임으로 로그인 폼을 보이게 하는 경우 로그인 처리를 수행하여도 도메인이 다른 사이트의 쿠키를 거부하는 것이 브라우저의 기본 설정이다. 따라서 쿠키로 로그인 인증하는 경우 쿠키가 무시되어 로그인이 안된다.

해결1 - P3P 해더를 쿠키를 읽어갈 수 있도록 보안을 설정해준다.
아이프레임 안에 들어갈 사이트에서 P3P 해더를 설정하면 쿠키가 유효하게 동작한다.

문제2 - 로그인처리후 서로 데이타에 접근할 수 없는 상태에서 parent  는 어떻게 로그인이 되었는지 알수있나? 이 부분이 가장 까다로웠다.

해결2.1 - 아이프레임의 사이즈를 보고 판단한다. 두가지가 중요하다. 하나는 ifame 내의 페이지에서 parent 안에 있는 아이프레임의 사이즈를 줄일 수 있는가? 가능하다.  resizeTo 를 이용해 줄일 수 있다. 즉 로그인이 안된상태에서는 아이프레임을 늘려서 로그인 창을 보여주고, 로그인 처리가 되엇으면 아이프레임창을 0 으로 줄여버린다. 이 창 사이즈를 체크하면 로그인이 되었는지 아닌지 알 수 있다.

해결2.2 - 다른 문제 하나는 어느시점에서 아이프레임 사이즈를 체크할 것인가 이다. 무언가 이벤트가 있어야 체크할 시점을 결정할 수 있다. onload 는 잘 동작하지 않는다. 아이프레임의 onreadystatechange 이벤트를 이용해서 아이프레임이 로드 완료된 시점에서 아이프레임을 체크한다. but, 바로체크하면 안된다. 문서가 로드되고 resizeTo 로 사이즈가 조정될 시간을 줘야한다.
setTimeout 을 이용해 약간의 딜레이를 갖고 사이즈를 체크한다.


혹시 더 좋은 해결책을 아시는 분 트랙백 바랍니다.

신고

댓글을 달아 주세요

  1. Favicon of http://efolder.tistory.com BlogIcon 하루하루 2007.07.12 14:40 신고 Address Modify/Delete Reply

    성공 하셨습니까?
    저도 같은 문제로 고민하다가 우연히 이곳에 들르게 되었네요. ^^
    성공하셨으면 노하우좀 부탁 드려요~ ^^;;

  2. 무쇠다리 2007.07.13 09:26 신고 Address Modify/Delete Reply

    아 ..해결은 햇습니다.
    글을 업데이트 하도록 하지요

  3. 지나가다 2008.05.26 16:31 신고 Address Modify/Delete Reply

    혹시 dynamic-javascript로 해보셨나여?? 꽁수입니다만.
    <script type="text/javascript">
    var returnValue = '';
    </script>
    <script type="text/javascript" src="processURL.asp(or etc..)"></script>

    * processURL.asp페이지는 서버사이드에서 처리 한 결과를 스크립트 returnValue 변수에 값을 넣어 주는 역활을 합니다.


    예전에 ajax로 작업하기전에 즐겨 사용하던 방식입니다.

http://www.nabble.com/Re%3A-dynamically-load-YUI-like-scriptaculous-p10713511.html

IE 에서만 나타나는 버그이데..
yui 개발자가 실수한듯..

document.write ('<scr'+'ipt id="_yui_eu_dr" defer="true" src="//:"></script>');
var el = document.getElementById ("_yui_eu_dr");

document.write 로 스크립트태그를 삽입후 참조할때, el 이 널이라서 에러가 남.

현재 2.2.2. 버젼에서 나는 에러

어여 수정되어야 할텐데..

신고

댓글을 달아 주세요

  1. Favicon of http://www.drebeatsoutletus.com BlogIcon Cheap Beats By Dre 2011.12.17 17:47 신고 Address Modify/Delete Reply

    훌 륭 한 작품 이다.

  2. Favicon of http://www.usbeatsbydrdre.com BlogIcon Cheap Beats By Dre 2011.12.17 17:47 신고 Address Modify/Delete Reply

    다른 느낌 을 나 누 는 감사합니다.

AJAX.NET vs YUI

개발하면서 2007.06.22 11:30 |

yui : http://developer.yahoo.com/yui/
ajax.net : http://ajax.asp.net/

asp.net 으로 프로젝트를 진행중인데...

1년전에 했던 것은 atlas(ajax.net beta 의 코드명)를 사용 했었다.
asp.net 엔 당연히 아틀라스가 궁합이 맞을 것이란 생각에서다.
아틀라스는 나름 훌륭한 툴이였다. 개발자가 웹표준이니 ajax 에 대한 이해도가 없어도 쉽게 ajax 기능을 추가 할 수 있었다. 게다가 비주얼 스튜디오에서 컨트롤을 다루듯 코딩하는 일관성을 유지해 주었다. 지금은 정식 1.0 이 나오면서 더 많은 발전이 있었다.

아틀라스의 가장 큰 장점은 웹메소드 호출 기능일 것이다. cs 파일에 정의한 메소드를 매우 간단한 코딩으로 클라이언트에서 호출할 수 있게 해주는 것이다. 비동기 통신에 대한 아무런 이해가 없어도 가능하다.
또한 http://ajax.asp.net/ajaxtoolkit/ 에 셈플로 제공하는 툴킷은 멋진 화면 연출을 도와준다.
이렇게 게으른 asp.net 개발자에게 아틀라스는 매우 좋은 툴이된다.
ajax.net 은 asp.net 개발자에게 주로 포커싱된 것이라고 보면 되겠다.(아틀라스 베타에서는 다른 플랫폼에서도 쓸수있는 정보를 주었는데...1.0 에서는 못찾았다.) 자바스크립트 라이브러리가 아니라 자바스크립트 제너레이터에 가까운 것 같다.

반면 YUI (Yahoo! User Interface Library) 는 완전히 클라이언트용 자바스크립트 라이브러리다.
현재 하는 진행중인 프로젝트에서는 yui 를 사용중이다.
asp.net 으로 하면서 yui 를 채용한 이유는 자유도 때문이다. ajax.net 은 커스터마이징 하기가 너무 어려웠다. 툴킷에 있는 것을 사용하기에는 편리햇지만 그것을 내가 수정해서 쓰기가 힘들었다.
반면 yui 는 친숙한 자바스크립트면서 조각조각 잘 쪼개서 정리되어 있어서 커스터 마이징 해서 쓰기가 개인적으로 편리했다.

자바스크립트에 자신있는 경우라면 yui 가 좀 더 편하지 싶다. 반면 서버사이드 코딩에 더 친숙한 사람이라면 ajax.net 더 낫다고 판단하지 않을까 싶다.
ajax.net 의 웹메소드와 업데이트판넬을 포기하는 것이 쉽지 않았지만, yui 에 꽤 만족하고 있다.

신고

'개발하면서' 카테고리의 다른 글

우리 회사 사훈 - 삽질금지  (5) 2007.06.29
"너라면 쓰겠니?" 정신, 그게 필요하다.  (3) 2007.06.26
AJAX.NET vs YUI  (3) 2007.06.22
근의 공식  (5) 2007.06.21
VOD2.0 홍보 사이트  (3) 2007.06.18
Robots.txt 사용법  (3) 2007.06.08

댓글을 달아 주세요

  1. Favicon of http://www.hermesbagsoutletsale.com BlogIcon Hermes Bags 2011.12.15 18:19 신고 Address Modify/Delete Reply

    아이구, 괜 찮 아요 요.아주 재미 있 었 어요.

  2. Favicon of http://www.drebeatsoutletus.com BlogIcon Monster Beats Outlet 2011.12.15 18:19 신고 Address Modify/Delete Reply

    훌 륭 한 작품 이다.

  3. Favicon of http://www.drebeatsoutlet4u.com BlogIcon Monster Beats Outlet 2011.12.15 18:19 신고 Address Modify/Delete Reply

    다른 느낌 을 나 누 는 감사합니다.

출처: http://developer.yahoo.com/yui/docs/YAHOO.util.Dom.html#getXY

복잡한 Dom 구조에서 현재 선택한 object 의 절대 좌표를 구해야 할때가 있다.
오브젝트의 이벤트(마우스 오버 같은) 발생시 그 위에 Div 로 무언가를 띄워야 할 경우가 그렇다.

YUI 에서 이럴때 좌표를 구할수있는 메소드를 지원해 준다.


YAHOO.util.Dom.getXY(object);

위의 메소드를 사용하면 object 의 x,y 좌표가 어레이로 리턴된다.
첫번째가 x 좌표 두번째가 y 좌표다.

getX,getY 도 지원한다.

오브젝트의 top,left,bottom,left 를 알아내기 좋은 getRegion 도 참고 할 만한다.


 

신고

댓글을 달아 주세요

  1. Favicon of http://www.hermesbagsoutletsale.com BlogIcon Hermes Bags 2011.12.11 17:08 신고 Address Modify/Delete Reply

    아이구, 괜 찮 아요 요.아주 재미 있 었 어요.

  2. Favicon of http://www.drebeatsoutletus.com BlogIcon Monster Beats Outlet 2011.12.11 17:08 신고 Address Modify/Delete Reply

    훌 륭 한 작품 이다.

  3. Favicon of http://www.drebeatsoutlet4u.com BlogIcon Monster Beats Outlet 2011.12.11 17:08 신고 Address Modify/Delete Reply

    다른 느낌 을 나 누 는 감사합니다.

티스토리 툴바