[bootstrap] 폼 만들기

http://twitter.github.com/bootstrap/base-css.html#forms

bootstrap의 CSS만 사용해서, 다음과 같이 깔끔한 폼을 쉽게 만들 수 있습니다.

마침 봄싹 홈페이지를 개편하려던 중에 Bootstrap을 보게됐고, 유려하고 일관성있는 디자인, 다양한 UI 제공, 깔끔하고 얇게(?) 정리된 문서와 가벼워 보이는 구성 때문에  바로 도입했습니다.

처음엔 네비게이션 바를 만드는 것부터 했었는데, 오늘은 폼 만드는걸 했고, 다음엔 탭 뷰를 다루게 되지 않을까 싶네요. 폼은 CSS만 class만 잘 사용하면 되는데… 구성은 다음과 같습니다.

여기서 로그인 폼 코드는 다음과 같습니다.

  • form 태그에는 form-horizontal 클래스를 붙인다.
  • form 구성 요소는 div 태그를 사용하고 control-group 클래스를 붙인다.
  • form 구성 요소의 제목은 label 태그를 사용하고 control-label 클래스를 붙인다.
  • form 구성 요소의 본문을 둘러싸는 div 태그를 사용하고 controls 클래스를 붙인다.
  • form 구성 요소는 div.controls 안에 둔다.
  • input type=”text” 요소에는 input-xlarge 클래스를 사용한다.
  • form 버튼을 둘러싸는 div 태그를 만들고 form-actions 클래스를 붙인다.
  • form 버튼은 div.form-actions 안에 두고, button 태그를 사용하고 btn 클래스를 붙인다.

[자바스크립트] 모듈

http://blog.davidpadbury.com/2011/08/21/javascript-modules/

자바스크립트에는 자바의 import나 C#의 using이라는 개념이 없다. 그래서 자바스크립트를 사용하는 개발자가 직접 그런 개념을 구현하고자 노력 중이다.

모듈 패턴

http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth 이 글에 있는 최종적인 소스 코드가 다음과 비슷하다.

이 코드에는 다음과 같은 개념이 녹아있다.

Isolation

자바스크립트의 함수 스코프를 이용해서 글로벌 스코프 변수를 사용해서 발생할 수 있는 난감한 상황을 피할 수 있다. 함수 내부에 있는 모든것은 시스템의 영향을 받지 않는다.

namespacing

위 코드의 마지막 줄처럼 이미 window에 lab49라는 네임스페이스가 있는지 없는지 여부에 따라서 이미 있다면 기존의 것을 사용하고 없다면 비어있는 객체 리터널을 넣어서 새로 만들도록 할 수 있다. 위와 같은 함수 랩퍼를 여러 자바스크립트 파일이 사용한다고 가정했을 때 유용한 방법이다.

Private State

함수 안에 있는 모든건 외부에서 접근할 수 없기 때문에 코드를 격리시키기 좋긴하지만, 함수 밖에서 그 안에 있는 걸 아무것도 접근할 수 없다면, 별 쓸모없는 함수가 되고 만다. 그래서 lab49처럼 window 객체에 네임스페이스 역할을 할 객체를 붙이고, 거기에 외부로 공개할 것을 붙이는 형태로 코딩할 수 있다. 마치 add 함수처럼. 저렇게 코딩해두면 밖에서는 lab49.add(2, 2)처럼 호출할 수 있다.

CommonJS 모듈

CommonJS는 주로 서버 사이드 자바스크립트 런타임을 만든 사람들로 구성된 그룹으로 모듈 공개와 접근에 대한 표준화를 시도했다.

CommonJS 모듈 스팩

exports에 공개할 모듈을 추가하고, 모듈을 사용하는 쪽에서는 require를 사용해서 필요한 모듈을 가져다 사용한다.

