JAVASCRIPT

  근 한달 동안 소중한 책들이 연달아 시리즈로 출판되었습니다.  책들의 소개에 앞서 웹 개발에 대한 트랜드가 과연 어떻게 흘러갈까? 라는 생각을 문득하게 됩니다.  RIA 에 맞춰 다양한 언어에서 강력한 인터넷 어플리케이션을 만들 수 있도록 방향을 잡고 변화하고 있고 그에 MS, SUN, Adobe 에서도 다양한 방법과 기술을 제시하고 있습니다.
사용자 삽입 이미지


  MS, SUN 과 Adobe의  RIA 기술은 닷넷 프레임웍이나 SDK와 같은 Runtime 환경을 위한 배포의 정책을 함께 가져야 한다는 것이 단점이 될 수 있습니다.  배포라는 부분은 아직까지는 무시 못할 부분중에 하나이기 때문이죠. 허나 자바스크립트에 비하면 그 기술과 기능은 분명 월등합니다.  반면 자바스크립트는 그러한 부분이 전혀 없고 단지 브라우저가 지원하는 ECMAS262 표준과 각 브라우저의 JavaScript 엔진에 따라서 손쉽게 동작하고 있습니다.

그렇기 때문에 현재 국,내외를 불문하고 많은 사이트에서 자바스크립트 프레임웍을 사용하고 있습니다.  서로 나아가야 할 방향은 틀리기 때문에 서로 비교하는 것이 오류일 수도 있지만… ^^;

한가지 더 언급하면 MS, SUN, Adobe에서 제시하는 기술은 너무나 다양한 사용자의 환경, 인터넷 인프라에서 원활히 많은 기능을 충족 시키기에는 아직은 어려움이 있어 보입니다.  RIA의 모든 기능적 조건을 만족하기 위해서는 그만큼의 시스템 환경과 인터넷 인프라가 구축되어야 하지만 반면 국외의 경우 아직도 매우 낙후한 환경이 많이 존재한다는 것입니다.  
이에 경량의 자바스크립트 프레임웍은 낙후된 환경에서도 현재보다 진보된 기술과 기능을 제공하도록 발전해 가고 있습니다.  다가오고 있는 인터넷 환경의 Rich Application에 필요한 기술을 모두 갖출 수 있도록 발전해 나갈 수 있으리라 봅니다.


JavaScript 로 Ajax/Rich UI 실무와 연구(?)를 꾸준히 해오면서 힘들었던 것은 대부분의 자료가 외국 자료였고 자주 접하게 되는 프레임워크의 레퍼런스조차 국내화 되어있는 것이 턱없이 부족했었다.  이에 2006년 김영보선생님의 Prototype 프레임워크를 분석한 “Ajax Prototype.js 완전정복” 이라는 책을 시작으로 JavaScript의 관심도는 무척이나 높아졌던 것 같습니다.(개인적인 생각)

그 이후 꾀 오랜 시간이 흐르고 최근에 줄줄이 발간된 ‘JavaScript 완벽가이드’, ‘Prototype & Script.aculo.us’, ‘Pro JavaScript Techniques’, ‘jQuery in Action’ 자세히 보면 인사이트 출판사에서 웹이 나아갈 방향 아니 미래를 읽었을까?  



자바스크립트 완벽 가이드 상세보기
데이비드 플래너건 지음 | 인사이트 펴냄
웹 2.0과 Ajax 시대의 중심에 있는 자바스크립트의 기초부터 고급까지! 이 책은 프로그램 언어인 자바스크립트를 체계적이고 심도 있게 다루었다. 자바스크립트에 대한 깊이 있는 설명, 자바스크립트답게...

  연이어 출간된 서적들의 흐름을 보면 JavaScript의 원론을 파악할 수 있는 JavaScript 완벽가이드라는 책.  이는 JavaScript에 대해서 심도 있는 부분까지 알고 싶어했던 개발자라면 원서로 이미 접했을 만한 책이다.   또한 이 서적은 최근 5판까지 개정판이 원서로 나왔었고 3판까지 번역서가 출간된 이래 5판의 원서가 출간되지 꽤 오랜 후에 번역되었는데 원서를 보며 어려움을 겪던 개발자들에게 분명 단비와 같은 역할을 할 것이라 생각합니다.
  그리고 “오해가 깊은 자바스크립트”의 오해의 골을 풀어주지 않을까 생각하고 늘 바이블과 같은 역할을 해줄 것이라 믿습니다.



