보니까 1.3.2버전이 작년 1월에 릴리즈가 된 것으로 나오네요. 1.4는 14라는 숫자 때문인지 1월 14일날 릴리즈가 되었습니다.

jQuery사이트 : http://jquery.com/
근데, 재미있는 것은 14 Days of jQuery라는 이벤트(?)를 하네요. 보면 매일매일 하루에 한개씩 뭔가 공개를 하는 듯하네요. 28일까지 진행되는 것  같습니다. 14일 당일에는 jQuery 1.4를 공개했네요. 내일은 뭘 공개할지^^
Javascript 라이브러리 릴리즈로 이벤트를 하다니.....-_- 파는 제품도 아닌데.....대단합니다. jQuery의 위엄인가.....
이벤트 사이트입니다 : http://jquery14.com/

사용자 삽입 이미지
jQuery는 간결하면서도 강력한 코드를 작성할 수 있는 좋은 Javascript Framework죠. jQuery가 내건 문장인 "write less, do more"는 jQuery를 표현하는데에 전혀 부족함이 없는 문장이죠. 모든 브라우저에서 동일한 코드로 작성할 수 있다는 것은 기쁜 일입니다(누가 대체 이런 일을 기쁘게 만들었을까....-_- 브라우저만 다 표준을 지키면 될텐데ㅠㅠ). 아마 jQuery는 하늘에서 내려온 천사같은 것이죠-_-

jQuery는 확장성 있는 개발을 할 수 있어 다수의 플러그인이 존재를 하는 것도 하나의 장점입니다. 그래서 빠르게 개발을 하거나 변경이 자주 일어나는 시스템에 매우 유용합니다.
하지만, jQuery의 단점은 Javascript Framework이다 보니 퍼포먼스의 문제가 있다고 합니다. 사실 Framework는 뼈대같은 것인데, 이런 뼈대를 설계를 하는 이유는 유지보수성 때문에 현업에서도 Framework를 개발해서 사용하죠. Framework를 개발하면 확장성과 유지보수성 등의 시스템 변경에 유용하며 기존코드를 건드리지 않는 구조로 개발할 수 있기 때문이죠.
이런 jQuery도 크로스브라우징과 짧고 간결하고, 쉬운 개발형태를 지향하다보니 퍼포먼스는 그냥 순수 Javascript로 개발할 때보단 확실히 떨어질 수 밖에 없습니다.

하지만, 이번 1.4버전에서 크게 향상된 점이 있는데, 그것이 퍼포먼스 향상이더군요^^

jQuery 1.4 Released 에 Features(특징들)에 보면 가장 처음에 나오는 것이 Performance Overhaul of Popular Methods입니다.

Performance Overhaul of Popular Methods(인기있는 메소드의 성능점검)
초딩 영어실력으로 읽어보니 기존에 것을 분석해서 복잡도를 감소해 함수 호출 수를 줄인 것 같네요.
암튼, 결론은 더 빨라졌다는 거겠죠-_-

Easy Setter Functions(쉬운 Setter 함수)
기존에는 Setter에 그냥 string값 같은 것만 넣을 수 있었는데, 이제는 함수를 넣어서 처리할 수도 있네요.

Ajax
Ajax따위.....그냥 더 좋아진 듯-_-

Attribute
css()랑 attr()등의 함수의 성능이 향상된 듯. 그래플 보여주는데, 1.3.2와 1.4간의 차이가 거의 2배네요.

Core
쉬운 엘리먼트 생성이 가능해지네요. 생성과 동시에 css랑 event등을 추가할 수 있는 형태로 만들 수 있네요.
그 외에 함수가 추가되거나 바뀌거나 한 듯.

CSS
이것도 2개정도의 퍼포먼스 향상이 된 듯.

아.....바뀐게 디게 많네......하긴 1년을 개발했으니......-_-
암튼, 직접 가셔셔 보시는 게......더 좋을 듯....^^

ps. 이런 것을 만드는 천재분들 때문에 저 같은 하찮은 개발자들이 먹고 사는 것 같아요^^
 
Posted by 머드초보

댓글을 달아 주세요

  1. 좌절 2010.01.21 23:31  댓글주소  수정/삭제  댓글쓰기

    1.3.2에서 작동하던 놈이 1.4버전에서는 작동을 하지 않는게 많이 있습니다.
    현재로서는 문제가 많이 있습니다. 게다가 UI와 다른 플러그인과의 호환성도 떨어집니다.
    jquery 하나로만 볼 때는 성능상 문제가 없어보이지만, 이전 버전과의 호환성이
    너무 떨어져서 업그레이드를 할 수 없다는게 흠이죠.

    • 머드초보 2010.01.22 10:29  댓글주소  수정/삭제

      음 그렇군요 ㅠㅠ 호환성은 왜 신경안쓴거지.
      아직 까진 안정화가 덜 되어있군요 ㅠㅠ
      1.3.2처럼 0.0.2까지 올릴 때까지 기다려야하나요 ㅠㅠ
      방문해주셔서 감사해요~^^

 