CommonJS는 서버 사이드 자바스크립트 런타임을 주요 타겟으로 설계되었기 때문에 다음과 같은 이유로 클라이언트 사이드에 적용하기는 어려움이 있다.

  • requrie는 반드시 즉시 리턴해야 한다: 스크립트를 비동기적으로 다운로드하는 스크립트 로더를 사용하기 어렵게 한다.
  • 파일당 모듈: CommonJS 모듈을 만들려면 함수 하나로 감싸야하며 특정한 방법으로 구성해야 하는데, 그러려면 StitchBrowseify같은 노드 모듈을 사용해서 여러 모듈 자바스크립 파일을 하나의 자바스크립 파일로 묶어주는 컴포넌트를 사용하지 않고는 힘들어진다.

AMD(Asynchronous Module Definition)

AMD는 브라우저용 모듈 포맷으로 설계됐다. CommonJS 그룹에서 먼저 제안했지만, Github으로 자리를 옮기고 나서 테스트 스위트로 관리되고 있다.

AMD의 핵심 함수는 define 함수다. 이 함수를 세 개의 매개변수를 가지고 호출하는 코드가 가장 자주 사용하는 방법인데, 첫번째 매개변수로 모듈 이름을 넘기고, 두번째는 이 모듈이 의존하고 있는 모듈 식별자 배열을 넘기고, 마지막으로 모듈 정의를 반환할 팩토리 함수를 넘긴다.

모듈 정의가 define으로 감싸지기 떄문에 얼마든지 한 파일 안에 여러 모듈을 정의할 수 있다. 그리고 모듈 로더가 define 모듈 팩토리 함수를 호출할 때 그 의존성을 파악하여 필요로 하는 모듈을 먼저 비동기적으로 다운로드 할 수 있게 해준다.

자바스크립트가 구리다는 말이냐?

이런 개념 부재가 다른 언어를 사용해온 개발자에게 불편을 주긴하지만, 이런 개념 부재로 인해 자바스크립트 개발자 스스로가 원하는 패턴으로 모듈 구조를 만들어가고 있다.

10년 전에 이런 종류의 기능이 만들어졌다면 어땟을지 상상해보라. 지금처럼 서버 사이드에서 동작하는 자바스크립트 애플리케이션이나, 브라우저에서 비동기적으로 리소스를 로딩하는 기술도 없고 RequireJS 같은 로더처럼 텍스트 템플릿으로 리소스를 추가하는 것과 어울리는 기술은 아니었을 것이다.

 

[CSS]이미지 위에 글자 올리기

position의 absolute와 relative를 알면 쉽게 할 수 있다.

http://www.w3schools.com/Css/pr_class_position.asp

absolute는 자신을 감싸고 있는 엘리먼트를 기준으로 자리를 잡는 것이고, relative는 가장 근접해 있는 엘리먼트를 기준으로 자리를 잡게 된다.


겹칠글자

이런 구조로 HTML을 잡았다고치자. 나름 깔끔한 구조라고 생각한다. writer_box라는 영역에 글쓴이의 아바타를 이미지로 보여주고 그 이미지 위에 태그로 감싼 이름을 올리고 싶다.

그럼 img와 span이 div를 기준으로 자리를 잡도록.. 즉 absolute로 만들어 버리면 그 둘은 겹쳐지게 된다.

#writer_box img, #writer_box span {
position: absolute;
}

그런데 아마도 이렇게 하면 span으로 감싼 글자가 이미지 위쪽에 겹쳐있을 것이다. 이때는 바닥을 기준으로 위치를 잡도록 span에다가 bottom: 0px; 을 추가할 수 있다.

그리고 img와 span을 감싸고 있는 div의 크기를 정해주는게 좋겠다. 어떨땐 짜부되서 이미지와 span을 알아볼 수 없을 때도 있으니 height 값을 설정해주면 되겠다.

흠냐.. 예전부터 해보고 싶었는데.. 이제사 해보네;


[IBM DW] HTML5 navigator

http://www.ibm.com/developerworks/opensource/library/x-html5mobile1/index.html

HTML5에 대해 궁금하던 찰나 무심코 IBM DW에 들어가봤더니.. 역시나 좋은 글들이 마구 쏟아지고 있었다. 
이 글에서 소개하는  내용은 흔히 GPS라 부르는 기능에 관한 것이다. 그것만 보면 심심할까봐 트위터 API랑 연동해서 접속한 사람 근방의 트위터글을 검색해 주는 애플리케이션을 소개하고 있다.
현재 위치 알아내기
            var gps = navigator.geolocation;
            if (gps) {
                alert(“gps enabled”);
                gps.getCurrentPosition(searchTwitter,
                        function(error) {
                            alert(“Got an error, code: ” + error.code + ” message: ” +
                                    error.message);
                        });
            } else {
                searchTwitter();
            }
