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 처리를 어떻게 하는지 알아보도록 하겠습니다.
소스
<!DOCTYPE html>
<html>
<head>
<title>Ease Visualizer</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="//fonts.googleapis.com/css?family=Roboto:100italic,100,300italic,300,400italic,400,500italic,500,700italic,700,900italic,900" rel="stylesheet" type="text/css">
<style>
body {
font-family:Roboto;
color:#333;
}
.align-left {
float:left;
}
.cols {
font-size:9pt;
margin-right:20px;
}
#example {
margin-bottom:15px;
}
</style>
</head>
<body>
<h1>Ease Visualizer</h1>
<div id="example"></div>
<div id="option" style="clear:both">
<div class="align-left cols">
duration
<br/>
<input type="text" size="1" value="2" id="duration" />
</div>
<div class="align-left cols">
ease
<br/>
<select size="1" id="ease">
<option value="linear">linear</option>
<option value="backIn">backIn</option>
<option value="backOut">backOut</option>
<option value="backInOut">backInOut</option>
<option value="sineIn">sineIn</option>
<option value="sineOut">sineOut</option>
<option value="sineInOut">sineInOut</option>
<option value="circleIn">circleIn</option>
<option value="circleOut">circleOut</option>
<option value="circleInOut">circleInOut</option>
<option value="quadraticIn">quadraticIn</option>
<option value="quadraticOut">quadraticOut</option>
</select>
</div>
</div>
<script src="../../../../bsJS/bsjs.0.5.js"></script>
<script>
bs( function(){
var onClick, BAR;
BAR = 340;
/*
* 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>
</html>
정통있는 개발자는 싫어하겠지만 저같은 날라리는 카피앤페스트를 바로 할 수 있어야 하므로 전체소스를 먼저 올립니다. 복사도 귀찮은 분은 아래 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의 기본 문법은 아래와 같습니다.
bs.Dom( selector ).S( key, value, key, value, key, value ... );
bs.Dom( selector ) 를 통해 bs객체를 생성 후 특수 함수인 대문자 S 함수를 이용하여 원하는 모든 값을 키, 값 형태로 입력하거나 받을 수 있습니다. 값을 넣고 받는 방법은 아래와 같습니다.
/* get */ bs.Dom( selector ).S( key ); // key 의 value 반환 /* set */ bs.Dom( selector ).S( key, value ); // key 에 value 저장
위 예제의 차이를 금방 알아차렸다면 이미 당신은 bsJS고수! 유후~! get / set 의 사용법은 key 에 대응하는 value 가 있으면 set 아니면 get 으로 작동합니다. 그리고 set 의 경우 마지막으로 할당된 값을 기본적으로 리턴합니다.
key 에는 대부분의 Css 키워드와 이벤트 키등을 사용 할 수 있으며 몇몇 bsJS 전용 특수키들이 존재합니다. 특수키들에 대해서는 다음에 더욱 자세히 알아보도록 하겠습니다.
시작점
그럼 본격적으로 소스를 보도록 하겠습니다.
<script src="http://projectbs.github.io/bsJS/bsjs.0.5.js"></script>
<script>
bs( function(){
...
} );
</script>
먼저 bsJS의 본체를 로드합니다. 현재 최신 bsJS 의 버전은 0.5 입니다. 그리고 bs함수에 우리가 사용할 코드를 익명함수에 담아 전달해주면 끝입니다. 물론 반드시 위 예제처럼 bs 함수에 익명함수로 전달 할 필요는 없으나 위와 같이 사용할 경우 bsJS가 알아서 모든 리소스의 로드를 감지한 후 우리의 코드를 실행하므로 리소스가 없어서 에러가 나는 상황등을 피할 수 있습니다.
bsJS 는 가능한 모든 콘트롤을 bsJS에의 맞기는 것을 추천하는데 그 만큼 호스트측의 오류를 줄일 수 있기 때문입니다.
CSS
/* * 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' );
bsJS 에는 Css, Dom, ANI 와 같은 함수를 제공 합니다. 이외에도 많은 함수고 존재하는데 이번 회에서는 앞의 3가지 함수만 살펴봅니다. 이외 함수들은 다음회에 더욱 자세히 알아보도록 하겠습니다.
Css 함수는 말그대로 스타일시트를 생성해주는 함수 입니다. 일반적으로 style 태그를 이용하여 생성하는 스타일과 동일 합니다. 그런데 왜 굳이 style 태그를 사용하지 않고 bs 의 Css 함수를 이용하여 스타일을 생성해야 할까요? 그건 bsJS 가 대부분의 크로스브라우징을 처리해 주기 때문입니다. bsJS의 Css 함수를 통해 스타일을 만들경우 더 이상 ie6 도 두려운 대상이 아닙니다.
다만 사용에 주의해야 할 점은 위에서 잠깐 언급했듯이 bs함수의 호출이 모든 리소스 로드 후 진행 되므로 bs 안에 있는 Css 들은 bs 스크립트가 돌기 전까지는 반영되지 않습니다. 즉, 기본 레이아웃이나 GNB등과 같이 페이지가 보이기 시작 하는 순간부터 적용되야 하는 경우는 기존의 방법을 사용해야 한다는 점 주의하기 바랍니다.
Css 함수를 사용하는 방법
1. key-value 시스템
// // bs.Css( selector ).S( key, value, key, value ... ); // bs.Css( '.bsUI_slider' ).S( 'width', 20, 'height', 20, 'background-color', '#ff4081', 'border-radius', 30, 'margin-top', -10, 'position', 'absolute' );
가장 기본적인 key-value를 이용한 방법으로 추천하는 방법입니다.
2. style 키워드
// // bs.Css( selector ).S( 'style', 'key:value; ...' ); // bs.Css( 'h1' ).S( 'style', 'font-size:24pt;font-weight:100;color:#616161;' );
style 키워드를 사용하여 기존의 스타일태그 형태의 키:값으로 설정 할 수 있습니다. 개인적으로 사용해본 결과 붙여넣기 하기는 좋은 방법이나 코드리펙토링시 라인 모양이 이쁘게 되지 않는다는 단점이…
3. css 파일로드
// // bs.Css( file ) // bs.Css( 'style.css' );
기존의 파일로 되어있는 외부 스타일시트도 간단하게 로드해서 사용 할 수 있습니다. 이외 인자값을 배열로 넘긴다든가 하는 더욱 고급사용법이 있지만 초급인 우리와는 맞지 않으므로 패스하도록 하겠습니다.
Dom
/* * 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' );
드디어 대망의 Dom 함수입니다. Dom 함수는 bsJS의 가장 중요한 함수 중 하나입니다. 웹페이지상에서 대부분의 작업이 DOM에 대한 처리로 이루어져 있기 때문입니다. 우리는 Dom 함수를 통해 DOM 을 생성하거나 수정 또는 삭제할 수 있습니다. Dom 함수를 이용하는 자세한 방법은 bsJS Dom 기본설명에서 확인할 수 있습니다. 우리는 소스상에 사용되어진 부분까지만 알아보도록 하겠습니다.
DOM 조회
// // bs.Dom( selector ) // bs.Dom( '#example' );
exmaple 아이디를 갖는 DOM을 조회 합니다.
DOM 생성
// // bs.Dom( html|selector|object ) // bs.Dom( '<div class="bsUI_bar"></div>' ).S( 'this' )
위 예제는 bsUI_bar 클래스를 갖는 DOM 을 생성하고 자기자신을 반환합니다.
이해를 돕기 위해 예제는 생성과 조회를 나누었지만 소스에서 보듯이 사실 bsJS에서 DOM의 생성과 조회는 동일한 방법으로 이루어집니다. 그리고 bsJS 내부의 캐쉬정책에 따라 이미 생성된 DOM 이라면 해당 DOM 을 반환하고 아니면 새로 생성합니다.
특수한 키워드
bsJS를 처음 접할때 낯설게 만드는 다른 한가지 이유는 바로 몇몇 미리정의된 특수한 키워드들 때문입니다. 이 키워드들은 조금은 불친절한 형태이기는 하나 코드의 간결성과 통일성등의 이유로 정해진 키워드 들이므로 반드시 외워서 사용해야 합니다. 이러한 키워드 중 가장 많이 쓰이고 꼭 알아야 할 3가지 키워드를 소개 합니다.
1. 부모선택자
부모선택자는 해당 bs객체의 부모나 자식을 매우 쉽게 선택 할 수 있게 도와주는 키워드 입니다. 사용방법은 부모 > 자식 또는 자식 < 부모와 같이 자식을 향하는 꺽쇠를 이용합니다.
bs.Dom( '<div></div>' ).S( '<', '#example', 'clear', 'both' );
위의 코드는 #example DOM 을 부모로 하는 div 를 생성한다는 의미 입니다.
2. this
this 키워드는 단어 의미 처럼 자기자신을 반환 합니다. S 함수는 key-value 에서 설명했듯이 항상 마지막에 마지막에 오는 key의 값을 반환합니다. S함수를 사용하는 경우 자기 자신을 반환하기 위해서 사용합니다.
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' ) );
위의 예제는 #example 에 bsUI_bar 를 bsUI_bar 에 bsUI_slider 를 추가하는 예제입니다. 자세히 보면 bsUI_slider 는 S 함수를 사용해 left 를 지정하고 있으므로 bsUI_bar 와는 다르게 this 키워들 통해 자기자신을 넘겨줘야 합니다.
3. null
마지막으로 null 키워드는 지금까지 생성한 DOM 을 삭제하기 위해 사용합니다.
bs.Dom("#test").S( null ); //삭제
간단히 S함수에 null 을 입력해 해당 객체를 삭제할 수 있습니다. 조금 사용에 주의할 점은 this 키워드의 경우 따옴표를 이용해 문자열로 전달하지만 null 의 경우 바로 사용합니다.
Event
마지막으로 간단히 이벤트 처리를 살펴보도록 하겠습니다. bsJS에서 이벤트는 key-value 시스템으로 event 키워드와 함께 이벤트 발생시 실행될 콜백함수로 이루어집니다.
/*
* Event handler
*/
onClick = function(){
...
};
bs.Dom( '<div class="bsUI_button">START</div>' ).S( 'click', onClick );
click 키워드에 onClick 콜백함수를 등록하는 예입니다. 이벤트 키워드의 경우 html 스펙에서 지원하는 ‘onClick’ 등을 사용할 수도 있으나 bsJS는 PC환경이나 모바일환경에 자동으로 대응하기 위해 ‘down’, ‘up’, ‘move’ 등을 사용하길 권장합니다. 해당 키워드를 사용할 경우 모바일등 다양한 환경을 bsJS에서 처리해 주므로 편리합니다.
마침
수 많은 대규모 외제 오픈소스들 속에서 흔하지 않은 국내 오픈소스 프로젝트로 작지만 매운 bsJS의 기본적인 사용법에 대해서 알아보았습니다. 제 개인적으로 bsJS를 사용하면서 가장 어려운점은 역시 사용자 부재와 그로인한 리소스 부족입니다. (구글에 검색해도 나오는게 없엉~ ㅜㅜ) 물론 페이스북 그룹에 질문을 하면 거의 실시간으로 답변이 오지만 아무래도 페이스북 그룹의 구조상 지식을 남기고 공유하기는 어려운 부분이 많은 것 같아 이렇게 정리 공유 합니다. 제 글을 보고 한분이라도 bsJS에 관심이 생기셨으면 하는 바램입니다. 그럼 과제를 마지막으로 글을 마칩니다.
과제1. 각 버튼의 색을 변경해 보세요. (예시)
과제2. START 버튼을 클릭하면 동그라미를 삭제해 보세요. (예시)
과제3. y축을 이동값 x축을 시간으로 하는 2차원 그래프로 변경해 보세요.