아...좀 문제가 발생할 것 같기도 하지만-_- 괜찮을꺼에요-_-
일단 플러그인을 하나 만들었는데요. 조금 문제가 많습니다만, 기본적인 기능은 다 되는.....-_-
크롬플러그인의 특징은 백그라운드에서 어떤 작업을 계속적으로 실행할 수 있는 특징이 있습니다. 그래서 html + Javascript의 조합을 통해서도 RSS Reader기를 만들 수 있죠. 게다가 html5문법인 audio와 video 등의 태그를 사용하여 백그라운드에서 실행하는 플레이어를 만들 수 있습니다.
html5에서 지원하는 localStorage도 지원을 해서 영속성이 있는 데이터를 저장할 수 있어요.
그 외에 html5에서 지원하는 canvas도 되구요. 번역기와 같이 현재 열려있는 페이지에 플러그인을 이용해서 번역도 되게 가능하구요. 또한 모질라처럼 NPAPI인지뭔지도 지원하는 것 같은데, DLL파일을 사용할 수 있게 하는 것 같아요. ie탭을 보면 dll파일을 이용해서 하는 것 같네요.

그래서 백그라운드에서 돌아가는 뮤직비디오 플레이어를 만들어 봤습니다.
소리바다에는 뮤직비디오를 퍼갈 수 있는 뮤비위젯이 있습니다. 아마 외부에서 재생이 되게 계약이 된 것으로 알고 있습니다. 그래서 이 뮤비위젯을 이용해 크롬플러그인에서 뮤비들을 localStorage에 저장해놓고 백그라운드에서 재생하는 플레이어를 만드는 것이죠.
http://podcast.soribada.com/Widget/Widget.html
뮤비위젯 사이트인데, 이것을 yahoo pipe를 이용해서 html파싱하면 해당 페이지의 뮤직비디오 데이터를 가져올 수 있어요-_- 그 데이터를 가져와서 플러그인에서 재생시키면 됩니다.

이 플러그인은 최신 뮤직비디오를 쉽게 감상할 수 있고, 해당 뮤직비디오만들 모아서 백그라운드 플레이어에서 재생도 할 수 있는 플러그인입니다.
SoribadaMusicVideo.crx

플러그인 설치 파일. 크롬 4.0beta사용자만 가능해요~

사용자 삽입 이미지

우선 크롬플러그인 구조가 백그라운드.html파일이 있고, 크롬플러그인 아이콘을 클릭했을 때 popup.html을 띄워서 컨트롤하는 페이지 2개를 사용할 수 있어요. 이 2개의 페이지는 서로간의 통신이 가능합니다.
[code]var bp = chrome.extension.getBackgroundPage();[/code]
이것은 bp객체를 통해서 백그라운드의 있는 함수같은 것을 호출할 수 있어요.

또한 html + javascript기반이기 때문에 기존에 사용하는 jquery 등의 프레임워크도 사용할 수 있어요. 저도 이것때문에 더욱 빨리 개발한 것 같네요. 역시 jquery가 짱인 것 같아요.

그리고, flash없이 video나 audio파일을 재생할 수 있는 것이 매력적이군요.
video태그는 매우간결한데요.
[code]<video id="video" src="동영상주소"></video>[/code]
이런식으로 해주면 돼요. 그리고 javascript로 컨트롤하려면 여러 함수가 지원됩니다.
그냥 videoid.play()하면 해당 src로 재생합니다.
src을 바꾸려면,
[code]videoid.src = "video주소";
videoid.load();[/code]
형태로 로드해주면 되고, 일시정지하려면 video.pause()인데, 정지함수는 없는 것 같아요. stop하니까 안먹히더라구요-_-

localStorage도 좋은 게 그냥 쿠키같이 서버에서 컨트롤하는 데이터가 아니라 클라이언트 단에서 저장할 수 있어서 좋습니다. 하지만, flash에서 제공하는 SharedObject보다 좀 안 좋은 게 배열을 저장 못합니다-_- object는 저장하는 듯 하는데, array를 저장하려면 json으로 변경해서 저장해야합니다.
localStorage를 사용하기 위해서는 데이터 가져올 때는 getItem, 저장할 때는 setItem, 모두 제거할 때에는 clear()의 함수로 사용합니다.
[code]localStorage.getItem("데이터명");
localStorage.setItem("데이터명", 데이터);
localStorage.clear();
[/code]
크롬 플러그인에서 배열을 저장하기위해서는 json으로 변경할 것이 필요한데, JSON관련된 라이브러리를 제공하더라구요. 스트링화 하고, 파싱하는 함수를 사용하면 됩니다.
[code]localStorage.setItem("저장배열명", JSON.stringify(array));
JSON.parse(localStorage.getItem("저장배열명"));[/code]

