빠른 웹 개발을 위한 스크립트 라이브러리.
Devteria Seminar Summary
Ajax Script는 작은 부분이고 대분은 UI Component나 FormValidation에 많은 부분이 사용된다.
장점
빨리 개발이 가능하다.
비효율적인 부분의 개선
단점
익혀야 된다는 것.
자신이 구축할 App 와 잘 부합되는 것을 선택하지 않으면 나중에 낭패.
라이브러리이 종류와 특징
Prototype
Javascript Framework
document.getElementById -> $ 로 대체 가능
Ajax 수신 후 Interface를 어떻게 할 것인가가 더 중요.
Prototype에서의 Ajax 사용
new Ajax.Updater('foo','/cotents.html'); // 이 줄로 Ajax 통신은 완료 됨.
Script.aculo.us
가장 강력한 부분은 Animation.
요즘은 popup 막을 시 Layer 개념으로 팝업을 띄우기도 함 이때 animation을 주고자 할때 손쉽게 할 수 있다.
Transition : 천천히 갔다가 빨리가고 빨리갔다 천천히 가는 것과 관련 된 option.
jQuery
Prototype과 유사한 Element 선택 type을 사용한다.
동일한 Method를 사용하여 일괄적으로 처리.
$('#stats').load('/contents.html');
YUI
UserInterface에 특화된 Library.
Perfomance가 굉장히 좋다.
Event 관리에서 치밀하며 고급 Event 관리가 가능하다.
Event를 놓치는 경우가 거의 없다.
부드러운 Effect 효과
Yahoo 개발자에 의해서 많은 library가 개발되고 있다.
쓰기는 불편.
Dojo Toolkit
Dojo는 정말 Desktop Application과 같은 Interface를 꾸미는데 특화 되어 있다.
국내 사례는 AllBlog를 도입하여 구축했다가 다른 Library로 교체 함. 잘못 적용한듯.
Ext JS
Dojo 처럼 특화된 Library.
기존 Library와 함께 사용가능하다.
Prototype, YUI, jQuery를 공식 지원.
부가기능이 필요하다면 관련 library를 받아서 실행가능.
GWT
Java로 짠 Code가 Javascript로 Compile 된다.
Perfomance가 뛰어나다.
Debbuging이 원활하다.
MooTools
Script.aculo.us, prototype 에서 안하는 것들을 개발하기 시작.
"." 연산자로 연결되는 문법 구사 지원 (현재는 Prototype도 "."을 지원)
F/W 추세
JQuery가 최고의 Library가 되지 않을까 생각됨.
개발환경
Aptana
Firefox의 PlugIn FireBug
간단한 Apache Demon - Xampp
FireBug
Inspect : 해당 Dom의 위치
profile : perfomance Check 가능
console : 간단한 Debuggin , Class 호출 등을 바로바로 실행 할 수 있다.
Header가 중요하다.
Javascript 자체를 보내어 바로 접근 하는 것도 가능.
Javascript는 가급적 body에 넣고 필요영역에 분할 해서 넣는 것이 performance 적으로 좋다.
Ajax에 대한 이해와 구현
Ajax란?
Asyncronous javascript and xml
xml 뿐만 아니라 Json등의 기술로도 통신가능 하다.
Page의 Reload 없이 특정 부분을 Update 하는 기술.
원래 있었으나 사용되지 않고 있었 뿐.
기존 기술과의 차이점
Email 사용시 type 하는 순간 실시간으로 유효성 검사가 가능하다.
Page 넘기지 않고 성공적 송수신 표현 가능
Ajax 기술 비판
접근성의 장애 (검색 사이트가 알아차리지 못함
Cross Domain , Header 정보를 통해 개선 가능
XmlHttpRequest Browser 버전 ie 4.0 아래 등의 것들은 작동 안함.