Rev. 2.73

홍보합니다. 'Ajax prototype.js 프로토타입 완전분석'의 저자인 김영보씨는 책 중심의 세미나를 개최합니다. 주로 다룰 내용은 Prototype.js의 전반에 걸친 이해와 활용입니다. 본 세미나의 목적은 바쁜 현대인을 위한 쪽집게식 과외라고 보시면 되겠습니다. prototype.js의 핵심을 정리하여 12시간 동안 하루에 걸쳐 다루게 됩니다. 그리고 깜짝 이벤트로 제가 한시간동안 출연(?)하게 되었습니다. 저는 Prototype.js와 관련된 Ajax 애플리케이션 데모와 실무에 관한 내용을 준비할 예정입니다. 수강료가 부담되기는 합니다만, 많은 관심과 참여 부탁드립니다. 자세한 내용은 아래를 참고하세요.

1. 일자 : 2007년 5월 19일(토요일)
2. 시간 : 09:00 ~ 19:00
3. 장소 : 토즈 강남대로점 (약도 참조)
4 .강사 소개 : 김영보

4.1 저서: Ajax prototype.js 완전분석, Ajax 활용, 요구분석을 위한 Event Process 모델링
4.2 강의 실적
4.2.1 비즈델리에서 동일 내용으로 2007.1월과 3월에 2회 실시
4.2.2 2006년 Ajax 컨퍼런스/세미나 강사 및 개인 개최(7회)
4.3 카페: http://cafe.naver.com/requirements.cafe
5. 강사 소개: 파이어준
6. 세미나 진행 방법
6.1 강의와 실습을 동시에 진행
6.2 준비 사항: 노트북(효율성이 떨어질 수 있으므로 되도록 꼭 지참하시기 바랍니다)
6.3 ‘Ajax prototype.js 프로토타입 완전분석’ 책 전체를 다루므로 예습은 필수입니다
7. 인원 : 50명
8. 수강 신청
8.1 수강료: 150,000원(부가세 별도), 세금계산서 발행
8.2 접수: tonextday@gmail.com (김영보)
9. 기타
9.1 교재 제공: 310 페이지
9.2 Ajax 애플리케이션 사례 소스 제공
9.3 중식 제공
9.4 세미나 후 뒤풀이
9.4.1 가칭 ALC(Ajax Leader Club) 결성을 협의하려고 합니다
9.5 주차가 어려우니 대중 교통을 이용하시기 바랍니다.

그나저나 결국은 이 블로그에 실명을 밝히게 되는군요. 이거이거 낭패인걸요...

Comments

js-kit.com에서 서비스하는 별점평정 위젯입니다. HTML 문서의 어디에나 붙이기 편한 형태로 제작되어 배포되고 있습니다. 별점평정 뿐만아니라 설문조사 및 댓글 그리고 댓글과 혼합된 평정 서비스를 모두 무료로 제공합니다. 굿 아이디어입니다. 이 위젯들은 작지만 강력한 기능을 가지고 있습니다. 특히, 별점평점 위젯은 저의 개인 프로젝트 목록에 있기도 합니다. 공부삼아 달아본 것이 썩 마음에 들어 앞으로 계속해서 쓸지도 모르겠습니다. 아래의 삽입방법을 보세요 정말 간단하지요?

<div class="js-kit-rating"></div>
<script src="http://js-kit.com/ratings.js"></script>

유일한 단점이라면 외국에서 받아오는 서비스라 속도가 느린점이 껄끄럽기는 합니다. 그래서 설치 방식을 조금 변형했습니다. 필요한 파일을 불러오는데 js-kit.com의 스토리지를 사용하지 않고 로컬에 두었더니 버벅임은 많이 줄어들었습니다.(손 댄김에 한글화까지;;) 라이센스가 너무 명확하여 변형한 소스를 공개하지는 못하겠군요. 자세한 사용방법은 지인우인님의 포스팅을 참고하세요.

그리하여, 아래에 보시는 것처럼 아주 예쁜 별점평정 위젯이 달렸습니다. 많은 평정 부탁드립니다. ^^;

Comments

analytics.gif

