Data에 꼬리표를 붙이다.
웹서비스 등을 개발할 때, 완성된 결과물은 대부분이 HTML
태그에 Javascript
처리를 위한 코드, Server-side
코드가 혼합되어있는 형태입니다.
이는 최초 HTML
-> Javascript
-> Server-side
형태로 업무가 진행될 때는 큰 문제가 없지만, 한번 개발된 페이지의 디자인 변경 같은 수정이 발생하는 경우, HTML
부터 시작되는 변경사항들이 Javascript
, Server-side
영역까지 영향을 주게 됩니다.
이런 상황이 되면, 서버 개발자는 HTML
구조가 어떻게 변했는지, class는 어디에 어떤게 추가되고 삭제되었는지 매번 확인해서 적용해야 되고, UI 개발자 입장에서는 마크업 구조나 class를 좀 더 효율적으로 관리할 수 있도록 개선하고 싶어도, 이미 개발된 페이지를 건드리는 것이 부담스러워 포기하기도 합니다.
"서로에게 영향을 최소화 할 수 있다면, 좀 더 나아지지 않을까?"
이렇게 시작된 고민은, 서버 개발자가 HTML
수정에 영향을 덜받고, UI 개발자는 개발이 된 페이지를 좀 더 자유롭게 코딩을 하고, 수정할 수 있도록, view
영역에는 순수한 HTML
태그만 존재해야 한다는 결론에 도달했습니다.
그래서 데이터를 HTML
에 쉽게 적용할 수 있는 도구가 필요했고, 그렇게 만들어진 것이 TagWire입니다.
TagWire는 Javascript
를 잘 모르더라도 HTML
에 데이터를 binding 하기 쉽게 도와줍니다.
TagWire를 개발하는 과정에서 실무에 도입해 직접 사용해보고 개선하는데 도움을 주신 서상식님께 감사드립니다.
그리고 장인혁, 조기승, 윤현승, 유주아, 김대경님께도 감사드립니다.
다운로드 페이지에서 cox.tagwire.js
를 다운로드 하거나, 아래 경로를 페이지에 삽입하세요.
<script type="text/javascript" src="https://cdn.rawgit.com/coxcore/cox-tagwire/1.0.5/js/cox.tagwire.min.js
"></script>
Element의 class
속성에 아래와 같은 형식의 TagWire
class를 추가해서 사용합니다.
class="_{Data}
-{Function}
"
각 부분의 용도입니다.
_
: TagWire와 일반 class를 구분하기 위한 구분자입니다.{Data}
: 사용할 값의 변수명입니다.-
: 변수명과 함수명을 구분하기 위한 구분자입니다.{Function}
: 데이터를 사용할 속성 혹은 사용자 정의 함수입니다. Tail Function 이라고 부릅니다.
예를 들어 아래와 같이 정의된 dataset
이 있다고 한다면,
{aaa
: '제목',bbb
: '이미지 경로',ccc
: '링크' }
aaa
의 값을 h1
에 텍스트로 입력할 때, 해당 변수명에 -text
를 붙입니다.
<h1 class="_aaa-text
"></h1>
bbb
의 값을 img
태그의 src
속성에 대입할 때, 해당 변수명에 -src
를 붙입니다.
<img src="" class="_bbb-src
" />
ccc
의 값을 a
태그의 href
속성에 대입할 때, 해당 변수명에 -href
를 붙입니다.
<a href="#" class="_ccc-href
">href 설정</a>
위와 같은 형태로 class
속성에 필요한 TagWire
를 추가합니다.
<div> <h1 class="_title-text
"></h1> <p> <a href="#" class="_link-href
"><img src="noimg.jpg" class="_thumb-src
_title-alt
"></a> <p> </div>
TagWire
를 추가하고 나서 dataset
을 render
합니다.
// 처리할 dataset var data = { title : '제목', thumb : '이미지 경로', link : '링크' }; // 기본 처리TagWire.render
( document.body, data ); // 혹은 jQuery 사용jQuery
( 'body' ).render
( data );
그러면 다음과 같이 반영됩니다.
<div> <h1 class="_title-text">제목
</h1> <p> <a href="링크
" class="_link-href"><img src="이미지 경로
" class="_thumb-src _title-alt" alt="제목
></a> <p> </div>