조금 색다른 오픈소스 Javascript library “bsJS”
열거하기도 힘들고 이젠 그 자체가 진부하다 느껴질 만큼 수 많은 자바스크립트 라이브러리가 있다. DOM을 다루는 간단한 라이브러리부터 MVC, MVVM 등 디자인 패턴을 기반으로 UI 컴포넌트까지 모든 것을 제공하는 프레임웍까지 웹 프론트앤드 분야의 뭐시기JS 는 너무 많고, 지금도 계속 만들어지고 있다. 그럼에도 불구하고 시장을 제패한 압도적인 녀석들은 있게 마련이다. jQuery, AngularJS, Bootstrap 등이 그들이다. 이 녀석들 중 특히 독보적인 녀석 jQuery. 그 자체로는 DOM 과 Ajax 관련 기능을 제공하는 작고 유용한 라이브러리로 시작했지만 지금은 jQuery 플러그인을 기반으로 광범위한 생태계와 커뮤니티로 무장되어있다. jQuery 와 자바스크립트를 동일시하는 사람이 있을 정도다. jQuery의 아성이 너무 대단하다 보니 상대적으로 이 분야에 도전하는 솔루션은 별로 보이지 않는다. 그야말로 업계에선 천상천하유아독존이다.
그런데 최근 우연찮게 새로운 녀석을 하나 발견했다. projectBS 라는 오픈소스 프로젝트의 결과물인 bsJS다.
bsJS 를 알기위해선 bsJS Github 저장소를 방문해야한다. 이 프로젝트의 커미터 대부분이 한국인이기 때문에 저장소의 README 도 한국어로 되어있다. 한글을 쓰는 한국인으로서 이렇게 반가울 수 가 없다. 한국어로 되어있는 JS 라이브러리라니!!
하지만 기쁨은 거기까지다. 우리가 흔히 새롭게 등장한 뭐시기JS를 볼 땐 늘 아름답거나 센스 넘치는 소개 웹사이트와 손쉽게 시작할 수 있는 Getting Started, 그리고 상세한 API 설명 문서가 동반된다. (이 넘들은 돈이 어디서 나서 밥상이 이렇게 화려하지?? 라는 의문 멈출 수 없다) 하지만 bsJS는 그 흔한 Getting Started 문서 하나 찾기 힘들다. 참조할 수 있는 정보는 github 저장소의 README 와 Showcase 의 몇 몇 셈플들을 소스 보기 해서 봐야 한다. 물론 저장소에 Wiki가 있긴 하다. 하지만 열정적인 커미터들의 커밋 물량을 이 문서가 따라가질 못하고 있다. 내용이 모호하거나, 현행화 되지 못한 부분들이 매우 많고 셈플 코드도 아직 많이 부족하다.
상황이 이런데, 왜 bsJS를 사용해볼 마음이 생겼을까? 흔치 않은 bsJS 에 대한 소개 자료의 내용이 흥미를 가지게 만들었기 때문이다.
소개자료에서 말한 것 처럼 jQuery 보다 쉽고, 간편하며, 생산성이 정말로 올라가는지 한번 살펴보기로 하자.
Getting Started
bsJS 는 UI 관련 컴포넌트를 지원하지 않는다. 따라서 bsJS 라이브러리만 로딩하면 바로 사용할 수 있다.
직접 bsJS 저장소를 Clone하여 사용하는 방법
Bower 저장소에서 설치하는 방법
bsJS 는 실제 node 에서도 사용 가능하여 npm 으로 설치하여 사용할 수 도 있지만 이 글에선 웹 프론트앤드만을 범위로 하며 다루지 않겠다. (사실 node에선 써본적이 없다.)
기본 사용법
bsJS 스크립트가 포함되어 로딩되면 bs 전역 객체가 생성된다. jQuery 의 $(function() { … }) 형태와 동일하게 html 문서의 onload 이벤트에 바인딩되어 실행된다. myapp 내에서 bs 객체를 사용할 수 있게 된다.
간단한 DOM 조작
위 셈플 코드는 동적으로 h1 태그를 생성한 후 body 태그에 추가한다. jQuery 와 bsJS 를 사용하여 작성된 간단한 코드이다. bsJS 와 jQuery 모두 문자열을 기반으로 DOM 객체를 생성할 수 있다. 스타일이 약간 다를 뿐 크게 차이나는 부분이 없는 것을 확인 할 수 있다.
다음 코드를 보자.
반환된 DOM 객체를 DOM API 를 이용하여 body 에 추가한 이전 셈플과 달리 이번엔 bsJS 와 jQuery 에서 제공하는 기능을 이용하여 직접 body 에 생성된 h1 을 추가해 보았다. 이제 좀 확연한 스타일 차이가 보인다.
먼저 익숙한 jQuery 방식을 살펴보면 $(‘<h1>jquery</h1>’) 부분이 $(‘body’) 로 변경된 것을 알 수 있다. append로 추가될 문자열 ‘<h1>jquery</h1>’을 취한다. 이 코드로 jQuery 는 전달된 문자열에 따라 DOM 노드를 생성하기도 하고 DOM 셀렉터로 작동되기도 한다는 것을 알 수 있다.
bsJS를 보자. jQuery 와 달리 선 후 관계가 달라지지 않고 S 라는 함수로 확장된 것을 볼 수 있다. S() 파라메터로 bs 연산자(공식 명칙은 아니다. 이 글에선 이해를 돕기위해 임의로 그렇게 부르도록 하겠다)와 연산값이 짝을 이루는 형태로 사용된다. 위 예제 S(‘<’, ‘body’) 의 의미는 bs.Dom 이 만들어낸 노드를 body 태그의 자식 노드로 추가하라는 것으로 평가된다. 결과적으로 jQuery의 append 와 동일한 동작을 수행한다. 조금 복잡한가? 그렇다면 jQuery 방식으로 코드를 전개시킬 수 도 있을까?
약간 다르지만 jQuery 와 동일한 전개 방식으로도 가능하다는 것을 알 수 있다. 즉, bs.Dom() 도 jQuery 와 동일하게 전달된 문자열에 따라 DOM 노드를 생성하기도 하며 DOM 셀렉터로도 동작된다는 것이다.
하지만 코드의 방식은 jQuery 방식이 훨씬 익숙하고 직관적으로 보인다. body 를 찾은 후 추가(append) 한다. 간결하고 직관적이다. bsJS 는 상대적으로 난해해 보인다. body 를 찾은 후 그 뒤는 암호같다. ‘>’ 문자열이 body 의 하위요소로 추가를 의미한다는 것을 알기전까진 암호에 가깝다. 이런 방식을 취한 이유는 무엇일까? 분명 어떤 장점이 있으니 직관성을 포기했을 것이라 추측할 수 있다. 그럼 다음 코드를 보자.
앞서 S() 로 전달하는 파라메터는 bs연산자와 연산값 쌍으로 이루어져있다. 그리고 그 쌍은 원하는 수 만큼 전달 할 수 있다. 위 코드를 보면 .container 노드에 h1 태그를 추가하고 p 태그를 추가한 후 .container 에 인라인 color 스타일이 연속되어 설정된다. 자식 노드 뿐만 아니라 css 스타일도 지정할 수 있다는 것을 알 수 있는데 뿐만 아니라 click 이벤트도 즉시 바인딩 시킬 수 있다. 마지막에 bs.Dom 으로 button 을 추가했다. 당연히 bs.Dom 의 S() 를 이용하여 추가된 button 태그에도 동일한 작업을 반복 수행할 수 있다.
만약 bs.Dom() 으로 선택된 노드를 삭제하려 한다면 어떻게 하면 될까?
그렇다. bs.Dom(‘selector’).remove() 가 아니고 bs.Dom(‘selector’).S(null) 이다. 하나만 더 보자. 만약 선택한 노드가 input[type=text] 이거나 select 같은 값을 가지고 있는 태그인 경우 해당 값을 가져오려면 어떻게 해야할까?
S(‘@value’) 로 폼 요소의 값을 가지고 올 수 있다. @value 라는 특이한 형식이 등장했다. S(‘@value’) 는 해당 요소의 타입을 인식하여 값을 반환하는 처리를 일원화해준다. 사용자는 선택된 요소가 콤보박스거나 텍스트박스거나 모두 동일한 인터페이스로 폼 요소의 값에 접근할 수 있다.
이제 조금 bsJS 에서 말하는 간편함, 생산성 이라는 표현이 어떤 관점에서 사용된 것인지 그 의미를 알 수 있는 것 같다. 개인적으론 “개발자에 따라 호불호가 갈릴 수 있는 형태" 라고 생각된다. bsJS 는 bs 의 기본 구조를 정의한 bs core, 템플릿 등 유틸리티 함수를 제공하는 bs base function, 지금까지 알아본 bs dom 이외에도 애니메이션을 다루는 플러그인 (bs 는 단위 모듈이 대부분 bs core 가 제공하는 플러그인 구조를 따르는 개별 플러그인으로 작성되어있다) 등 초기 버전임에도 불구하고 상당히 광범위한 구성을 제공한다.
웹 개발 실무를 오랜시간 해온 커미터들의 코드 생산성에 대한 관점이 기존의 유명 라이브러리들과 차별화된 개성을 보여주는 원인인 것 같다.
bs의 생산성이 바라보는 방향을 가늠해 볼 수 있다.
DOM 셀렉터 엔진 bsSelector
아무래도 이런류의 라이브러리들(DOM을 다루는)을 선택할 때 고려해야할 것들이 매우 많지만 DOM 을 다루는 부분의 성능은 선택에 있어 중요한 척도가 될 것 같다. bsJS는 DOM 셀렉터 엔진을 자체 개발했다. bsSelector가 그것인데 jQuery 의 셀렉터 엔진으로 유명한 Sizzle 같은 역할을 한다고 볼 수 있다. bsJS 와 마찬가지로 projectBS의 서브 프로젝트인 bsSelector 의 저장소에는 (bsJS 와 마찮자기로 소개 웹페이지는 없다.) 눈에 띄는 문구가 있다.
Beyond the Sizzle.js
아마도 sizzle 을 경쟁 프로젝트로 보고 있는 것 같다. 셀렉터 엔진은 일반적인 웹 개발자가 평가할만한 요소가 많지는 않다. 어쩌면 딱 세가지 밖에 없을것 같다. “속도" 와 “지원 셀렉터" 그리고 “브라우저별 동작 일관성". bsSelector는 sizzle 의 벤치마크 페이지를 수정하여 bsSelector 의 성능 측정 지표를 볼 수 있도록 링크를 제공하고 있다.
http://projectbs.github.io/bsSelector/0.2/speed
소개를 마치며
bsJS의 존재를 알게된건 몇 달 되었지만, 제대로 만져본건 최근의 일이다. 그렇다고 bsJS 의 대부분을 다뤄본 것 도 아니고 간단한 아이디어의 셈플앱을 만들 때 사용했던 경험이 전부여서 잘못 이해하고 표현한 부분이 있을 수 도 있다.
http://codepen.io/ibare/pen/kgaod
개인적 성향은 한국인이 만든 오픈소스라고해서 특별히 더 애착을 느끼고 하는건 없는 편이다. 개발자로서 잘 만들어진, 스스로 존재의 객관적 가치를 가지는 것이 옳다고 믿는다. 개인적으로 bsJS는 첫 인상과 다르게 직접 다루어보니 상당히 괜찮은 느낌을 받았고, 웹앱을 만든다면 특히나 애니메이션이나 인터렉션이 강한 웹앱을 만든다면 상당히 훌륭한 도구가 되지 않을까 싶다. (쇼케이스의 데모들도 대부분 애니메이션과 그래픽 관련 셈플들이다.) 커뮤니티도 아직은 규모가 작지만 꽤 활발한 편이고 열정이 느껴진다. 다만 얼마나 많은 사용자와 개발자들이 참여하는가는 오픈소스가 발전할 수 있는 거의 유일한 척도다. 특히나 브라우저와 표준 스펙의 변화가 심한 웹 프론트앤드 시장은 호환성 이슈가 끊없이 발생한다. 커뮤니티의 도움 없이 발전한다는건 불가능에 가깝다. 더 많은 개발자와 사용자들이 참여하여 시장의 한부분 자리를 차지하는 멋진 녀석이 됐으면 좋겠다는 바램이다.
