jQuery mobile :: content 영역 사이즈를 window 사이즈에 넘치지 않게 표시하는 방법

jQuery mobile 은 각 페이지 요소를 표현하는 CSS 설정이 default로 함께 딸려 있다. Prototype 용으로 이런 default 설정을 그대로 사용하는 것이 매우 편리하지만, 앱 디자인을 customize하기 위해선 default CSS 설정을 제거하고, 새롭게 CSS 를 설정해 디자인을 조정해야 한다.

본 post에서는 jQuery mobile 의 페이지 기본 요소인 header, content, footer 로 이루어진 페이지에서 이들 세 요소가 전체 화면 영역을 차지하도록 하는 한 가지 방법을 소개한다.

# jQuery mobile 의 기본 페이지 설정

<section data-role='page' >

  <div data-role=header >

      HEADER

  </div>

  <div data-role=content>

      CONTENT

  </div>

  <div data-role=footer>

     FOOTER

  </div>

</section>

구체적으로, header와 footer 를 설정하고 남은 영역을 content 가 완전히 차지하게 하는 것이 목표. 이 때 content가 차지하는 영역은 전체 화면 영역에서 header와 footer를 차지하는 영역을 제외한 나머지 영역을 단 1px 도 넘거나, 부족하지 않게 하는 것이 핵심이다.


방법1 :: Static  할당 
header와 footer 그리고 전체 화면 크기를 확인해보고, 전체 화면 크기에서 header와 footer를 제외한 영역을 px단위로 정확하게 <div data-role=content> 에 할당한다.

문제점: 서로 다른 모바일 기기들은 각기 다른 화면 사이즈를 가지는데, 이 방법을 이용한다면 각 모바일 기기들에 따라 서로 다른 content 영역 사이즈를 할당해야 하는데,  상당히 번거롭다는 점 뿐만 아니라, 현실적으로 존재하는 모든 device를 테스트 하기 어렵다는 근본적인 문제에 봉착한다.



방법2::  Dynamic 할당
 각 요소 사이즈를 javascript를 이용해 계산하고, content 사이즈를 할당하는 방법. javascript를 통해 동적으로 사이즈를 할당하기 때문에, 다양한 device에서도 제대로 된 영역의 사이즈를 계산하고 할당할 수 잇다.



Step 1) header와 footer 영역 사이즈 계산 
data-role=header, footer, content 모두에 padding 값이 설정되어 있다. 요소가 차지하는 전체 사이즈는 height + padding + border 이기 때문에 header와 footer 가 차지하는 공간을 계산하기 위해서는 height+padding+border 를 계산해주는 jquery의 outerHeight 메소드를 이용한다.

var head_height=$('[data-role=header]').outerHeight();

var footer_height=$('[data-role=footer]').outerHeight();

Step 2) Content 영역의 default CSS 제거 
content 영역의 padding, border 사이즈를 고려하여 height 를 알아내고, height 사이즈 만을 변경할 수도 있지만, 이 보다는 default padding, border 사이즈를 0으로 두고, height 사이즈를 변경하고, 필요하면 이후 다시 padding, border 를 CSS 를 이용하여 할당하는 쪽의 코드가 더 간결하고 명확하다는 개인적인 생각이다. 따라서 여기서는 content의  default CSS 를 제거한다.

# content 의 default padding, border 사이즈를 0으로 설정한다.

div[data-role=content]{

  padding:0;

  border:0

}

Step 3) header와 footer 가 차지하는 영역을 제외한 영역을 height가 차지하도록 설정
앞서 계산한 header와 footer 의 영역을 제거한 나머지 공간을 content가 차지하도록 설정을 한다.

  # 전체 화면의 높이 $(document).height() 에서 앞서 계산한 head와 footer의 높이를 뺀 공간의 높이를 계산하고 이를 content 영역의 높이로 설정

  var content_height= $(document).height() - head_height - footer_height ;

 $('[data-role=content]').css('height', content_height+'px');

온라인 대학 :: 교육 산업의 파괴적 혁신

Udacity 창업자 Sebastian Thrun.  스탠포드 교수직을 사임하고 Udacity를 런칭.
구글 펠로우이자, Udacity에서도 다양한 강의를 직접 강의하고 있다. 