프로 자바스크립트 테크닉 상세보기
존 레식 지음 | 인사이트 펴냄
테크닉! 이 책은 JavaScript의 고급 테크닉을 다룬다. 너무 기초적인 문법이나 문장 구조 같은 기본적인 사항들을 배제하고, 곧바로 자바스크립트에서의 객체지향이라는 개념과 테스트를 위한 도구, 배포와...

Pro JavaScript Techniques 는 초급을 넘어선 자바스크립트를 이용한 Ajax/Rich UI 개발을 해보았거나 jQuery, Prototype와 같은 프레임워크를 이용하면서 이들에 대한 기술적 의문을 갖었던 것들의 많은 부분을 해소시켜줄 수 있는 책이다.  

이 책의 서두 2부까지의 내용은 JavaScript의 가장 기본이며 자바스크립트에 대한 오해 즉 JavaScript 개발자가 갖는 오해의 많은 분들을 풀어줄 수 있는 내용을 담고 있습니다.  번역서가 나오기 전 원서를 통해서 내용을 접할 때는 확실한 의미 전달이 되지 않았었는데 이번 번역서를 계기로 명확한 의미를 이해할 수 있는 계기가 되었던 것 같습니다.

그리고 jQuery의 창시자인 존 레식(John Resig)은 본인이 갖은 노하우를 거침없이 독자(자바스크립트 개발자)에게 모든 것을 공유할 마음을 갖고 있는 것 같습니다.  그의 블로그를 통해서도 느낄 수 있지만 늘 열심히 새로운 기술에 대한 공유를 선두하고 있고 저 같은 경우에도 그런 열정을 많이 배우고 있습니다.  (각설하고)

책의 모든 내용을 설명으로 일관할 수 없지만 실무에서 JavaScript를 이용한 Ajax/Rich 개발을 하고 있는 분이라면 이 책을 38,939,392,391,382번 읽어 보시길 권장드립니다. (그 만큼 많이 읽어 보면서 의미를 되새길 만한 내용들이 매우 풍부합니다.)