최근 자바스크립트의 사용량이 많아지면서 트래픽도 덩달아 증가하고 있다. CPU 연산 의존도가 높은 자바스크립트는 당장 필요치않은 라이브러리들까지 처리하려니 브라우저도 죽을 맛이다. 조금 더 효율적인 처리방법은 없을까?
근간 호스팅 업체에서 제공하는 트래픽 분석 프로그램을 모니터링해 보니 좌측화면과 같이 상위권을 휩쓸고 있다. 브라우저가 파일캐시를 한다지만 신규방문자가 70-80% 이상이면 이것이 대안이라고 보기 힘들다. 자바스크립트 파일을 패키드(packed)하여 단순히 크기를 줄이는 방법도 있지만 브라우저에 부담을 주는 것은 마찬가지이다.

예를 들어 보자. 이미지를 멋지게 표현해주는 라이트박스(Lightbox JS)를 설치했으나 방분객은 이미지를 조회하지 않고 떠났다. 방문객은 필요치않은 자바스크립트 파일들을 다운로드 한 결과를 가져왔다. 물론 서버단에서 이미지가 있는 경우만을 체크하여 라이브러리를 로드했다 하더라도 작동을 시키지 않은것 또한 낭비인것은 사실이다. 페이지에 꼭 필요한 자바스크립만 로드하고 나머지는 필요한 때 동적으로 로드하도록 구현하여 쾌적한 브라우징 환경을 제공하면서 트래픽 손실도 줄이는 일석이조의 효과를 누려보자.

우선 자바스크립트를 동적으로 불러올 함수가 필요하다. 일전에 소개했던 "인클루드 (자바스크립트 || 스타일시트) 파일"을 변형해서 사용했으며 내용은 아래와 같다.(예제에 사용된 코드는 Prototype.js 1.5.1_rc2 기반으로 작성됨)

자, 이제 준비는 끝났다. 예를 들어 Scriptaculous의 dragdrop.js(30.46kb)을 동적으로 호출하는 코드를 만들어보자.

//Include dragdrop.js on action
var Draggable = function(element, options){
	new Include('dragdrop.js', function(){
		new Draggable(element, options);
	}); 
};

'Draggable' 이라는 함수를 미리 선언했다. 이 함수는 dragdrop.js의 메인 클래스이름과 동일하다. 만약 어딘가에서 'Draggable' 클래스를 작동시키면 'dragdrop.js'파일이 로드되고 작동시킨 함수는 온컴플리트(onComplete) 이벤트에 의해 실행되며 위에서 미리 선언한 함수는 'dragdrop.js' 원래의 클래스로 오버라이드(override)되는 로직이다. 위 코드는 이곳에서 실제 사용되는 코드로 키워드 뷰어나 댓글수정 등(Draggable 이 적용된 곳)에 적용되어 있으니 직접 사용해보자. Firefox의 JSView 플러그-인을 설치하면 자바스크립트 및 스타일시트의 사용현황을 쉽게 확인 할 수 있다.

var FishEye = function(element){
    new Include('fisheye.js', function(){
        new FishEye(element);
    });
};
var CMotion = function(element){
    new Include('cmotion.js', function(){
        new CMotion(element);
    });
};
var Favicon = function(element){
    new Include('favicons.js', function(){
        new Favicon(element);
    });
};

위 코드는 어떤 역할을 할까? 그렇다. 해당 기능이 작동할 때에만 자바스크립트가 로드되고 오버라이드 된다. 'fisheye'는 어안메뉴이고, 'cmotion'은 블로그 상단의 썸네일 모션이며, 'favicons'는 댓글쓴이의 이름앞에 패비콘을 찍어주는 작은 단위의 라이브러리들이다. 이 함수들을 개별 파일로 분리하여 필요한 때에 필요한 파일을 동적으로 호출하는 것이다. 오버라이딩하는 기법을 사용하지 않고 아래처럼 단순히 로드해서 사용해도 무방하다.

if($$('pre code').length){
	new Include('syntax.js, syntax.css');
}

끝으로, 이 작업을 거친후 페이지당 약 50-60KB로 용량을 절약할 수 있었으며, 하루평균 최소 100MB이상의 트래픽 손실 및 비용 절감 효과가 있다는 결론이 나왔다. 더불어 브라우저가 로딩압박에서 조금은 벗어난 것을 체감할 수 있었다. 앞으로 30~50KB이상을 더 세부적, 체계적으로 분리할 예정이며, 마치 관례처럼 사용되고 있는 자바스크립트 사용법(All in header)에 조금씩 변화를 가져볼 생각이다.

※ 위 소스는 프로젝트 위키에서 다운로드 할 수 있습니다.

Comments