근래에 있었던 작은 버전들의 갱신 후에 드디어 커다란 걸음을 내딛는 jQuery 1.2 버전이 공개되었다. 이번 버전은 여러 새로운 기능들이 추가되었고, 이번에 소개된 새로운 jQuery Animation API를 이용해서 특정 요소에 색깔 변화 효과를 줄 수 있는 Color Animation Plugin을 포함해서 호환성 문제 해결을 위한 새로운 plugin들도 소개되었다. 반면에, 그 동안 잘 사용되지 않고 혼란을 가중시킬 수 있었던 몇 가지 기능들도 함께 제거되었는데, 제거된 기능들은 보다 나은 대체 기능들을 사용하면 되겠다. 물론 굳이 없어진 기능들을 계속 사용하려면, 이번에 새로 소개된 하위 버전과 호환성을 유지시켜 주는 Compatibilility Plugin을 사용하면 된다.

또, 한 가지.
User Interface의 특수 효과와 관련해서 jQuery의 공식 plugin으로 자리잡을 jQuery UI가 이번 16일 일요일에 드디어 공개될 예정이다. jQuery UI의 대략적인 구성은 이미 공개되었듯이 Draggables, droppables, resizables, shadows, sliders, sortables, tabs, accordions, selectables, trees, 그리고 modals이 포함되게 된다. 이렇게 되면 다른 라이브러리들의 의존성도 줄이고 선택면에서 더 이상 부럽지 않겠군.

jQuery에서 selector 선언이나 jQuery 함수(method)를 사용하면 되돌려 받는 것은 항상 jQuery object이다.
대부분의 경우 이 오브젝트에 직접 여러 method들을 묶어서(chaining) 사용하거나 기본적으로 제공되는 모든 object들의 자동적인 접근의 용이함도 장점이겠지만 가끔은 DOM element를 직접 만져야 할 때가 있다.

이럴 경우를 대비해서 jQuery에는 get() method를 제공하는데, 예를 들어 특정 element의 tag 이름을 얻고 싶을 때는 다음과 같이 할 수 있다:

var tag = $('#some-element').get(0).tagName;

여기에는 .get()을 쓰느 대신 더 간단한 방법이 있는데, $('#some-element').get(0) 대신에 바로 $('#some-element')[0]처럼 사용할 수도 있다.
바로 DOM elements의 array처럼 사용될 수 있는 것이다.

공식 jQuery 문서에는 설명이 안되어 있는 것 같아서 적어놓는다.

jQuery 1.1.3 버전에 와서는 거의 80개 이상의 버그가 잡혔고 DOM 위를 돌아다니는 속도가 무려 800%나 빨라졌다고 한다.
그리고, 이벤트와 효과 관련 시스템이 다시 쓰여지면서, 키보드 이벤트를 더 효율적으로 처리할 수 있게 되었고 UI 효과의 처리 속도와 호환성이 향상되었다.

그 동안 다른 자바스크립트 라이브러리들과 비교해서 selector 처리 속도에서 약점을 보여왔었는데, 이젠 말끔히 해소된 느낌이다.
또한 눈에 띄는 것은, 새로운 유형의 selector들이 소개되었는데, 그 중 selector로 유니코드를 사용할 수 있게 되면서 $("div.머릿말")처럼 한국어로 된 속성 값을 바로 사용할 수 있게 되었고, 새로 추가된 'test suite'은 애니메이션 효과를 실험하는데 있어 버그 탐색에 도움을 줄 듯 하다. 또, event.which 속성으로 눌린 특정 키나 마우스 버튼에 관한 상세한 정보를 얻을 수도 있단다.

이제 더 날렵해지고 활동 범위도 넓어진 jQuery의 다음 버전도 기대되는데, 7월 말에 1.1.4 버전의 발표를 끝으로 더 많은 새로운 기능들을 흡수한 jQuery 1.2로 건너뛸 예정이다.

한편, 그 동안 비밀 프로젝트로 숨겨왔던 jQuery UI 소식을 공개하였는데, 여기에는 Drag & Drop 라이브러리가 포함되어 있고 Draggables, Droppables, Sortables, Resizables, 그리고 Slider 등 여러 UI 효과와 관련된 코드가 포함될 예정이란다. 아마도 이 놈은 Prototype과 Script.aculo.us가 쌍을 이루듯 jQuery의 UI 효과를 위한 대표 plugin으로 자리잡을 듯.