최근 미국에선 대학 교육의 파괴적 혁신이 혁명적으로 진행되고 있다. 이러한 혁명의 시작은 스탠포드 대학의 Sebastian Thrun의 인공지능입문 강의의 폭발적인 반응과 함께 성공적으로 런칭한 Udacity( 이에 관한 자세한 내용은 http://health20.kr/2515 를 참고)이고, 올해 3월 부터 본격적으로 강의가 시작되어 성공적으로 정착하고 있는 Coursera ( cour-say-ruh 로 발음하도록 뉴욕타임즈 기사에 실려 있으니 한국어론 코사이러 정도로 표기하면 될까? )를 또다른 대표적인 대학 교육 혁신 기업으로 들 수 있다.


 그렇다, '기업' 이다.

 몇년 전 런칭한 MIT OCW(open course ware)는 MIT 대학의 강의들을 동영상/녹취로 강의 내용과 강의에서 제공되는 각종 숙제/보충자료 그리고 중간/기말 고사 문제와 해답 모두를 웹사이트에 모아 공개하는 웹사이트지만, 이는 비영리목적이며 이를 위한 기부금을 따로 받아 운용하고 있다.

 하지만, Udacity나 Coursera는 모두 스탠포드 대학 교수들이 직접 창업을 하였지만, '이윤'을 추구하는 기업이며,  돈을 벌 수 있는 비즈니스 모델도 명확하게 가지고 창업을 했고, 이들이 가진 비즈니스 모델 또한 실리콘밸리의 벤처투자가들에게 명확하게 인정이 되어 Coursera 같은 경우엔 실리콘밸리에서 가장 존경받는 클라이너퍼킨스를 위시한 서너군데의 벤처캐피탈로 부터 우리돈으로 160억 이상의 자금을 투자 받아 설립이 되었다.

Udacity의 검색엔진 개발 강의에 참여하는 구글 창업자 세르게이 브린.
사진은 강의 인트로 동영상 중 한 장면

대학 교육 혁신 기업들의 비즈니스 모델 

Coursera의 CEO 가 밝힌 비즈니스 모델은 크게 두가지다.

Coursera 창업한 스탠포드 대학 컴퓨터공학과 교수 2인 Andrew Ng과 Daphne Koller 

첫번째는 '프리미엄 교육 서비스' 다. 대학 교육을 제공하는 기업으로 당연히 첫번째로 생각할 수 있는 비즈니스 모델이다. Udacity나 Coursera는 기존의 온라인 강의 사이트들 처럼 그냥 학교 수업 내용을 비디오로 찍어 올린 수준이 아니라, 이를 위해 새로운 도구와 기법들을 다양하게 개발하여 온라인에서 강의를 효율적으로 소화할 수 있게 만들어 올리고 있으며, 이는 앞으로 더욱 정교하고 효과적인 형태로 발전을 거듭할 것이라 예상된다. 하지만 역시나 온라인 교육이라는 한계는 필요한 경우에 질의 응답 등을 이용자가 원하는 만큼 할 수 없다는 것에 있지 않나 싶다. 프리미엄 교육 서비스는 이런 부분에서 가능하지 않을까? 한달에 일정한 돈을 내면, 정해진 숫자 만큼의 질의에 대해 '교수 직강 답변' 을 받을 수 있게 한다던가 하는 형태로. 프리미엄 교육 서비스 컨텐츠는 이런 질의 응답 외에도 창의적으로 다양하게 만들어지지 않을까 예상해 본다.

두번째는 한마디로 '헤드헌팅'.  Udacity 창업자 세바스찬의 첫번째 강의 인공지능특강은 전세계에서 16만명이 수강을 했고, 이 중에 끝까지 수업을 완주한 숫자가 2만여명, 그리고 이중 성적이 만점에 근접한 학생들이 1천명 가량 되었다고 하는데, 이들을 실리콘밸리의 IT 기업들에 취업할 수 있는 기회를 주었고, 상당수가 실제로 취업을 하였다고 한다.  현재 Udacity와 Coursera가 제공하는 강의들은 대학/대학원 수준의 컴퓨터 공학/통계/수학 등 이공계 과목들을 위주로 런칭이 되고 있는데, 이런 강의들 특히나 세계 최고 대학의 교수들 그리고 업계 전문가들이 진행하고 이들이 직접 내는 과제와 시험들에서 좋은 성적을 거두는 학생들은 정말 뛰어난 학생들일 것이다. 실리콘밸리 그리고 미국의 기술 기업들은 이런 인재들에 항상 목말라 있다. 이런 인재들을 질좋은 강의로 끌어들여 회사의 DB에 넣어두는 것 자체가 회사의 자산이 되고, 이 정보를 바탕으로 중간에서 기업들의 요구에 맞는 학생들을 중계해주는 서비스는 충분히 지속가능한 비즈니스 모델이 되리라 예상한다.


Udacity, Coursera, MITx, Khan Academy,  iTunes U :: 개인적 경험 

MIT OCW 에서 부터 바람이 분 대학 교육 컨텐츠의 온라인화는 Khan Academy와 Udacity가 성공적으로 런칭되면서 가속화 되고 있다. Coursera와 같은 스타트업 기업들 뿐만 아니라, 애플도 iTunesU 를 독립적인 앱으로 런칭해 제공하면서 본격적을  경쟁에 뛰어 들었다.

나는 Udacity, Coursera, MIT OCW, Khan Academy , iTunesU 의 강의들을 섭렵해 봤는데, 이에 대한 평가를 좀 해보자면, MIT OCW과 iTunesU 는 대학의 강의를 날것 그대로 옮기는데 초점이 맞추어져 있다. 강의를 동영상으로 그대로 찍어 제공하고, 진도에 맞추어 제공되는 보충자료와 숙제 그리고 시험 자료를 제공하여 MIT 나 하바드 대학에 다니지 않고도 이들 대학에 다니는 학생과 완전히 같은 강의와 내용을 공부할 수 있게 한다.

Coursera도 이와 같은 맥락에 있다. Coursera는 스탠포드, UC버클리 등 5개 대학의 강의를 제공하는데( 현재 Princeton, Stanford,  University of Michigan , University of Pennsylvania 의 4개 대학이 공식적인 Coursera의 파트너로 참여하고 있고 UC Berkeley 는 강의를 제공하고 있지만 공식적인 협력 파트너는 아니다), 기본적으로 강의를 맡은 교수들은 자신이 현재 대학에서 강의하는 강의들을 제공한다. 하지만 MIT OCW이나 iTunesU 와 같이 실제 강의실에서 진행되는 수업 그대로 찍어 올리지 않고, 온라인에서 받아들이기 편한 형태로 칠판 대신 전자펜으로 직접 쓰면서 진행이 되고, 강의도 일주일 3시간 짜리를 10~20분 정도로 토막 내어 여러개의 강의로 나누어 제공이 된다.
또 중간 중간 퀴즈도 넣어 사용자의 집중력을 붙들어 메어 두고, 스스로 강의 내용을 제대로 소화하고 있는지 돕는 장치도 마련되어 있다.

Udacity는 Coursera 보다도 더 잘게 강의 내용을 나누어 제공한다. 보통 하나의 단락은 1-3분 내외로 하나의 토막은 하나의 컨셉만 담고 있고, 각 토막의 마지막은 퀴즈를 제공해 내용을 체크하고 넘어갈 수 있도록 한다. 또 코스 길이가 제각각인 Coursera에 비해 Udacity 강의들은 대부분 7주 강의로 통일되어 사용자가 학습을 설계하는데 좀 더 편하다는 느낌이다.  Udacity가 강의에 이용하도록 제작한 도구(소프트웨어와 전자펜 시스템)는 Coursera의 그것에 비해 더 자연스럽고 보기 편하다.

전체적으로 Udacity의 형태가 가장 온라인 교육에 적합하게 느껴지는데, 온라인 강의에 대한 사용자의 집중을 가장 잘 잡아둔다고 개인적으로 느껴지기 때문이다. 3분 내외로 짧게 짧게 핵심적인 컨셉을 강의하고 이를 확인하는 퀴즈로 진행이 되니, 지루할 틈이 없고, 키보드를 만지작대거나 다른 브라우저를 중간에 열어보는 일이 없다. Coursera는 20분 내외의 길이라 처음엔 적당하다고 느껴지지만, 중간에 지루해지거나, 조금이라도 아는 내용이 나오면 쉽게 잠깐 다른 창으로 옮겨 뉴스를 본다거나 하는 경우가 많이 생겼다. ( 물론 나 스스로의 집중력이 문제이기도 하겠지만 ㅋ)


Learn & Grow 

돈 한푼 안 들이고, 세계 최고 대학의 교수들 그리고 업계 최고 전문가들이 진행하는 온라인 강의를 들으며 공부할 수 있는 꿈같은 세상이 이미 펼쳐져 있다. Udacity의 7주 짜리 강의를 1년 동안 꾸준히 하나씩 겹치지 않고 공부한다면 6개 과목을 공부할 수 있다.(7주+1주 휴식=2달 per a subject ) 6개면 대학에 풀타임으로 등록해서 한학기 동안 하기 버거운 정도의 내용이다 ( 모두 깊은 전공과목 임을 감안한다면) , 이것만 꾸준히 해도 대학을 졸업한 입장에선 부족한 부분을 채우는데 전혀 부족함이 없고, 오히려 엄청나게 많은 공부를 할 수 있는 기회가 된다.

공짜에다 최고 전문가들이 진행하는 강의다 보니, 강의 인트로만 보면 모두 공부해 보고 싶은 맘에 가슴이 두근두근 거리지만,  절대 욕심내서 여러개를 할려고 하면 제대로 따라가기 쉽지 않다.  Coursera의 과목들은 일주일에 최소 10시간 정도를 강의를 제외한 숙제에 할애할 것을 요구한다. 실제로 스탠포드의 똑똑한 학생들이 평균적으로 10시간 머리를 싸매고 고민해야 해결할 수 있는 숙제들이라는 말이다. ( 당연히 전문성이 없는 분야의 강의라면 10시간 이상을 투자해야 제대로 따라갈 수 있다는 말이기도 하다. )

 전업 학생이 아닌 이상 매주 10시간 한 과목 숙제하는데 시간을 내기는 쉽지 않다, 그런데 두과목을 동시에 듣는다면 20시간, 어렵다. 그래서 욕심내지 말고 한과목만 그것도 정말 열심히 해보겠다는 생각으로 수업들을 수강해야 강의를 성공적으로 완주할 수 있을 것이고,  이렇게 성공적으로 강의를 완주( 모든 숙제를 제출하고 시험을 치루는 것까지 )하고, 성적이 상위권에 들면 수업을 진행한 교수의 이름으로  자랑스러운 Certificate 을 받을 수 있다. 이  Certificate 은 내 생각에 앞으로 상당한 신뢰와 권위를 가진 스펙이 될 수 있을것이라 생각한다.

단적으로 유학을 가는 경우를 생각해 보면,  미국 대학의 입학 사정 위원회는 한국의 서울대 정도는 알겠지만(미국 전체 대학에서 한해 배출되는 박사들의 출신 대학 1위가 중국의 칭화대고 2위가 인도의 IIT 3위가 서울대라는 통계에 근거해 본다면...) 이외의 대학은 이름도 들어보지 못한 대학일 경우가 많다. 당연히 이름도 못들어본 대학의 높은 GPA는 별 의미가 없고, 교수들의 추천서도 큰 의미가 없다. 그래서 신뢰할 수 있는 성과인 '논문', 공인 GRE 점수, TOEFL 점수를 보고 입학을 결정하는 경우가 대부분이다. 이럴 때 Udacity나 Coursera의 수준높은 강의( 학계 최고의 교수들이 진행한 강의) 를 듣고 여기서 상위권의 성적을 올렸다는 Certificate 이 있다면 당연하게 이 학생의 퀄리티를 신뢰할 수 있을 것이고 입학 사정에서 유리한 고지를 점할 수 있을 것이라 본다. 구글/페이스북/아마존 등 탑 실리콘밸리 기업들이 이를 인정하고 채용을 할 정도이니 말이다.

어쨌든,  많이 공부하고, 성장하자!

jQuery:: Namespaced event

Javascript, jQuery 에서 하나의 event에 여러개 handler function을 연결하고 컨트롤 할 수 있다.
이를 좀 더 쉽게 사용할 수 있도록 jQuery에선 Namespaced Event 기능을 제공한다.
간단히 요약하자면 event와  handler 의 '연결'을 class 로 name을 주고 이를 컨드롤 할 수 있게 하는 형태다.

흔히 쓰이는 event와 handler 연결 형태는

 $('#button').click( handler1 );
 $('#button').bind('click', handler2);
 $('#button').bind('click', handler3);

와 같은 형태인데, 위의 경우엔 id=button인 element를 클릭하면 handler1, 2,3 세개 handler 함수가 동시에 호출 된다. 경우에 따라서 handler 들을 개별적으로 컨드롤 해야할 경우가 생긴다. 이런 경우 namespaced event 를 사용하면 매우 편리하다.


사용자 로그인 전과 후의 기능을 차별화 하려고 하는 상황을 가정해 보자.
버튼 A를 누르면

1. 로그인 전에는

• 로그인 창을 띄워준다.
• 버튼 색깔을 빨간색으로 지정한다.

2. 로그인 후에는

• 버튼 색깔을 빨간색으로 지정한다. 
• 사용자 정보 창을 띄워준다. 

아래와 같이 버튼이 지정되어 있다면,

<button id="login">Button</button>

로그인 전 버튼 클릭이 담당하는 모든 handler 함수를 버튼에 연결하고,

 $('#login').bind('click.loginPageShow', loginPage );
 $('#login').bind('click.changeColor',changeColor );

로그인 하는  경우 로그인 페이지 창 띄우는 handler를 버튼 '클릭' event에서 삭제하고, 사용자 정보 창 띄우는 handler를 버튼에 아래와 같이 연결할 수 있다.

 if( login() ) {
    $('#login').unbind('click.loginPageShow' );
    $('#login').bind('click.showUserinfo',showUserinfo );
 }

신약개발 실질적 비용은 4조에서 11조

최근 들어 신약 개발 비용은 천문학적으로 높아졌고, 또 높아지고 있다. 보통 신약 하나 개발하는데 1조원 든다 정도로 얘기들을 하는데, Forbes의 Matthew Herper 라는 기자가 이에 관해 심도 있는 조사를 해 본 결과 실제로는 1조가 아니라 약 4조~11조 정도가 소모된다고 한다. (Forbes 기사 )

흔히 알려진 것과 다른 결과가 도출된 이유는 '실패한 신약'에 대한 소모 비용까지 계산에 포함했기 때문이다. 예를들어 2011년 노바티스가 10개의 신약 개발을 추진했고 이 중에 8개가 실패했다면 2개의 신약 성공에 들어간 비용은 10개의 신약 개발 비용과 같다고 놓고 신약 1개 개발 비용을 계산했다는 이야기다.



실질적 신약 1개당 개발 비용

가장 효율적으로 신약 개발을 한 회사는 Amgen 으로 1개당 $ 3.6 billion ( 우리돈 4조 정도) 를 썼고, 그 다음이 Novartis 로 $3.9 billion 이고, 가장 비효율적으로 비용을 소모한 회사는 AstraZeneca 로 개당 $11 billion ( 우리돈 약 11조 이상), 그 다음이 GlaxoSmithKline 으로 $8.1 billion( 우리돈 8조 이상 ) 을 소모했다.

잘 알려져 있는 사실이지만, 신약 개발 비용의 90%는 임상시험에 소모된다. 1,2,3차 임상을 거치면서 소모되는 비용은 엄청난데, 이 과정에서 reject 되면 그 동안에 소모된 모든 노력과 비용은 그냥 거품 처럼 사라져 버린다.

FDA의 신약 허가 기준은 Vioxx 등의 시장 실패 신약 ( 시장에 출시되고 5년이 지난 시점에서 독성이 인정되어 시판이 중지된 신약으로, 단일 약 실패로 인한 피해액이 최고로 알려져 있고, 이로 인해 피해를 본 환자들의 추산 숫자도 수만명 단위 ) 등으로 인해 점점 더 강화되고 있으니, 신약 개발 비용이 쉽사리 줄어들 것 같지 않아 보인다.

과도한 신약 개발 비용을 낮추어줄 가능성은 전혀 없는 것일까?


개인유전정보를 활용한 신약 개발
FDA에서 허가되는 신약의 임상 시험 결과를 본 적이 있는가? 일반인들이 기대하는 수준은 100명이 먹으면 적어도 90명정도는 효과를 보는 수준을 기대할 것이다. 하지만 실제로 시장에 나오는 약의 효과 수준은 이런 기대를 전혀 충족시키지 못하는 경우가 많다. 특히나 Chronic disease에 대한 약들이 대게 이런 결과를 보여주는데, 100명중 플라시보를 복용한 환자들 20명이 효과를 본다면, 신약 허가를 받는 약은 이 보다 조금 높은 25명 30명 수준만 되어도 통과된 사례가 있다.

 즉, 신약으로 개발이 되어도 이를 통해 효과를 보는 사람은 그리 많지 않은 수준이라는 것이다. 여기서 중요한 포인트는 '100명 중 30명에서는 왜 효과가 나타나는가' 이다. 이 30명은 나머지 70명과는 다른 특성을 가진 그룹일 가능성이 있다. 유전적으로 특이한 패턴을 공유한 그룹일 수도 있고, 이와 더불어 특정한 생활 습관을 가진 그룹일 수도 있다.

 지금까지는 이런 그룹에 대한 특성을 분석하기가 쉽지 않았다. 이들의 개인유전정보를 분석하는 것도 엄청난 비용 때문에 어려웠고, 개인의 전방위적 healthcare information 같은건 아예 축적되어 있지도 않았기 때문이다.

하지만 앞으로는 이런 분석들이 절대 불가능한 일이 아니다. 이미 30X Human whole genome 분석 비용은 소비자 가격 기준으로 미국에서 이미 2000달러( 200만원) 대로 떨어졌다. 이는 실험 분석+기초적 분석 까지 포함된 가격이다. 또 스마트 기기들과 다양한 sensor 들의 발전은 개인의 전방위적 개인의료정보 ( EMR or EHR ) 를 수집하여 분석 가능한 형태로 축적할 수 있게 한다.

임상 초기 단계에 실패할 만한 결과를 얻었다고 해보자. 예컨데 100명 중 10명에서만 효과가 나타났다고 하면, 기존에는 그냥 여기까지 소모된 모든 비용을 날리게 되지만, 앞으로는 개인유전정보/의료정보를 가지고 효과가 나타난 그룹 10명을 분석해 볼 수 있다. 분석을 통해 10명의 그룹에서 특징적인 유전적 혹은 특이적 의료정보를 발견하게 되면, 신약의 타겟 환자 그룹을 더욱 명확하게( 그리고 좀 더 협소한 그룹의 환자들에게) 정의하여 새롭게 임상 시험을 하고 기준을 통과할 가능성이 생겨난다.

개인유전정보/의료정보의 활용은 천정부지로 올라간 신약개발 비용을 낮추고, 효율적으로 신약이 개발될 수 있도록 하는 형태로 앞으로 이용되게 될것이고, 이런 형태로 제약 회사들과 접점이 생겨나게 될 것으로 생각한다. 그렇게 되면 신약 개발은 더이상 거대 글로벌 제약사들만의 전유물이 아니게 될 것이고, 비로소 신약개발의 봄이 오게 되지 않을까... 하는 생각을 해본다.

jQuery 에서 동적 이벤트 등록시 이벤트 중복 문제

Javascript 에서 addEventListener 그리고 jQuery에서 .bind , .click 등 으로 다양하게 이벤트를 등록할 수 있다. 하지만, 어떤 DOM에 이벤트가 등록되는지에 따라 이벤트는 원하는 대로 동작하지 않는 경우가 발생할 수 있다. 몇가지 상황을 들어 본다.

1. 동적으로 생성되는 DOM에 대한 이벤트 등록
동적으로 새롭게 생성되는 이벤트에 대한 등록은 상대적으로 안전하다고 본다. 생성되는 이벤트에 대해 이벤트가 1:1로 등록이 되게 코딩을 한다는 가정 하에서. 하지만, DOM이 여러번 생성되고 동적 생성시 동적 삭제가 제대로 동반되지 않을 때 문제가 발생할 수 있다.

$('#create').click( function(){
     $('<div id=button >Button</div>').appendTo('body');
     $('#button').click( function(){
          alert('good');
     });
  });

위의 코드는 어떻게 동작할까? create 을 누르면 id=button인 버튼이 생성이 되고, 버튼을 누르면 'good' 이란 문구를 띄우는 창이 발생하는 이벤트가 등록된다. create를 두번 누르면 어떻게 될까?

버튼이 하나더 생긴다! 하지만, 새로 만들어진 버튼에는 이벤트가 등록되지 않는다. 동시에 처음에 만들어졌던 버튼을 누르면 alert 창이 두번 뜬다. id=button를 가진 첫번째 엘리먼트에 이벤트가 등록되므로 이후로 만들어지는 버튼에는 이벤트가 등록되지 않는다.

id 가 같은 엘리먼트가 여러개 만들어지는 건 피해야하지만, 그럼에도 불구하고 굳이 이 상황을 해결하고 싶다면, 즉 만들어지는 버튼 각각에 대해 이벤트를 등록하고 싶다면? 아래와 같이 각 엘리먼트 발생시 직접 이벤트를 연결해주면 된다.

$('#create').click( function(){
     $('<div id=button>Button</div>').appendTo('body').click( function(){
          alert('good');
     });
  });

2. 존재하는 DOM에 대한 이벤트 등록
보통 문제는 존재하는 DOM에 대한 이벤트 등록이다.

$('#button').click( function(){
       $('#start').click( function(){
               alert('What?');
       });
  });

위의 코드는 버튼( id=button인 엘리먼트)을 클릭하면, id=start 인 엘리먼트에 alert 를 띄우는 이벤트를 등록한다. 버튼을 한번 누르고 나면 이후에 start 를 눌렀을 때, 한번 alert 창을 띄운다, 이것이 이 코드를 작성한 사람의 의도일 것이다.

그런데 버튼을 두번 누르면 어떻게 될까?

start 엘리먼트에 이벤트가 두번 등록된다. 그래서 start 를 누르면 두번 alert 창이 뜬다. 한번 더 버튼을 누르면? 당연히 세번 alert 창이 뜬다.
이 문제를 해결하는 가장 간단한 방법은 버튼을 누를 때 마다 아래와 같이 기존에 등록된 'click' 이벤트를 제거하는 것이다.

$('#button').click( function(){
       $('#start').unbind('click');
       $('#start').click( function(){
               alert('What?');
       });
  });

기본적으로 동적 생성되는 DOM 이 아닌 경우라면 이벤트 등록을 중복하지 않는 것이 후폭풍을 막는 지름길이 아닐까 생각하고, 써야하는 상황이라면 항상 이벤트 중복이 되지 않게 주의를 기울여야 함을 기억해 놓자!!

Google PageRank 로 뽑아보는 인기 Blog 글

 한해를 정리하며 자신이 일년간 쓴 블로그 글들이 얼마나 impact가 있었는지 체크해보는 것도 의미 있으리라... Google analytics 등 분석 툴을 이용해 각 글들의 클릭수, 읽은 시간 등을 체크해 볼 수도 있지만, 여기서는 각 블로그 글의 Google PageRank 를 이용해 인기순위를 체크해 보는 간단한 Perl script 를 만들어 본다.

준비
WWW::Google::PageRank
Web::Query
두개의 Perl 모듈

1. Blogger 에서 BlogID 얻어내기
Google 에서 제공하는  Blogger API 를 보면, 각 Blogger 블로그에 대한 feed를 얻기 위해, blogID를 알아야 한다. 이를 확인 하는 방법은 아래 두가지를 꼽아 볼 수 있다.

 a) 디폴트 feed 페이지( http://blog-name.blogspot.com/feeds/posts/default )에서 id 태그에 blog-'blogID' 형태로 삽입된 blogID 를 얻어내는 방법

b) feedburner 등으로 디폴트 feed 페이지를 변경하여 a) 방법이 불가능한  경우, 블로그 대문 html 파일 하에 item-action 클래스로 묶인 태그 하의 링크 주소에 blogID='blogID' 형태로 삽입된 blogID를 읽어오는 방법

