Useful JavaScript Library(1)

최근에 사용한 쓸만한 JavaScript Library 를 몇개가 있어서 정리해보았습니다.

Lodash.js

인지도 높은 underscore 와 비교되는 javascript library 입니다. underscore 의 모든 함수를 구현하였고, 추가적인 함수도 구현해 놓았습니다. 이 라이브러리는 arrays, objects, strings 등의 데이터를 다룰때 활용도가 높습니다. 예를 들어 [3,4,5,6,7,8] 등의 배열에서 5보다 큰 원소만 필터링해서 출력하는 간단한 로직을 직접 구현 하는 경우 적어도 for, if 문등을 사용하여 3줄 이상의 코딩을 하여야 하는데 lodash 를 사용하면 다음과 같이 한줄로 끝낼수 있습니다.

_.find([3,4,5,6,7,8], function(o) { return o > 5; });

저는 주로 Json 목록 객체를 필터링 하는데 사용하였습니다.

Store.js

cross-browser local storage 입니다. local storage는 html5 WebStorage API에서 추가된 기능이라서 html5 기능을 지원하지 못하는 구버전의 브라우저에서는 사용할 수 없습니다. 그런데 이 library 는 거의 모든 브라우저에 local storage 를 사용하는 것을 가능하게 해줍니다. 확인 해보셔야할 것은 브라우저 마다 저장할 수 있는 용량이 다르므로 왜만하면 최소 지원하는 size로 사용하시면 좋을 것 같습니다. 사용법은 html5 localstorage 와는 조금 다릅니다.

store.set('user', { name:'Marcus' })
store.get('user')

url hash 로 data 를 처리할때 구버전에 ie 에서 hash 길이가 1900~2000 자를 넘어가면 에러가 발생하여 이 library 를 사용하여 hash 로 처리하던 데이터를 대신 처리하였습니다. hash 로는 key 값만 넘기고 실제 data 는 store 에 저장하는 방식으로 구현하였습니다. key 는 datetime 으로 만들었습니다.

twbs-pagination(jQuery Pagination plugin)

여러가지 페이징 기능을 구현한 jQuery 플러그인을 찾았는데 twbs-pagination 이 제일 쓸만하다고 생각하였습니다. 이유는 사용법이 매우 간단한데서 찾았습니다. 페이징 처리된 UI 를 출력하기 위해 오로지 parameter 3개만을 전달 받아 사용할 수 있습니다. 전체 페이지수와 화면안에 보여질 page 수, 그리고 페이지를 클릭했을때 발생하는 event 함수 입니다. 아래 예제코드입니다.

    $('#pagination-demo').twbsPagination({
        totalPages: 35,
        visiblePages: 7,
        onPageClick: function (event, page) {
            $('#page-content').text('Page ' + page);
        }
    });

출력되는 목록에 대한 데이터와는 전혀 상관없이 매우 독립적인 코드로 구현되어있다는 부분이 잘되어 있다고 생각하였습니다.

저는 몇가지 옵션을 추가하여 사용하였습니다.

$pagination.twbsPagination('destroy');
...
startPage: currentPage,
initiateStartPageClick : false //기본이 true
...

paging 처리된 부분이 목록과 같이 refresh 되도록 구현되어있어서 처음에 $pagination.twbsPagination('destroy'); 명령을 추가하였고, UI 가 생성되면서 현재 페이지가 지정되도록 startPage option 을 추가하였습니다. 그리고 paging UI 가 생성되었을때 첫페이지를 한번 클릭하는 부분을 막아놓았습니다.