나중에 시간되면 크롬용 MP3Player도 만들어봐야겠어요. NPAPI를 제공하는 것 같아 로컬파일 접근도 되는 것 같아요(확실하진 않지만....-_-).
 
Posted by 머드초보

댓글을 달아 주세요

  1. 지나가다 2010.01.14 18:34  댓글주소  수정/삭제  댓글쓰기

    쿠키같이 서버에서 컨트롤하는 데이터가 아니라 클라이언트 단에서 저장할 수 있어서 좋습니다.<---- 쿠키도 클라이언트에 저장됨.

    • 머드초보 2010.01.16 00:38  댓글주소  수정/삭제

      아...js에서도 쿠키를 생성할 수 있군요 ㅠㅠ
      지금까지 php나 jsp 등에서만 생성할 수 있는 줄 알았어요 ㅠㅠ
      감사합니다 ^^

  2. 달빛발광 2010.02.09 21:59  댓글주소  수정/삭제  댓글쓰기

    와우! 크롬에서 쓸수있는 플러그인이라니요 ㅠㅠ 저는 친구들한테 크롬 추천했다가 ㅠㅠ 안되는거많다고 욕만먹엇는데 님께서는 정말 대단하시군요 ㅠㅠㅠ

    • 머드초보 2010.02.12 00:07  댓글주소  수정/삭제

      음...사실 아직 베타고 안되는 게 많기는 합니다-_-
      아직은 추천할만하지 못한듯 ㅠㅠ
      그래도 속도하나만은 최강이죠^^

 
Javascript로 개발하다보면 값을 확인하기 위해 alert을 가끔씩 찍습니다-_- 요즘은 FireBug와 같은 Javascript 디버그 툴들이 참 많이 있긴하죠.
FireBug는 console.log를 통해서 메세지를 찍을 수 있죠.
하지만, FireBug를 켜지 않으면 에러를 뿜어버리는 단점이 존재를 하죠-_- 그래서 가장 간단히 값을 확인하는 것은 역시나 alert이죠. 하지만, alert의 단점은 마우스동작으로 인한 값을 추출하기 위해서는 확인하기 힘든 단점이 있어요.
마우스로 드래그앤드랍을 하는 사이에 값을 확인하고 싶은데, 거기서 얼럿이 떠버리면 확인하기 힘들죠-_-

그 단점을 극복해주는 Blackbird라는 놈이 있는데요. 이름 참 잘 지은 것 같네요. 웹사이트에서 검은창으로 떠다니는 디버그메세지창을 보여주거든요-_-

아래는 다운받고 데모를 볼 수 있는 사이트입니다.
http://www.gscottolson.com/blackbirdjs/

사용자 삽입 이미지
사이트 방문하시면 사용법은 그냥 알 수 있구요.
추가도 그냥 해당 사이트에 js와 css파일을 추가만 하시면 바로 쓸 수 있습니다^^
그리고 웹사이트 한쪽 구석에 나오게 되는데 저것에 의해서 화면이 가려질까봐를 염려한-_- 창 이동 단축키가 존재합니다-_-
단축키로 창을 보이고 안보이게 할 수 있습니다. 클리어로 창 내용을 지울 수도 있구요^^

로그찍는 것도 로그레벨에 따라 찍을 수 있어서 좋네요. 그리고, 프로파일링 기능(이라고 하기에 좀 뭐한-_-)이 있는데, 성능을 개선을 위한 수행시간 측정을 해주는 기능도 제공합니다^^

다만 아쉬운 점이 있다면 객체나 배열을 한번에 로그로 찍을 수 있는 기능이 없네요.
Arthropod이라는 Adobe AIR로 개발된 Flash디버그메세지창이 있는데요(이것과 매우 비슷하죠^^). 이것은 그냥 Debug.object(object명); 이라고 치면 그 객체정보가 다 나오는 기능이 있죠.
배열도 Debug.array(array명);하면 배열내용을 확인할 수 있구요.

그래도 크로스브라우징으로 로그를 찍을 수 있어서 참 좋은 듯^^ FireBug는 FireFox에서 밖에 안되서-_-

PS. 이 프로그램은 http://twitter.com/xguru님으 트위터를 빨로우 하다가 발견했습니다. 역시 트위터의 힘은 대단한 것 같아요^^ 감사해요~
 
Posted by 머드초보