위 두가지 방법으로 이 블로그의 blogID 를 얻어내는 코드는 아래와 같다.

# Blogger계정의 블로그 feed 주소 ( goldbio 부분에 자신의 블로그 주소 앞부분을 넣으면 된다 )
my $blog_add=qq|http://goldbio.blogspot.com/feeds/posts/default|;

# a 방법
wq($blog_add)->find('id')->text=~/blog-(\d+)/;
my $id=$1;



# b 방법 
wq($blog_add)->find('.item-action')->find('a')->attr('href')=~/blogID=(\d+)/;
my $id=$1;
 



위의 코드에는 Web::Query 를 이용해 html 페이지를 파싱했는데, 이 모듈은 jQuery와 같은 방식으로 태그 이름, 클래스 이름 등을 사용해 간편하게 html 페이지 요소에 접근할 수 있도록 하는데, 같은 기능을 하는 모듈로 pQuery 라는 모듈도 있다.  ( 이 모듈은 올해 진행되는 서울 펄 크리스마스 트리에 언급되어 알게 되었는데, jQuery 를 최근에 많이 쓰다보니 다른 모듈들 보다 훨씬 편한 느낌^^)




2. 각 블로그 글의 PageRank 얻어내기
  

blogID 를 얻어낸 후엔 이를 이용해 해당 블로그의 feed를 아래 주소를 통해 접근할 수 있다.