예전에는 블로그 글에 포함된 코드의 문법을 색깔별로 구분하기 쉽게 표시되도록 WordPress의 plugin인 iG:Syntax Hiliter를 사용했었다. 하지만, 보이는 코드의 모양도 별로 마음에 들지 않거니와 코드 속에 쓸데없이 자동으로 포함되는 특정 요소 관련 링크들은 오히려 코드의 해석을 어렵게 하고, 문서의 구조까지 해치는 부작용이 있었다. 물론 지원되는 언어들도 한정적이었고.

그래서, 바램이었다면 평소 애용하는 TextMate를 이용해서 지원하는 여러 가지 다양한 테마들에서 보이는 코드의 모양을 그대로 블로그에도 옮겨놓을 수 없을까 궁금해하던 차에, 찾아보니 딱 내가 바라던 방법을 소개해 놓은 글을 발견하게 되었다. 그 후로 소개된 요령을 참고 해서 이미 올려두었던 코드들을 일일이 바꾸면서 이곳에도 비슷하게 적용해서 만족하게 사용하고 있다. 물론 코드를 올릴 일이 있으면 그 전에 TextMate에서 또 한 번의 변환 과정이 필요하지만 "Create HTML From Selection" 메뉴에 단축키만 지정해 두면 이것 또한 번거로운 작업은 아니다.

그런데, 사람의 욕심은 끝이 없어서인지 작업은 여기서 멈추지 않고, 이렇게 변환돼서 예쁘게 올려진 코드라도 실제로 쓰려고 복사할 때는 줄 바꿈이라든지 코드의 원래 모양이 제대로 전달되지 못하는 부작용이 있을 수 있다. 이것을 해결하기 위해서는 블로그에서 코드의 원래 모양을 그대로 전달해 주는 또 하나의 간단하면서도 깨끗한 버전의 모양새를 선택할 수 있게 해야 하는데, 일반적으로 떠오르는 방법으로 JavaScript의 힘을 빌려 새로운 창에 보여주는 방법이 있지만, 이것도 그리 깔끔한 방법은 아닌 듯 보였다.

마침, 요새 주무르고 있는 jQuery에서 제공하고 있는 몇 가지의 동작 효과들을 사용하면 간단하게 원하는 기능을 구현할 수 있을 것 같아서 바로 적용해 보았고, 참고를 위해 그 적용 방법을 여기에도 남겨둔다. 글 마저 읽기 »

여러 JavaScript Library들 중에서 최근에 와서야 발견했지만 아주 마음에 드는 놈인 jQuery의 이모저모를 맛보고 있는데, 마침 TextMate 용 jQuery Bundle이 제공되고 있어서 바로 설치해서 사용하고 있다.

그런데, 사용하다 보니 jQuery bundle에 정의되어 있는 snippet들은 HTML 문서에서는 바로 사용할 수 없다는 사실을 알게 되었다. 실험 목적으로 HTML 문서에 바로 JavaScript를 삽입해서 쓸 경우에는 이 점이 무척 아쉬운 부분이다.
하지만, 해결책은 바로 옆에 있었다.

TextMate의 Languages Bundle Editor를 열고 HTML bundle을 선택한 후에, 다음과 같은 코드를 HTML의 기본 pattern이 정의되어 있는 부분(16 번째 줄 부터 시작 됨)에 추가해 주면 된다.

{   name = 'source.js.jquery.embedded.html';
    begin = '(?:^\\s+)?(<)((?i:script))\\b(?![^>]*/>)';
    end = '(?<=</(script|SCRIPT))(>)(?:\\s*\\n)?';
    patterns = ( { include = 'source.js.jquery'; } );
},

TextMate을 재실행하면, HTML bundle이 적용된 환경에서도 바로 jQuery snippet들을 불러와서 사용할 수 있게 된다.
jQuery bundle의 다음 버전에서는 아마도 위와 같은 추가 설정 작업이 필요 없도록 수정될 모양이다.

추가: Getting jQuery bundle to work within script tags embedded in HTML