ajax 와 hashbang 그리고 pjax

ajax 기술은 이미, JavaScript 를 이용한 대중적인 웹기술로, 많은 웹사이트에서 적용하고 있는, 이제는 새로울 것 없는 기술 중 하나입니다. 간단하게 언급해 보면, 페이지의 새로고침없이 데이터를 가져와 화면에 뿌려주는 기능을 합니다.

사실, ajax 출현 전에는 iframe 기술을 이용해서 비슷한 처리를 하곤 했습니다.  iframe 태그를 숨겨놓고, 서브밋을 날릴 때 iframe 태그에 서브밋을 날려서, 데이터를 가져온 다음에 현재의 페이지에 보여주는 방식을 이용하면 ajax 와 비슷하게, 페이지 이동없이 데이터를 가져와 뿌려줄 수 있었습니다. ajax 기술이 사용되기전에 한 때 많은 사이트에서 이용했던 방식중 하나입니다.

ajax 기술의 등장은 사실, XMLHTTPRequest() 에서 출발합니다. 누구나 ajax 방식의 처리를 구현해서 만들어 사용할 수 있지만, prototype.js 을 비롯한 jQuery 등의 등장으로 ajax 처리를 구현할 필요없이 쉽게 가져다 간단하게 API를 호출해서 사용할 수 있게 만들어 놓아, 더욱 더 많은 인기를 끌게 되었습니다. 그리고 ajax 는 웹을 빠르게, 그리고 멋지게 만들어 주었고요!

그런데 ajax 를 이용하면, 뒤로 가기 버튼을 이용할 수 없습니다. 게다가, HTML 소스를 열어봐도, ajax 에서 가져온 데이터가 어디에 있는지 찾을 길이 없습니다. 당연히, 검색사이트에서도 ajax 로 가져오는 데이터나 페이지들은 인덱싱을 해주지 못하므로, ajax 로 처리한 결과들은, 검색사이트에서 검색해도 검색결과를 얻을 수 없습니다.