http://www.blogger.com/feeds/blogID/posts/default ( blogID 부분에 해당 블로그 id를 넣으면 된다 )
이 주소로는 대문 페이지에 보이는 글들만 얻어올 수 있기에, 한해 동안의 블로그 글을 얻어내려면 옵션을 추가해야 한다. 


&published-min=2011-01-01-T00:00:00 을 위의 feed 주소 뒤에 붙이면 2011년 1월 1일 0시 부터 쓴  모든 글들에 접근할 수 있다. 2011년에 쓴 글들이 꾀나 많다면 &max-results=100000 과 같이 적당한 최대 검색값을 덧붙인다.  


www.blogger.com/feeds/$id/posts/default?published-min=2011-01-01T00:00:00&max-results=100000000


위의 주소로 접근하면 이 블로그에 2011년 한 해 동안 업데이트된 글들이 모두 포함된 feed 를 확인할 수 있다.  이제 각 글들의 Pagerank 를 확인하면 된다. 먼저  각 글들의 URL 을 얻어내고, 얻어진 URL 을 WWW::Google::PageRank 를 이용해 확인하면 된다.


글의 URL 은 아래와 같은 형태로 각 블로그 글 마다 삽입되어 있는데, 

<link rel='alternate' type='text/html' href='http://goldbio.blogspot.com/2011/09/jquery.html' title='jQuery::이미지 크기 동적으로 변경'/>