댓글을 달아 주세요

  1. BlogIcon 성주 2009.12.29 13:30  댓글주소  수정/삭제  댓글쓰기

    저는 RSS 구독을 통해서 발견했습니다.
    역시 인터넷의 힘은 대단해요

  2. BlogIcon 드렁크수달 2010.05.06 22:53  댓글주소  수정/삭제  댓글쓰기

    이런게 있을줄 알았습니다.. 낼 한번 테스트 해보고 좋으면 만든사이트마다 다 적용을 시켜봐야겠네요 ^^ 좋은글 감사합니다. 퍼갈게요

  3. BlogIcon Kata Pro 2010.06.19 00:33  댓글주소  수정/삭제  댓글쓰기

    좋은 정보 감사합니다. 엮인글(트랙백)을 추가하였습니다.

  4. 2011.05.04 18:42  댓글주소  수정/삭제  댓글쓰기

    감사합니다.

 

이런 IDE도 있군요.
지원하는게 좀 특이하군요.
Ruby on Rails, Adobe® AIR™, Apple iPhone(아이폰!!!), PHP(EditPlus면 만사오케이인데^^)를 지원합니다.

사용자 삽입 이미지

로고도 이쁘네요^^


우선 이클립스 기반이어서 이클립스 플러그인 형식으로도 설치를 할 수 있습니다.
그냥 설치하면 플렉스빌더처럼 StandAlone형태로 돼요.
http://www.aptana.com/studio/download
여기서 받으면 되구요.
다음 신공으로 설치하면 됩니.....아 안된다-_-;
선택 사항이 하나 나오는데요. 파일을 Aptana Studio랑 연결할꺼냐고 묻는데 연결하고 싶으면 다 선택하시고 연결하기싫으면 해제해야겠죠? ^^ 어쨌든 설치가 완료되고 실행해봅시다-_-;
무슨 경고창이 뜹니다-_-; FireFox를 깔라고 하네요-_-;
가볍게 깔아주든지 그냥 무시합시다-_-;
보면 이클립스랑 완전 똑같군요-_-;

프로젝트를 만들어봅시다.
File -> New -> Project -> .....아....아무것도 없군요.
AIR플러그인을 설치해야합니다.
처음에 나오는 Aptana Start Page에서 Plugins에서 중간쯤에 Adobe® AIR™가 보일껍니다.
Download and install클릭하면 Adobe AIR Support체크하고 설치하면 됩니다.

그럼다시 프로젝트를 만들어봅시다-_-;
File -> New -> Project -> AIR Project가 생겼습니다.
Project이름은 HelloAir -_-;
Next로 끝까지가면 Ajax Library를 선택할 수 있어요^^
저는 Ajax를 모르므로 ㅠㅠ 그냥 Finish를.....ㅠㅠ

왼쪽 아래에 Project를 보면 AIRAliases.js파일이 꼭 필요한데 알아서 집어넣어줍니다.
저거 혼자서 다하려면 AIR SDK에서 가져와서 추가해줘야해요.
위에 RUN을 해보면 애플리케이션이 뜰꺼에요 ^^
air객체를 통해서 air관련된 것을 접근해서 쓸 수 있어요!
air.trace("") 하면 trace도 찍을 수 있답니다-_-;

Aptana의 가장 큰 단점!
아직 디버깅이 안돼요-_-;

 
Posted by 머드초보

댓글을 달아 주세요

  1. BlogIcon 검쉰 2008.03.26 14:08  댓글주소  수정/삭제  댓글쓰기

    전 RoR용 툴 찾다가 봤는데 AIR 지원한다길래 신기했... ^^;

    • 머드초보 2008.03.27 08:27  댓글주소  수정/삭제

      검쉰님 반갑습니다 ^^ 또 오셨네요 ^^
      루비는 넷빈즈로....-_-;
      저도 루비를 배우고 싶은데 어떻게 시작을 해야할지 ^^

    • 머드초보 2008.04.02 08:34  댓글주소  수정/삭제

      아 구독중이군요 감사해요 ^^(내용도 별로 없는데-_-)
      우와 6만원어치면 3권정도? ^^
      저도 책을 구입하던지 해야겠네요 ^^

    • BlogIcon 검쉰 2008.04.02 10:06  댓글주소  수정/삭제

      사실 머드초보님 블로그 구독중이라 새글 올리시면 찾아옵니다. ㅋㅋ

      루비 배우고 싶어서 냅다 책 6만원어치 샀던 저는..
      현재 공부 안하고 있습니다. (반성;; )

    • BlogIcon 검쉰 2008.04.02 10:08  댓글주소  수정/삭제

      '프로그래밍 루비' 가 무려 3만9천원.;
      레일즈 책 한권은 2만8천.. ㅜㅜ

      공부해야지요 ;;;

    • 머드초보 2008.04.02 11:18  댓글주소  수정/삭제

      아하 그렇군요 ^^
      완전 비싸네-_-;
      그래도 배움을 위해서라면 ^^