그래서 이를 보완하기 위해 등장한 방식이 hashbang (hash:# 와 bang:! 의 합성) 기술인데, location.hash 를 이용해서, URL 의 #(hash) 뒤에 붙는 값을 이용해 ajax 처리를 합니다. 뒤로가기를 처리할 수는 있지만, 일종의 URL Hack 방식이어서, 정당성도 없고 논란의 중심에 있기도 한데, 검색인덱싱이 안되는 건 물론이고(구글에서는 검색을 할 수 있게 escape처리를 해놓음), JavaScript 기술에 의존하고 있기 때문에, JavaScript 오류 하나만으로도 사이트를 하나도 이용할 수 없게 되어버립니다. 즉 JavaScirpt 없이는 컨텐츠를 보여주지 못합니다.  hashbang 과 관련해서는 아웃사이더님 블로그에 잘 정리되어 있습니다.

해시뱅(#!)에 대해서… (http://blog.outsider.ne.kr/698)

마지막으로 이 모든 문제를 해결한, 비동기통신의 대안 pjax 를 소개합니다. 좀 거창하게 소개했는데 그렇게 거창할 건 없습니다. ^^; 우선 pjax 는 pushState + ajax 를 합쳐서 pjax 라 합니다. 여기서 pushState 는 HTML5 에서 추가된 메소드로 브라우저의 히스토리를 조작할 수 있고, 뒤로가기/앞으로가기 버튼을 이용할 수 있습니다. (현재는 github 과 facebook 등에서 쓰이고 있는 걸로 알고 있습니다.)

클리어보스에서 번역한 HTML5 명세의 window.history.pushState  http://html5.clearboth.org/history.html#dom-history-pushstate

pjax 는 pushState 를 이용한 ajax 처리방식으로 jQuery 라이브러리로 제공되고 있고, github 의 창립자이자, CEO 인 defunkt (Chris Wanstrath) 가 개발했습니다. pushState 를 지원하는 브라우저에서는 pushState 를 사용해서 동작하고, pushState 비지원 브라우저(IE9 이하) 에서는 지원하지 않는 대로 일반적인 페이지 이동형태로 처리가 이루어지기 때문에 URL 은 동일하게 전환하게 됩니다.

pushState + ajax = pjax https://github.com/defunkt/jquery-pjax

사용방법도 쉽습니다. 위의 링크에 몇가지 방식으로 나와 있는데 간단하게는 링크를 잡고, 그 링크를 어느 컨테이너로 처리할 지 잡아서, pjax 처리를 해주면 됩니다.

가령, js-pjax 클래스를 가진 a 링크만을 pjax 처리한다면 아래 코드와 같습니다.

<a href=’/explore’ class=’js-pjax’>Explore</a>
$(‘.js-pjax’).pjax(‘#main’)

샘플을 보면 쉽게 이해할 수 있습니다. pjax 체크박스를 체크하고 링크를 누르면, 시간이 변하지 않습니다. 즉 해당영역만 링크를 다시 가져오는 것을 볼 수 있습니다. pjax 체크박스를 풀고 링크를 누르면 페이지가 리로드되는 일반적인 방식으로 페이지를 로드합니다.  (내친김에 IE9 이하 에서도 pjax 처리는 하지 않고, 일반적인 방식으로 페이지를 로드합니다)

pjax 샘플 http://pjax.heroku.com/

흥미로운 점이 많아서, 혹시 단점은 없나 찾아봤는데, HTML5 라 IE9 이하 하위버전에서 지원하지 않는 점만 빼면, 앞으로의 비동기 통신기술의 대안이 아닐까 싶습니다.

참조링크 :
http://firejune.com/1743
https://github.com/defunkt/jquery-pjax
http://blog.outsider.ne.kr/698
http://html5.clearboth.org/history.html#dom-history-pushstate

글로벌 커뮤니티 서미트 2012 참여 후기

지난 주 토요일 (5/19) , 삼성동 코엑스 컨퍼런스룸에서 개최된 글로벌 커뮤니티 서미트 2012 행사에 다녀왔습니다. 이번에는 듣기 위해 간 게 아니라, 발표를 하기 위해 갔습니다.

도착하자마자, 해외 초청연사인 Stuart Reid 의 소프트웨어 테스팅에 관한 발표가 있었고, 통역없이 듣다 보니, 집중력이 떨어졌습니다. ㅠ 그리고 나서 김병곤 JCO 회장님 등장. 개인적으로는 관심을 깊게 갖지 못하고 있던 빅데이터 기술과 관련된 내용이었는데 많은 도움이 되었고, 공부 해보고 싶은 자극제가 되었습니다.

발표자로 참여한 덕분에,  협회로부터 점심도 얻어먹고 트랙2 로 향했습니다.

MOIBA 의 박종문님께서 K-APPS 에 대해 소개해 주셨고, JBOSS 의 신정훈님께서 MonggoDB 를 이용한 빅데이터 구축 경험을 공유해 주셨습니다. 그리고 나서 제 차례였고, 저는 개발자들의 즐거운 삶을 위한, Open Source 참여 독려를 하는 발표를 했고, 끝나자 마자 Sencha Touch 2.0S (주말 모임) 을 위해 바쁘게 움직여야 했습니다.

이 날 공교롭게도 KSUG 세미나, 개발자 걷기대회 등 참여하고 싶은 많은 행사가 겹쳐 있어서 못내 아쉽기도 합니다. 그렇지만, 생애 처음으로 코엑스 컨퍼런스룸 무대에 선 경험은 평생 잊지 못할 만큼, 스스로에게 자신감을 가져다 주었던, 매우 의미있고 소중한 경험이었습니다.

기회를 주신 옥히의 kenu 님과 스마트 개발자 협회의 엄용국 사무국장님, 발표를 위해 많은 도움을 주신 Korea Sencha User Group 의 김종광님, 특별히 더 감사드립니다.

얼굴이 살짝 짤리긴 했지만, Stuart Reid 씨 뒤에 있습니다. -_-;

사진을 멋있게 찍어주셨어요. 감사합니다 🙂

MPlayerX 1.0.14 업데이트

지난주에 MPlayerX 가 1.0.14 로 업데이트 되었습니다.

1.0.12 사용할 때부터 한글화 작업에 참여해서 1.0.13 버전부터 한글지원이 추가되었는데 이 때 당시에 제가 맥 시스템 폰트를 나눔고딕으로 쓰고 있었기 때문에 나눔고딕을 기반으로 확인을 했었는데 나중에 애플고딕으로 확인해본 결과 -_- 설정화면에서 일부 글씨짤림이 있었습니다. 그래서, 이번 버전부터 그 문제가 해결됐습니다.
(여담이지만, 이후부터는 그러한 잠재적 문제의 소지를 없애기 위해 울며 겨자먹기로 시스템폰트로 애플고딕을 그냥 쓰고 있습니다)

그외에, 추가된 기능으로 youtube 지원을 하기 시작한 건데, youtube 의 동영상 URL 링크 (http://블라블라) 를 복사한 담에, CMD+U 또는 파일 > URL열기 를 통해서, youtube 의 동영상을 재생시킬 수 있습니다.

http://itunes.apple.com/kr/app/mplayerx/id421131143?mt=12

 

Bea WebLogic 10과 이클립스3.7 사용시 오류

eclipse 3.7 indigo 에서 Bea WebLogic 10 서버를 띄우려는데 뜨기는 뜨는데, 이클립스 내에서는 오류가 발생한다. 오류메시지는 뜬금없는, 유효한 웹로직 도메인 사용 불가

Stopped, Unable to validate WebLogic Domain

웹로직이 스타트되어 잘 돌아가기 때문에 이클립스내에서만 멈췄다고 나올 뿐, 백그라운드에서는 실제로 웹로직이 구동중인 상태다. 여튼, 웹로직 서버를 종료 시키려면 강제로 프로세스 킬 하는 방법밖에는 없는데 이것도 불편하다. 커맨드창에서 시작/종료시키는 것도 번거롭고.

이유를 찾아보니 다음과 같은 문제가 있었다.

이클립스 3.7 은 JDK 6 이상을 기반으로 하는데, 웹로직은 JDK 5 에서 돌아가는 결국, JDK 버전 충돌 문제였던 거다.

해결방법은 간단하다. eclipse.ini 파일을 열어서 -vmargs 라인 밑에 아래 한 줄을 추가해 주면 된다.

-Dsun.lang.ClassLoader.allowArraySyntax=true

출처 및 참조 :
https://forums.oracle.com/forums/thread.jspa?threadID=1123677&tstart=0
http://kamoru.springnote.com/pages/6619101