여기서 href 아래 주소만 Web::Query 를 이용해 얻어내는 코드는 

$feed->find('link')->attr('href') 와 같이 쓸 수 있다.  $feed에는 이와 같은 link 가 블로그 글 숫자 만큼 들어 있고, 이를 모두 얻어내야 하므로 코드는

$feed->find('link')->each ( sub {
   my $i=shift;
   my $post_link=$_->attr('href');
});

와 같이 쓸 수 있다. 

WWW::Google::PageRank 사용법은 간단하다.

주어진 URL 에 대해 아래와 같은 코드로 pagerank를 확인할 수 있다.

my $pagerank=WWW::Google::PageRank->new;
my $pagerank= scalar( $pagerank->get( URL ) ) ; 

최종적으로 Feed 페이지를 Web::Query 모듈을 이용해 파싱하여 각 블로그 글들의 URL 을 얻고, 해당 URL 을 이용 Pagerank 를 얻어내는 코드를 종합해 보면 아래와 같이 쓸 수 있다. 




## 2011년 블로그 Feed 주소
my $blogger_API=qq|http://www.blogger.com/feeds/$id/posts/default?published-min=2011-01-01T00:00:00&max-results=100000000|;



## 각 블로그 글에 해당하는 Google Pagerank 출력
my $q=Web::Query->new( $blogger_API );
$q->find('link')->each( sub{
    my $i=shift;
    next if $_->attr('rel')!~/alternate/;
    my $post_link=$_->attr('href');
    my $post_title=$_->attr('title');
    my $post_pagerank=scalar( $pr->get($post_link) );
    print "$post_title\t$post_link\t$post_pagerank\n" ;
});

