• 개요
• 다운로드
• 도움말

TagWire란?

웹서비스 등을 개발할 때, 완성된 결과물은 대부분이 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를 개발하는 과정에서 실무에 도입해 직접 사용해보고 개선하는데 도움을 주신 서상식님께 감사드립니다.
그리고 장인혁, 조기승, 윤현승, 유주아, 김대경님께도 감사드립니다.

저장소

• Git : https://github.com/coxcore/cox-tagwire
• Download : https://github.com/coxcore/cox-tagwire/releases

어떻게 사용하나요?

다운로드 페이지에서 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>