Javascript Framework Matrix
신규 웹사이트 개발을 맡게 되면 가장 먼저 하는 작업 중 하나가 작업 디렉토리를 생성하고, 이미지와 플래시, CSS, Javascript와 같은 공통 파일들을 저장하는 별도의 디렉토리들을 구성하는 작업이다.
다음으로 HTML 문서의 문서형(Doctype)을 정의한 프로토타입 HTML 파일을 생성하고, 초기화를 위한 CSS 파일도 생성한다. 혹시 jQuery를 기본 자바스크립트 프레임워크로 사용한다면 jquery.js 파일도 jquery.com에서 내려 받아와야 할 것이다. 거기에 jQuery기반의 라이트박스(thickbox) 같은 라이브러리를 이용하려면 다시 Thickbox 웹사이트를 찾아가 라이브러리 파일을 내려 받아와야 할 것이다.
Project Deploy는 이러한 단순하지만 귀찮게 여겨지는 작업을 손 쉽게 처리해주고 있다.
Project Deploy에서는 Doctype, CSS 적용 방식, jQuery 사용 유무 등을 한 번에 처리한다.
문서형과 CSS, jQuery사용 유무를 결정하고, 이미지와 플래시 디렉토리 생성을 결정한 뒤에 deploy!를 클릭하면 압축파일을 하나 내려 받을 수 있다. 내려 받아진 압축 파일을 원하는 디렉토리에 풀어 주면 다음과 같이 필요한 디렉토리와 파일들이 갖추어지게 된다.
원하는 디렉토리 구조와 파일들을 갖추었다.
샘플로 포함된 HTML 문서에는 다음과 같이 사용자가 선택한 CSS와 Javascript 파일들이 모두 포함되어 있으며, 문서형도 정확하게 정의되어 있다.
샘플 HTML 내용
이처럼 Project Deploy는 개발자가 원하는 기초 작업을 간편하게 처리할 수 있도록 도움을 주고 있다. 하지만 모든 프로젝트와 위와 동일한 디렉토리 구조와 자바스크립트 파일을 요구하지는 않을 것이며, 자바스크립트 프레임워크가 jQuery뿐만이라는 점도 jQuery이외의 프레임워크를 사용하려는 개발자들에게는 그다지 매력적이진 않을 것 같다.
프로젝트 성격이나 기획에 따라서 디렉토리 구조가 다를 수도 있고, 심지어 개발자 취향에 따라서도 다를 수 있다. 원하는 자바스크립트 프레임워크가 다를 수도 있고, CSS를 초기화 하는 방식도 이것과 다를 수 있다. 그래도 jQuery프레임워크를 사용하려는 개발자에게 Thickbox등 주요 라이브러리를 쉽게 포함하여 별도로 파일을 구하는 수고를 덜어주는 것은 마음에 들었다.
Project Deploy는 조금 더 다양한 선택 사항을 갖춘다면 지금보다는 이를 사용하려는 개발자들이 늘 것 같고, 개발자들은 이 서비스를 이용할 수도 있겠지만 축적된 경험으로 자신만의 초기 작업 디렉토리 구조와 파일들을 정리해 놓는 수고가 있었으면 좋겠다.
Firefox 에서는 옵션의 내용만큼 자동으로 커집니다
$(function() {
$(".ProductAttributesSelect")
.mouseover(function(){
$(this)
.data("origWidth", $(this).css("width"))
.css("width", "auto");
})
.mouseout(function(){
$(this).css("width", $(this).data("origWidth"));
});
});
Fix Drop down <select /> with fixed width cutt-off bugs on IESelect Box I.E. Width ProblemViewing Option Text (in IE7) that's Wider than the Select List