3. 종합

인기 블로거가 아닌 이상, 각 블로그 글들은 아마 대부분의  글의 Pagerank 가 0 일 것이다. (참고로 이 블로그의 모든 글 108개 중 pagerank 가 1 이상인 글은 2개 뿐이다 -pagerank 는 10점이 최고 점수) 그러니 결론적으로 블로그 글 인기순위 메기기에 pagerank 는 부적합해 보인다. 따라서 다른 용도로 pagerank 수치를 적절하게 결합해서 사용하는 것을 추천!

뭔가 배우고 싶다면 6개월 지속하자!!

3-4년 전 쯤 읽었던 책 'The brain that changes itself' 는 뇌과학의 흥미로운 연구결과들을 대중의 입맛에 맞게 맛나게 풀어써 놓은 책인데, 오늘 책장을 뒤적거리다 이 책을 뽑아들고 휙휙 넘겨보다 기억해 둘 만한 내용이 있어 나눠 본다.  1. 만시간 법칙 학습 이론에 관해선 수많은 연구결과들이 발표되어 왔는데, 그 중 유명한 것이 에릭슨의 '만시간 법칙' 으로, 현재 전세계에서 가장 잘 팔리는 논픽션 작가 말콤 글래드웰의 책 '아웃라이어' 에 소개되어 널리 알려졌다.  만시간 법칙은 어떤 분야의 전문가가 되기 위해선 만시간, 10년 정도의 시간을 꾸준히 노력해야 한다는 내용이다. 에릭슨의 이 연구 결과는 다양한 분야의 전문가들을 꼼꼼히 연구한 결과 밝혀진 내용으로 상당히 신뢰할 만 하다.  단, 여기에 조건이 있는데, '10년 동안 그냥 했던거 반복' 만 하면 안 되고,  자신의 실력을 향상 시키기 위한 '잘 조직된 연습' ( Deliberated effort ) 로서의 만시간이 필요하다는 것이다.  2. 'Monday-Friday' 법칙 The brain that changes itself 에 담긴 연구 결과는 의사이자 생리학 박사인 Alvaro Pascual-Leone 이란 사람이 하버드 의대에서 수행한 것으로, '읽기 능력' 의 수행 능력 향상과 학습의 지속 시간 그리고 뇌의 변화를 관찰한 결과로 얻어진 것이다.  간단하게 결과를 요약하면, 주중에 월요일 부터 금요일 까지 열심히 익히고 배우면 금요일까지 수행 능력이 매일 향상이 된다. 하지만 토요일, 일요일을 쉬고 월요일에 수행 능력은 다시 연습을 시작하지 전과 같은 레벨로 떨어진다.  하지만, 장기간 이런 수행능력 향상 연습을 반복하면 평균 6개월이 지나면 '월요일 효과' 가 사라진다. 즉, 몇일 쉬어도 수행 능력은 꾸준히 유지가 된다. 이 상태에서 2달 정도가 지나도 수행 능력은  약간의 '회복 시간' 이 지나고나면 다시 원상태로 회복된다. 6개월 동안의 연습 시간이 지나고 나서, 뇌 fMRI 사진을 찍어보면, 연습한 과업을 수행할 때 뇌가 관여하는 형태가 6개월 전과 확연히 다르다. 즉, 6개월 정도의 '꾸준한 노력' 이 지속되면 뇌 자체가 이 과업을 '빠르고 효과적으로 수행할 수 있을 만큼' 새로운 뇌 세포간 네트워크를 만들어 내게 되고, 한번 이렇게 '뇌 구조가 바뀌고 나면' 이 과업은 이제 쉽게 잊지 못하는 언제든지 익숙하게 수행할 수 있는 일이 된다는 것이다.  3. 6개월 지속 법칙 이 연구 결과를 따르자면 '평범한 보통사람' 으로서 어떤 일을 제대로 익히기 위해서는 6개월 정도를 꾸준히 지속하는 노력이 필요하다. 생각해 보면, 대게 우리는 몇주 열심히 혹은 한두달 열심히 하고 나서 조금 시간이 지나서 그 동안 열심히 한걸 새까맣게 까먹고 자신의 우둔함을 한탄하는 경우가 아주 빈번하지 않나?  하지만, 그게 당연한 것이니 그럴 필요가 없다. 뭐든 6개월 정도를 꾸준히 지속하면 그 일 자체가 우리 뇌속에 각인이 되고, 우리 몸의 일부분이 된다.  '빡세게 짧은 기간 열심히' 보다는 '꾸준한' 노력이 필요하다.  4. 전문가의 뇌 예전에도 전문가가 일을 처리할 때의 뇌에 관한 글을 많이 썼었는데,  다시 한번 더 언급해 본다. 전문가는 흔히 생각하듯 '창의적' 인 사람과는 거리가 멀다. 반대로 전문가는 어떤 특정한 일을 수행하는데 보통 사람이 믿지 못할 만큼 빠르고 효율적으로 일을 처리할 수 있다.  이것이 가능한 것은 앞서 언급했던것 처럼 뇌 자체가 그 일을 빠르고 효율적으로 처리할 수 있는 새로운 뇌구조를 만들어 두었기 때문이다. 대게 여기는 '장기기억' 에 관련한 뇌가 관련한다. 전문가들은 엄청나게 많은 경우의 수, 그리고 필요한 정보를 장기기억에 저장해 놓고 언제든지 빠르게 꺼내 쓰고, 또 효율적으로 조합할 수 있다. 반면에 비전문가들은 어떤 정보가 필요한지 모르는 경우가 많고, 또 안다 하더라도 이런 정보들을 확인해서 확보하고, 또 이들을 어떻게 적절히 조합해서 문제를 해결해야하는지 에 대해 엄청나게 머리를 쓰면서 에너지를 소비해야 한다.  그래서 실제로 비전문가들이 전문가들에 비해 머리를 훨씬더 많이 쓴다.  뭔가를 잘 못하는 사람한테 '머리 좀 써라' 라고 전문가가 핀잔을 주는 건 사실 잘못된 말이다. 전문가는 비전문가에 비해 같은 일을 수행할 때 20% 정도 밖에 뇌를 쓰지 않는다.  5. 마무리

나이탓, 머리탓 하는 사람들 무지 많다. 
뭐든 6개월은 지속해서 노력하고 나서 그런 소리 하자. 

실제로 자기가 '나이가 들어서 이런저런 일들을 할 수 없다' 라고  생각하면 실제로 그렇게 된다는 최근 연구 결과가 있다. 그런 사람들이 평균적으로 훨씬 건강 상태도 안 좋고, 평균 수명도 짧았다고 한다.   그딴 핑계는 대지 말고 젊게, 항상 배우고 살자.