첫번째 인자는 성공시 실행할 콜백, 두번째 인자는 실패시 실행할 콜백, 세번째는 옵션인데 생략했군요.
성공시 실행할 콜백에 전달되는 인자는 position
        function searchTwitter(position) {
            alert(“searchTwitter position=” + position);
            var query = “http://search.twitter.com/search.json?callback=showResults&q=”;
            query += $(“kwBox”).value;
            if (position) {
                var lat = position.coords.latitude;
                var long = position.coords.longitude;
                query += “&geocode=” + escape(lat + “,” + long + “,50mi”);
            }
            alert(“query=” + query);
            var script = document.createElement(“script”);
            script.src = query;
            document.getElementsByTagName(“head”)[0].appendChild(script);
        }
저기서 꺼내서 사용할 값은 주로 coords의 latitude(위도)와 longitude(경도). 여기서 잠깐… 위도 경도가 뭐더라.. 어떤게 가로인지 세로인지 햇갈린다. 적도를 기준으로 상하 각도를 위도. 북극과 남극은 그래서 위도 90. 경도는 영국 그리니치 천문대를 기준으로 좌우 각도.  서울은 북위 37도, 동경 126도.
위치 추적하기
trackerId = gps.watchPosition(function(pos){
var latLng = new google.maps.LatLng(pos.coords.latitude,pos.coords.longitude);
map.setCenter(latLng);
theUser.setPosition(latLng);
showLocation(pos);
});
watchPosition을 사용하면 계속해서 좌표 받아옴.
function stopTracking(){
if (trackerId){
navigator.geolocation.clearWatch(trackerId);
}
}
trackerId를 clearWatch에 넘겨줘숴 종료한다.
트위터 API랑 구글맵 API 사용법도 나오는데… 생략~

[제이쿼리] 매개변수가 있는 function을 HTML 엘리먼트에서 분리하기

매개변수가 없는 함수는 HTML에서 분리가 쉽습니다.

$(document).ready( function(){

    $(“#comment_add”).click(function() {
        $(“form”).submit();
    });

}

이런식으로 제이쿼리를 이용해서 click 이벤트가 발생했을 때 특정 폼을 서브밋하라고 이벤트를 등록할 수 있죠. 그러나;; 매개변수가 들어간 녀석들은 어떻게 할지 좀 난감합니다.

<img id=”btn_list” class=”action” src=”<c:url value=”/images/study/back.png”/>” onclick=”javascript:fn_click_study(${meeting.study.id});”/>

예를 들어 위와 같이 특정 함수에 어떤 변수 하나를 넘겨줘야하는데, 그 값이 매번 달라지고, 목록 속에 들어있는 모든 요소들에 대한 것이라.. 페이지 로딩시에 위와 같이 등록하기가 좀…

그래서 같이 스터디 하는 형 중에 제이쿼리를 유리갤라만큼 하시는 분이 계셔서 물어봤더니 다음과 같이 해결해 두셨더군요.

<img id=”btn_edit” class=”action” src=”<c:url value=”/images/study/edit.png”/>” member=”${meeting.study.id}” meeting=”${meeting.id})” />

이렇게 엘리먼트에 임의이 속성을 추가합니다. 이제 페이지 로딩시에 등록할 수 있습니다.

$(document).ready( function(){

    $(“#btn_edit”).click(function(){
        var self = $(this);
        var url = ‘<c:url value=”/study/”/>’ + self.attr(“study”) + “/meeting/update/” + self.attr(“meeting”) + “.do”;
        $(document).attr(“location”, url);

    });

}

아.. 그나저나 c:url 정말 악몽 같네요. 저거 없으면 context path가 루트여야만 제대로 동작하고.. @_@
아휴 귀차나.. ㅠ.ㅠ