bsJS 란?
bsJS 는 bsProject 에서 진행하고 있는 오픈소스 자바스크립트 라이브러리 입니다. bsJS 는 간단한 학습요소, 반복제거, 공통로직 그리고 성능향상을 통해 생산성 우선주의를 목표로 개발되고 있습니다. 이해하기 쉽게 jQuery의 국산버전이라고 생각하면 됩니다. 이미 정말 멋진 커미터분들을 통해 상당한 수준으로 개발되었으며 엄청난 성능을 보여주고 있습니다. bsJS 의 더욱 자세한 내용은 아래 링크를 참고하기 바랍니다.
[button url=’https://github.com/projectBS/bsJS‘ target=’_blank’ size=’large’]GitHub 저장소 바로가기[/button]
[button url=’https://www.facebook.com/groups/bs5js/‘ target=’_blank’ size=’large’]페이스북 그룹 바로가기[/button]
시작하기
앞으로 저는 몇 회에 걸쳐 bsJS의 사용법을 함께 알아볼 계획입니다. 구슬이 서말이라도 꿰어야 보배라고 좋은 라이브러리가 있어도 사용해주는 사람이 없다면 의미가 없겠지요. 현재 많은 개발자분들이 jQuery에 익숙하다보니 bsJS 의 생소한 문법이 조금은 어려울 수도 있습니다. 하지만 저 같은 날라리개발자도 조금만 연습하면 금방 익숙해질 수 있는 수준이니 두려워 말고 도전하기 바랍니다.
새 술은 새 푸대에
bsJS 공부를 시작하기에 앞서 이전의 고정관념은 버리길 강조합니다. 많은 분들이 OOP 나 기존의 관습 때문에 bsJS에 익숙해지기 힘들어 하는 모습을 종종 보곤 합니다. 물론 저 본인이 가장 힘들었습니다;; bsJS 공부를 시작하기 가장 좋은 곳은 깃허브에 있는 위키문서 입니다. 소스를 보기 전에 bsJS Dom 기본설명을 먼저 정독하기를 추천합니다. 아! 물론 한번 읽어서 이해가 안된다고 걱정할 것 없습니다. 이 글은 그런 분들을 위한 것이니까요~ ^^
[button url=’https://github.com/projectBS/bsJS/wiki/doc3-Dom‘ target=’_blank’ size=’large’]bsJS Dom 기본설명[/button]
[button url=’http://www.slideshare.net/phillipahn58/bs-camp‘ target=’_blank’ size=’large’]BS Camp 발표자료[/button]
데모
먼저 이번 회에 공부할 데모를 바로 확인 하도록 하겠습니다. bsJS 를 이용한 이징 표시기 입니다. START 버튼을 클릭해 현재 선택된 이징함수의 모션을 확인하는 간단한 예제입니다. 이 예제를 통해 bsJS를 이용한 Css, Dom, Event 처리를 어떻게 하는지 알아보도록 하겠습니다.
소스
[js]
Ease Visualizer
linear backIn backOut backInOut sineIn sineOut sineInOut circleIn circleOut circleInOut quadraticIn quadraticOut
/*
* Event handler
*/
onClick = function(){
console.log( 'time : ' + bs.Dom( '#duration' ).S( '@value' ) +
", ease : " + bs.Dom( '#ease' ).S( '@value' ) );
bs.ANI.stop();
bs.Dom( '#slider' ).S( 'left', 0 );
bs.ANI.style( bs.Dom( '#slider' ),
'left', BAR,
'time', bs.Dom( '#duration' ).S( '@value' ),
'ease', bs.Dom( '#ease' ).S( '@value' )
);
};
/*
* Style
*/
bs.Css( 'h1' ).S( 'style', 'font-size:24pt;font-weight:100;color:#616161;' );
bs.Css( '.bsUI_button' ).S( 'width', 110, 'height', 40, 'float', 'left',
'background-color', '#5677fc', 'color', '#FFF', 'line-height', 40,
'text-align', 'center', 'border-radius', 3,
'font-size', '10pt', 'font-weight', 'bold' );
bs.Css( '.bsUI_bar' ).S( 'width', BAR, 'height', 2, 'background-color', '#e0e0e0',
'float', 'left', 'margin-top', 18, 'margin-left', 20, 'position', 'relative' );
bs.Css( '.bsUI_slider' ).S( 'width', 20, 'height', 20, 'background-color', '#ff4081',
'border-radius', 30, 'margin-top', -10, 'position', 'absolute' );
/*
* DOM
*/
bs.Dom( '#example' ).S( '>', bs.Dom( '<div class="bsUI_button">START</div>' ).S( 'click', onClick, 'this' ) );
bs.Dom( '#example' ).S( '>', bs.Dom( '<div class="bsUI_bar"></div>' ) );
bs.Dom( '.bsUI_bar' ).S( '>', bs.Dom( '<div class="bsUI_slider" id="slider"></div>' ).S( 'left', 0, 'this' ) );
bs.Dom( '<div></div>' ).S( '<', '#example', 'clear', 'both' );
} );
</script>
</body>[/js]
정통있는 개발자는 싫어하겠지만 저같은 날라리는 카피앤페스트를 바로 할 수 있어야 하므로 전체소스를 먼저 올립니다. 복사도 귀찮은 분은 아래 jsFiddle 링크를 통해 바로 수정 및 테스트 해볼 수 있습니다.
[button url=’http://jsfiddle.net/u22722v8/1/‘ target=’_blank’ size=’large’]jsFiddle 바로가기[/button]
key-value 시스템
사실 bsJS의 사용상 가장 큰 특이점은 바로 이 key-value 시스템입니다. key-value 시스템은 bsJS의 독특한 사용법일뿐만 아니라 기본 정신이므로 이 key-value 시스템은 반드시 익숙해져야 할 부분입니다. bsJS의 기본 문법은 아래와 같습니다.
[js] bs.Dom( selector ).S( key, value, key, value, key, value … ); [/js]
bs.Dom( selector ) 를 통해 bs객체를 생성 후 특수 함수인 대문자 S 함수를 이용하여 원하는 모든 값을 키, 값 형태로 입력하거나 받을 수 있습니다. 값을 넣고 받는 방법은 아래와 같습니다.
[js] / get / bs.Dom( selector ).S( key ); // key 의 value 반환
/ set / bs.Dom( selector ).S( key, value ); // key 에 value 저장 [/js]
위 예제의 차이를 금방 알아차렸다면 이미 당신은 bsJS고수! 유후~! get / set 의 사용법은 key 에 대응하는 value 가 있으면 set 아니면 get 으로 작동합니다. 그리고 set 의 경우 마지막으로 할당된 값을 기본적으로 리턴합니다.
key 에는 대부분의 Css 키워드와 이벤트 키등을 사용 할 수 있으며 몇몇 bsJS 전용 특수키들이 존재합니다. 특수키들에 대해서는 다음에 더욱 자세히 알아보도록 하겠습니다.
시작점
그럼 본격적으로 소스를 보도록 하겠습니다.
[js] <script src="http://projectbs.github.io/bsJS/bsjs.0.5.js"></script> bs( function(){ … } ); [/js]
먼저 bsJS의 본체를 로드합니다. 현재 최신 bsJS 의 버전은 0.5 입니다. 그리고 bs함수에 우리가 사용할 코드를 익명함수에 담아 전달해주면 끝입니다. 물론 반드시 위 예제처럼 bs 함수에 익명함수로 전달 할 필요는 없으나 위와 같이 사용할 경우 bsJS가 알아서 모든 리소스의 로드를 감지한 후 우리의 코드를 실행하므로 리소스가 없어서 에러가 나는 상황등을 피할 수 있습니다.
bsJS 는 가능한 모든 콘트롤을 bsJS에의 맞기는 것을 추천하는데 그 만큼 호스트측의 오류를 줄일 수 있기 때문입니다.
CSS
[js] /*
- Style */ bs.Css( ‘h1’ ).S( ‘style’, ‘font-size:24pt;font-weight:100;color:#616161;’ ); bs.Css( ‘.bsUI_button’ ).S( ‘width’, 110, ‘height’, 40, ‘float’, ‘left’, ‘background-color’, ‘#5677fc’, ‘color’, ‘#FFF’, ‘line-height’, 40, ‘text-align’, ‘center’, ‘border-radius’, 3, ‘font-size’, ’10pt’, ‘font-weight’, ‘bold’ ); bs.Css( ‘.bsUI_bar’ ).S( ‘width’, BAR, ‘height’, 2, ‘background-color’, ‘#e0e0e0’, ‘float’, ‘left’, ‘margin-top’, 18, ‘margin-left’, 20, ‘position’, ‘relative’ ); bs.Css( ‘.bsUI_slider’ ).S( ‘width’, 20, ‘height’, 20, ‘background-color’, ‘#ff4081’, ‘border-radius’, 30, ‘margin-top’, -10, ‘position’, ‘absolute’ ); [/js]
bsJS 에는 Css, Dom, ANI 와 같은 함수를 제공 합니다. 이외에도 많은 함수고 존재하는데 이번 회에서는 앞의 3가지 함수만 살펴봅니다. 이외 함수들은 다음회에 더욱 자세히 알아보도록 하겠습니다.
Css 함수는 말그대로 스타일시트를 생성해주는 함수 입니다. 일반적으로 style 태그를 이용하여 생성하는 스타일과 동일 합니다. 그런데 왜 굳이 style 태그를 사용하지 않고 bs 의 Css 함수를 이용하여 스타일을 생성해야 할까요? 그건 bsJS 가 대부분의 크로스브라우징을 처리해 주기 때문입니다. bsJS의 Css 함수를 통해 스타일을 만들경우 더 이상 ie6 도 두려운 대상이 아닙니다.
다만 사용에 주의해야 할 점은 위에서 잠깐 언급했듯이 bs함수의 호출이 모든 리소스 로드 후 진행 되므로 bs 안에 있는 Css 들은 bs 스크립트가 돌기 전까지는 반영되지 않습니다. 즉, 기본 레이아웃이나 GNB등과 같이 페이지가 보이기 시작 하는 순간부터 적용되야 하는 경우는 기존의 방법을 사용해야 한다는 점 주의하기 바랍니다.