프로포타입과 스크립타큘러스 상세보기
크리스토피 포트누브 지음 | 인사이트 펴냄
이 책은 자바스크립트 개발에서 필수적인 라이브러리가 된 프로토타입(Prototype)과 스크립타큘러스(script.aculo...프로토타입(Prototype)은 동적인 웹 애플리케이션 개발을도와주는 자바스크립트 라이브러리다....

  다음 소개할 책들은 아시는 분들은 아시겠지만 위의 책들의 내용이 지식으로 선행된다면 좀더 쉽게 다가올 수 있는 내용입니다.  ‘Prototype & Script.aculo.us’ 는 앞서 설명한 책들의 기술(자바스크립트의 다양한 기술)과 더불어 DOM, CSS 에 대한 지식이 함께 필요로 하는 책에 가깝습니다. 
  흔히 생각하는 레퍼런스 서적에는 조금 거리가 있지만 그 안에 숨어있는 사상과 특징들을 쉽게 파악하여 프레임웍 자체의 큰 그림을 그릴 수 있는 내용들로 이뤄져 있습니다.  또한 DOM, CSS에 대한 궁금증과 기술 학습에 절실함을 느끼게 될 지도 모릅니다.  Prototype을 통해 Script.aculo.us는 탄생한 것 처럼 Prototype을 이용해 ExtJS와 같은 Grid 프레임웍도 탄생할 수도 있는 확장성까지…

간단히 레퍼런스 가이드 역할을 넘어서 자바스크립트를 이용한 Ajax/Rich UI Application을 만드는데 큰 도움을 줄 것입니다.


프로그래밍 JQUERY 상세보기
베어 바이볼트 지음 | 인사이트 펴냄
『프로그래밍 jQuery: jQuery in Action』은 숙련된 웹 개발자가 되려 하는 초보 웹 개발자들을 위해 유용한 클라이언트 측 도구인 jQuery를 소개한다. jQuery의 설계 철학을 충실히 다룬활용서이다. iQuery의...

jQuery in Action이라는 책은 읽어 보지 않아서 모르겠지만 국내에서 이미 jQuery 프레임웍을 사용한 서비스들이 곳곳에 있고 관심있는 개발자들도 상당한 것으로 알고 있다.  존 레식의 JavaScript의 노하우의 결정판이기 때문에 이를 통해 JavaScript와 DOM, CSS의 모든 기술적 이해를 위한 윤활유 역할을 분명 해줄 것이라 판단한다.  또한 책이 번역되기 위해 인사이트 출판사에서 뒷받침하고 있기 때문에 더욱 믿음이 간다.

이미 많이 나와있지만 레퍼런스가 없는 프레임워크(Dojo, Mootools, ExtJS 등)가 많습니다.  그에 반해 Prototype과 jQuery에 대해서는 국외를 포함 국내에도 많은 자료들을 얻을 수 있는 기회가 많아 졌습니다.  하지만 프레임워크을 이용하고 접근하는 것에 있어서 사상을 먼저 이해하려는 접근법이 매우 좋은 좋은 것 같습니다.(김영보 선생님께서 해주신 말입니다.)

자리잡아가고 변화하는 과정의 자바스크립트의 “Unobtrusive JavaScript” 번역하기 힘든 수식어 처럼, “오해가 깊은 언어”라는 관례적인 이해의 탈바꿈 과정에서 위의 책을 포함한 다양한 서적들이 많은 도움을 주리라 생각됩니다.  
  또한 JavaScript와 관련된 좋은 서적들이 더 많이 출간되었으면 좋겠습니다.



신고

'라이프로그 > 책/잡지' 카테고리의 다른 글

JavaScript 에 관한 고찰과 책 소개  (15) 2008.09.11
좋은 생각  (0) 2008.04.22
javascript 책 소개  (0) 2008.04.14
올해 읽어 볼 전공 관련 서적!!  (5) 2008.02.14
원서를 읽어야할 이유  (6) 2008.01.04
마음에 양식 - 1日 30分 외 3종  (0) 2007.12.11
Posted by Rhio.kim
John-David Dalton 씨는 최근(?) 업데이트된 120k가 넘는 Prototype.js 를 압축한 라이브러리를
구글 그룹스에 올렸네요.

1.4 버젼부터 대부분의 릴리즈 버젼을 압축하였네요.
용량은 상당히 많이 줄었네요..

Prototype’s lowest weighs in at 20.4kb.
Scriptaculous’ lowest weighs in at: 19.7kb.
Protoculous’ lowest weighs in at: 38.4kb.

또한 Script.aculos.us 와 Protoculous

http://groups.google.com/group/prototype-core
사실 오픈된 Compressor 를 적용시키면 에러가 많이 나는데 좋은 작업 해주었네요..
신고
Posted by Rhio.kim
사용자 삽입 이미지
Ajaxian 의 2007 Ajax tool 투표 결과입니다.

올 한해 다양한 Javascript Library 들이 출시 되고 출시되었던 라이브러리들도 기능 강화와 OOP 개발이 가능하도록 라이브러리화 되었습니다.

Prototype 의 강세는 여전하네요..
다만 jQuery가 그 뒤를 바로 뒤쫓아오네요..

Ext JS 가 3위에 등극했다는 것은 상당히 !!

외국에서는 그리드 형식의 Ajax 어플리케이션을 선호하나봅니다.

웹 상에서 구현하기 힘든 그리드 형식의 어플리케이션 개발이 한결 수월해졌기 때문인데요.

아마 웹 기반 CRM 같은 개발 혹은 관공서나 국가 기간같은 디자인적인 부분을 많이 신경 쓰지 않고 기능 위주의 인터페이스에서 아주 효율적인 어플리케이션 개발이 가능하다는 것이죠.

상당히 발전할 수 있어 보입니다.

Script.aculo.us 는 Prototype을 모태로 상당히 많은 유저층을 이루고 있습니다.  둘이 함께 이용한다면...
60% 정도를 장악하고 있네요.  하지만 이제 jQuery와 interfaceElement 까지 나와서 내년 2008년은 어떻게 바뀔지 모르겠네요...

내년은 아무래도 더 많은 javascript library가 발표 되리라 예상됩니다.

또한 UI 라이브러리인 Mootools와 Yahoo 인터페이스에 최적화 되어있는 YUI 아주 많이 사용하고 있네요..
Mootools 는 깔끔한 UI 처리가 가능하고 Effect 별 모듈러를 지원해 필요한 UI 모듈만 따로 모아 js 라이브러리 파일을 생성해서 사용할 수 있습니다.

YUI는 야후의 javascript 아키텍쳐인 douglas crockford 씨의 개발 설계가 숨어있고 Yahoo라는 대형 서비스에서 검증된 실로 Prototype 못지않게 공부해 볼만한 UI 라이브러리라 생각되어집니다.

하지만 단점이라면 Yahoo에 최적화된 라이브러리이고 국내 정서에 자신의 사이트에 Yahoo라는 라이브러리를
써야한다는 자존심 괘난 자존심도 생기게 되구요.!!   다른 이유도 많이 있겠죠...

마지막으로 여전히 자체 개발한 Ajax Tool을 사용한다는 것..
어쩌면 내년에는 더 많아질지 모르겠다는 생각이 입니다.

사실 그랬으면 좋겠습니다.
좀더 많은 소스타입의 다양한 형태의 라이브러리가 많이 출시 되었으면 좋겠습니다.
신고
Posted by Rhio.kim
사용자 삽입 이미지

별점 라이브러리입니다.
Script.aculo.us 와 Prototype 1.6.0을 이용한 라이브러리 입니다.

유사하게 만들어 놓은 것이 있기는 한데 이게 훨씬 더 깔끔하네요...
투명 이미지를 통한 백그라운드 색상을 변화시켜서 처리를 했습니다.

상당히 효율적인 생각으로 접근했네요.  대부분의 국내 사이트의 롤오버 효과를 보면 이미지를 새로 로딩하는
경우가 많은데요.

이는 효율적인 웹 사이트 개발에 아주 저해되는 요소입니다.
개발자가 알아야할 부분이기도 하지만 디자이너도 알아야 할 부분입니다.

롤오버 자체는 더이상 이미지를 두개로 만들어 _on.gif  와 _off.gif 방식으로 롤오버는 더 이상
만들지 마시길 바랍니다.

이 라이브러리도 한가지 단점이라면 투명이미지를 활용해서 백그라운드 색상에 다른 경우에는
이미지를 새롭게 만들어 주어야 한다는 것이죠!

별의 색깔은 자유자재로 변곃라 수 있지만 백그라운드의 색상에 맞게 변경할 수는 없답니다.
그것까지 가능하려면 플래시를 조금 이용하거나 base64 이미지를 이용해서 동적인 이미지를 그리면 되겠죠.
하지만 그렇게 처리한다는 것 자체는 너무 무거워지는 라이브러리가 된다는 것!!

사용법 간단하게 위와 같이 파일을 import 합니다.
Css 파일도 import하구요. 이렇게 사용하면 됩니다. 다양한 옵션들은 이 처럼 설정하시면 됩니다. 사용자 css 도 가능하겠죠.. ^^
신고
Posted by Rhio.kim
사용자 삽입 이미지
























사이트 : http://nasa.gov/

내년 나사 50주년을 기념하여 지난 밤에 NASA 5.0 으로 런칭을 했네요.
UI 부분은 모두 Script.aculo.us 와 Prototype 으로 모두 만들어 졌다고 합니다. 점점 Web2.0 방식의
사이트들이 많이 나오고 정부 웹 사이트에까지 Javascript 프레임웍이 사용되고 있네요.

날로 발전하고 Javascript에 대한 관심도도 그 만큼 성장하니 기쁩니다.

새롭게 추가된 기능을 보면

  • Transitions: Lots of animations in drop downs and trees
  • Accordion: Rollover news items
  • New topic based navigation
  • Calendar component
  • Tag cloud (now that IS Web 2.0
  • Bookmarking: My NASA and support for Digg, Del.icio.us, and more
  • Comments and polls throughout
  • Polls
  • Image gallery

신고
Posted by Rhio.kim
사용자 삽입 이미지
Script.aculo.us 개발자인 Thomas Fuchs 씨는

다시 컨설팅 업무로 돌아가면서 새로운 자신의 사이트를 만들었습니다.

만들어진 사이트에는 Script.aculo.us 2.0의 일부 기능(PhotoZoom)을 사용하여 Script.aculo.us의 달라질 능력을 내비췄습니다.







신고
Posted by Rhio.kim
사용자 삽입 이미지
이번주 중에 진행중인 개인 프로젝트 입니다.

간단한 고전 퍼즐이구요.

0.1.00 버전에서는 순수히 뼈대와 ajax 게임자체가 동적으로 움직이다보니 메모리 혹은 CPU 점유일이 실행간 급격히 오르락 내리락 하는 경우가 많은데요.
그런 부분을 해소시키고 부드럽게 진행할 수 있고 기본적인 퍼즐의 기본 기능에 구현하는데 목적을 둡니다.

일단 기본 개발 룰은 퍼즐 게임을 위한 기본 판넬은 DIV 구조로 미리 작성된 상태에서 OOP, MVC 개념을 추가해서 Ajax 개발하도록 하겠습니다.

내부적으로 Prototype과 script.aculo.us 를 사용하고 있지만 왠만하면 사용하지 않는 방향으로 점점 나아갈 것입니다.

2.0 버젼에서는 script.aculo.us를 통해 비쥬얼한 부분을 추가와 DB 연동을 통해 rank 부분을 지원할 예정입니다.

--------------------------------------------------------------------------------------------------

전제
1. 원하는 레벨을 선택할 수 있습니다.
    [초급, 중급, 고급, 초난감]
2. 원하는 Row, Cell 개수를 입력받아 할 수 있습니다.
3. 플레이 타임을 표시합니다.
4. 숫자모드, 알파벳 모드(버젼2), 가나다모드(버젼2) 를 지원합니다.
5. 클릭을 하면 자동으로 비어있는 Cell로 이동합니다.
6. 게임시작을 누르면 랜덤으로 퍼즐이 섞입니다.
7. 모두 맞추게 되면 성공 메세지를 뿌립니다.

8. 게임번호를 선택할 수 있습니다.(차후 이스트에그 지원)
9. 화면 리프래쉬, 리로드, game reset을 누를 경우 랜던함 게임이 DOM으로 생성

기본 구현 구성

퍼즐은 테이블로 생성해 TD안에 숫자를 입력하며 해당 TD를 클릭할 경우 비어있는 TD와 교체를 합니다.

import  script.aculo.us
          prototype 1.5.1

신고
Posted by Rhio.kim