티스토리 뷰

javascript

jQuery: data() 이해와 활용

修人事待天命♡ 2016. 7. 13. 11:24

출처: http://www.nextree.co.kr/p10155/

jQuery: data() 이해와 활용

Posted by 김 대호 in 배움터 - 열공, 일터 - 경험과 노하우 on May 27th, 2014

data() : html 엘리먼트 내에 데이터를 저장하고 읽는 역할을 하는 함수

data()의 사용

서버에서 조회된 데이터를 추후 ajax통신을 하기 위한 data 저장
data()를 활용하여 Form의 <input>엘리먼트의 validation 적용

data()를 활용하면 매우 가볍고 쉽게 적용가능한 클라이언트 측 validation을 구현할 수 있습니다.

1. data()

설명 : 해당 엘리먼트에 Javascript Type의 value를 <Key, Value>로 저장할 수 있으며, <Key>값으로 저장되어 있는 데이터를 읽습니다.

[ case 1. 데이타 저장 ]

문법 : $(selector).data(key, value)
key : string type의 변수로 data가 저장될 key값입니다.
value : object type으로 JavaScript 에서 지원하는 모든 type의 데이터를 저장할수 있습니다.

<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<html>
    <head>
	<meta http-equiv="Context-Type" context="text/html;charset=UTF-8" />
		   
	<script type="text/javascript">
		//span 엘리먼트에 data()함수로 "name"과 "address"세팅방법
		$("span").data("name", "Nextree");
		$("span").data("address", "가산");
	</script>
    </head>
    
    <body>
	<!-- data()가 호출되면 span엘리먼트에 "name"과 "address"가 추가됩니다.-->
	<span>jQuery의 data()의 저장 방법</span>
    </body>
</html>

<html>

<head>

//span 엘리먼트에 data()함수로 "name"과 "address"세팅방법

$("span").data("name", "Nextree");

$("span").data("address", "가산");

</script>

</head>

<body>

<span>jQuery의 data()의 저장 방법</span>

</body>

</html>

- 위와 같이 <Key, Value> 형태로 data를 엘리먼트에 저장할 수 있습니다.

* 추가적으로 HTML5에서는 HTML 엘리먼트에 data-*형식을 이용하여 미리 데이터를 저장할 수 있습니다. 이 방법은 jQuery의 data()를 이용해 저장한 것과 동일한 효과를 나타낼 수 있습니다.

사실 HTML5의 data-*가 나오기 전에는 개발자들마다 가지각색으로 HTML 엘리먼트에 허용되지 않는 속성(임의의 Attr속성)을 추가하여 사용했기 때문에 유지보수 측면이나 해석할때 매우 난해하고 지저분한 HTML이 많았습니다. 하지만 HTML5로 넘어오면서 data-* 속성이 표준화가 되면서 이전의 문제점들이 해결되었습니다.

<body>
	<div>
		<span
			data-name='nextree'
			data-address='가산'
			data-member='{"name" : "김대호"}'
		>.data()가 저장되는 방식</span>
	</div>
</body>

<body>

<div>

<span

data-name='nextree'

data-address='가산'

data-member='{"name" : "김대호"}'

>.data()가 저장되는 방식</span>

</div>

</body>

[ case 2. 데이터 읽기 ]

문법 : $(selector).data(key)
key : 앞서 저장한 data를 읽어오기 위한 key값입니다.
key를 생략하고 .data()으로 호출할 경우에는 해당 엘리먼트에 저장된 모든 data들이 JSON형식으로 리턴됩니다.

<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<html>
    <head>
	<meta http-equiv="Context-Type" context="text/html;charset=UTF-8" />
		   
	<script type="text/javascript">
	$(function(){
		//span 엘리먼트에 data()함수로 "name"과 "address"세팅방법
		$("span").data("name", "Nextree");
		$("span").data("address", "가산");

		//data(Key)로 저장된 data읽기
		var name = $("span").data("name");
		var address = $("span").data("address");

		$("p").eq(0).text(name);
		$("p").eq(1).text(address);
	});
	</script>
    </head>
    
    <body>
	<!-- data()가 호출되면 span엘리먼트에 "name"과 "address"가 추가됩니다.-->
	<span>jQuery의 data()의 읽기 방법</span>
	<p></p>
	<p></p>
    </body>
</html>

<html>

<head>

$(function(){

//span 엘리먼트에 data()함수로 "name"과 "address"세팅방법

$("span").data("name", "Nextree");

$("span").data("address", "가산");

//data(Key)로 저장된 data읽기

var name = $("span").data("name");

var address = $("span").data("address");

$("p").eq(0).text(name);

$("p").eq(1).text(address);

});

</script>

</head>

<body>

<span>jQuery의 data()의 읽기 방법</span>

<p></p>

</body>

</html>

- 위의 방법으로 저장된 data를 읽어 올 수 있습니다.

* HTML5의 data-*로 저장한 경우 읽어올 경우에는”data-”를 생략한 key를 이용하여 data를 읽어올 수 있습니다.

예 ) $(“span”).data(“name”);

또한 아래처럼 snake-case문법으로 저장된 데이터는 camelCase문법으로 읽어올 수 있습니다.

<span
	data-member-name='김대호'
>camelCase</span>

<span

data-member-name='김대호'

>camelCase</span>

예 ) $(“#span”).data(“memberName”) ;

* 마찬가지로 camelCase형태의 key값으로 데이타를 저장하였다면 HTML에는 snake-case형태로 데이터가 저장됩니다.

다음은 HTML5의 data-*를 이용해 string, int, boolean, json 타입(Javascript Type)의 data들을저장하고 “===”를 이용한 비교연산을 해보았습니다.

[ html ]

<div 
	data-name="홍길동" 
	data-number="99" 
	data-hidden="true" 
	data-options='{"name":"홍길동"}'>
</div>

<div

data-name="홍길동"

data-number="99"

data-hidden="true"

data-options='{"name":"홍길동"}'>

</div>

[ chrome console ]

[그림1. ] 자동으로 형변환된 데이터 결과

- 보다시피 HTML5에서는 아래의 결과처럼 “String” Type으로 저장되는 Value의 타입을 판별하여 Javascript에서 지원하는 Data Type으로 알맞게 형변환을 시켜줍니다.

[ case 3. 데이터 삭제 ]

문법 : $(selector).removeData(key)
key : string type으로 삭제할 data의 key값.

아래 HTML의 첫번째 <p>엘리먼트에 동적으로 “name” data를 저장하고 removeData()를 이용하여 저장된 데이터를 삭제해 보겠습니다.

[ html ]

<body>
	<p>data Name</p>
	<p>data Number</p>
</body>

<body>

<p>data Number</p>

</body>

[ chrome console ]

- 보다시피 첫번째 <p>에 name이 nextree로 저장되었다가 removeData()를 이용하여 “name”으로 저장된 데이터를 삭제한 것을 확인할 수 있습니다.

이번엔 HTML5의 data-*로 미리 저장되어 있는 “name” data를 removeData()를 이용하여 삭제해보겠습니다.

[ html ]

<span
	data-name='nextree'
	data-address='가산'
	data-mamber='{"name":"김대호"}'
></span>

<span

data-name='nextree'

data-address='가산'

data-mamber='{"name":"김대호"}'

></span>

[ chrome console ]

- 위의 결과처럼 미리 HTML에 data-*로 저장된 data들은 removeData()를 이용하여도 지워지지 않는 문제가 있습니다. 이런 경우는 .data(“name”, null)로 저장되어있는 값을 null로 바꿔주는것으로 해결이 가능합니다.

2. data() 활용방안

현재 제가 진행중인 프로젝트에서 data()를 활용한 부분을 살펴보며 이번 글을 마치겠습니다.

[ 활용방안 1. ]

서버에서 조회된 데이터로 테이블을 구성할때 다음과 같이 사용합니다. ( el표현식을 이용하여 서버에서 조회된 data를 받고 있습니다. )

[ jsp file ]

 <c:forEach var="item" items="${itemList}" varStatus="status">
    <tr  
         data-idx='${status.count}'
         data-distb-idntfc-no='${item.distbIdntfcNo}'
         data-sn='${item.sn}'
         data-regn-detail-code='${item.regnDetailCode}'
         data-regn-code='${item.regnCode}'
         data-regn-nm='${item.regnNm}'
         onclick='fn_popupItem(this)'
    >
     <td>${status.count}</td>
     <td>${item.distbIdntfcNo}</td>
     <td>${item.prdlstNm}</td>
     <td>${item.regnNm}</td>
    </tr>
</c:forEach>

<c:forEach var="item" items="${itemList}" varStatus="status">

<tr

data-idx='${status.count}'

data-distb-idntfc-no='${item.distbIdntfcNo}'

data-sn='${item.sn}'

data-regn-detail-code='${item.regnDetailCode}'

data-regn-code='${item.regnCode}'

data-regn-nm='${item.regnNm}'

onclick='fn_popupItem(this)'

<td>${status.count}</td>

<td>${item.distbIdntfcNo}</td>

<td>${item.prdlstNm}</td>

<td>${item.regnNm}</td>

</tr>

</c:forEach>

[ javaScript file ]

var fn_popupItem = function(obj) {
	
	var param = $(obj).data();
	
	// POST 요청
	$("#itemLayer").load(CTX + "/bm/sel/insertPuchasFragment.do", param);
};

var fn_popupItem = function(obj) {

var param = $(obj).data();

// POST 요청

$("#itemLayer").load(CTX + "/bm/sel/insertPuchasFragment.do", param);

};

- 조회된 데이터를 화면에 보여주기 위한 목적 이외에 추가적으로 data를 조작할 경우가 있을때 <tr>에 data를 저장시켜 놓습니다.

이후 저장된 데이터로 ajax통신을 할 경우에는 <tr>에 저장된 데이터를 .data() 메소드를 이용하여 JSON타입의 data로 가져온 후 ajax통신을 합니다.

특히나 ajax통신을 할때 data()메소드를 이용하면 JSON type의 데이터로 리턴이 되기 때문에 따로 JSON타입으로 치환하지 않아도 쉽게 ajax통신을 할 수 있다는 장점도 있습니다.

[ 활용방안 2. ]

화면에서 서버측으로 Form submit할 경우 추가적인 jQuery plug-in이나 외부 라이브러리가 필요없이 간단한 정규식과 data()를 활용함으로써 가볍고 쉽게 사용할 수 있는 클라이언트 측 validation을 추가하였습니다.

다음의 소스코드를 따라하면 쉽게 적용할 수 있습니다.

< step >

<input>엘리먼트에 data-valid에 [정규식, 검증실패 메시지] 형식으로 데이터를 저장합니다.
form submit 이벤트 핸들러에서 validFormNow()메소드를 호출하고 true일 경우에만 form submit을 합니다. 만약 input태그의 정규식 검증이 실패하면 data-valid에 세팅한 검증실패 메시지를 확인할 수 있습니다.

[ index.html ]

<script src="http://code.jquery.com/jquery-2.0.0.js"></script>

<html>
    <head>
    <script type="text/javascript" src="underscore.js"></script>
    <script type="text/javascript" src="common.js"></script>
    <meta http-equiv="Context-Type" context="text/html;charset=UTF-8" />
       
    <script type="text/javascript">

		$(function(){
			//form submit할 버튼이벤트에 validFormNow()호출
			$("#search").click(function(){
				//검증이 true일 경우에만 form submit
				if($("#searchForm").validFormNow()){
					//$("#searchForm").submit();
				};
			});
		});

    </script>
    </head>
    
    <body>
        <form name="searchForm" id="searchForm">
            숫자 : <input type="text" data-valid="[[/^[\d]{4,4}$/,'네자리 숫자를 입력해주세요']]"/><br>
	    문자 : <input type="text" data-valid="[[/^.{3,8}$/,'3글자에서 8글자사이로 입력해주세요']]"/><br>
            <button id="search">조회</button>
        </form>
    </body>
</html>

<html>

<head>

$(function(){

//form submit할 버튼이벤트에 validFormNow()호출

$("#search").click(function(){

//검증이 true일 경우에만 form submit

if($("#searchForm").validFormNow()){

//$("#searchForm").submit();

};

});

</script>

</head>

<body>

숫자 : <input type="text" data-valid="[[/^[\d]{4,4}$/,'네자리 숫자를 입력해주세요']]"/><br>

문자 : <input type="text" data-valid="[[/^.{3,8}$/,'3글자에서 8글자사이로 입력해주세요']]"/><br>

</form>

</body>

</html>

- data-valid의 첫번째 요소가 정규식 형태의 데이타인지 확인하기 위한 “_.isRegExp()”메소드를 호출하기 위해 underscore.js를 include하였습니다.

- data 검증을 위한 javaScript 파일(common.js)을 공통파일로 분리하고 include합니다.

[ common.js ]

$.fn.extend({
	valid : function(tests) {
			tests.forEach(function(test){
				var $input = $(this);
				var value = $input.val();
				if (Array.isArray(test)) {
					var testTerm = test[0];			//정규식
					var exceptionMessage = test[1];		//정규식이 틀릴 경우 보여줄 검증 실패 메시지

					//배열의 첫번째요소가 정규식이 아니거나 정규식 테스트를 실패한 경우에
					//exception에 검증실패메시지를 세팅한 후 throw한다.
					if( _.isRegExp(testTerm) && !(testTerm.test(value)) ){
						throw {exceptionMessage : exceptionMessage};
					}
				} else {
					throw {exceptionMessage : "스크립트 오류", input :$input};
				}
			}, this);

	},

	validFormNow : function(){
		var $this = $(this);
		$this.find(':input').each(function(idx, el){
			var validData = eval($(el).data("valid"));
			if(validData != ""){
				try{
					$this.valid.call(el, validData);
				} catch (e) {
					//정규식 검증 실패한 경우 실패 메시지 alert
					if(e.exceptionMessage){
						alert(e.exceptionMessage);
						$(el).focus();
						return false;
					}
				}
			}
		});
		return true;
	}
});

$.fn.extend({

valid : function(tests) {

tests.forEach(function(test){

var $input = $(this);

var value = $input.val();

if (Array.isArray(test)) {

var testTerm = test[0]; //정규식

var exceptionMessage = test[1]; //정규식이 틀릴 경우 보여줄 검증 실패 메시지

//배열의 첫번째요소가 정규식이 아니거나 정규식 테스트를 실패한 경우에

//exception에 검증실패메시지를 세팅한 후 throw한다.

if( _.isRegExp(testTerm) && !(testTerm.test(value)) ){

throw {exceptionMessage : exceptionMessage};

}

} else {

throw {exceptionMessage : "스크립트 오류", input :$input};

}

}, this);

validFormNow : function(){

var $this = $(this);

$this.find(':input').each(function(idx, el){

var validData = eval($(el).data("valid"));

if(validData != ""){

try{

$this.valid.call(el, validData);

} catch (e) {

//정규식 검증 실패한 경우 실패 메시지 alert

if(e.exceptionMessage){

alert(e.exceptionMessage);

$(el).focus();

return false;

}

});

return true;

}

});

- jQuery 함수를 확장하여 validFormNow()를 구현하였습니다. 위의 소스코드 그대로 테스트를 해보실 수 있으며 위 소스코드는 이해를 돕기위해 만든 간단한 소스코드이니 해석은 생략하겠습니다.

3. 마치며

이전 프로젝트에서는 대부분 jQuery를 이용하여 다양한 방법으로 DOM을 select 하거나 Ajax통신을 하기위한 용도로 많이 사용하였지만 이번 프로젝트에서 data() 처음 적용하게 되었는데 매우 유용하게 다방변에서 사용하고 있습니다. 클라이언트측에서 <input>엘리먼트의 값을 검증하는 방법은 매우 다양한 하지만, 간단한 정규식과 jQuery의 data()를 이용하여 validation적용하는 부분은 다른 validation적용보다 더욱 간편하게 사용할 수 있고 직관적이기 때문에 매우 좋은 방법이라고 생각됩니다. 사용하는 방법이 매우 간단하므로 실제 현장에서 적용해보시는것을 추천드리며 이번 글로인해 조금이나마 jQuery의 data()메소드 사용에 친숙해지길 바랍니다. 마지막으로 data()를 활용한 클라이언트 측 validation 적용 부분을 개발하고 많은 도움을 주신 장유현님께 고마움을 전합니다.

참조도서 및 사이트

jQuery data [ http://api.jquery.com/data/ ]
jQuery removeData [ http://api.jquery.com/removeData/ ]
HTML5 data-* Attribute [ http://ejohn.org/blog/html-5-data-attributes/ ]
jQuery data video [ http://www.bennadel.com/blog/1404-jquery-data-method-associates-data-with-dom-elements-sweet-ass-sweet.htm ]

Rating: 5.0/5 (5 votes cast)

jQuery: data() 이해와 활용 , 5.0 out of 5 based on 5 ratings

6 Responses to “ “jQuery: data() 이해와 활용”

데꾸벅

2014/05/27 at 6:53 pm

“jQuery 제대로 알고 쓰자”의 저자가 될지도 모르는(?)의 데꾸벅입니다.

요즘 부쩍 jQuery에 대한 얘기들이 많이 나와서 볼 글들이 많네요!

얼마전 썼던 글에서와 마찬가지로 본질은 jQuery가 아니라 왜 그렇게 썼느냐가 돼겠죠!

jQuery가 prototype.js와 scriptaculas.js 와 같은 라이브러리가 전 세계를 장악했을때 혜성같이 떠올라 단 몇개월 만에 자바스크립트 라이브러리(정확히 말하면 애니메이션과 ajax기능)의 최강자가 된 가장 큰 이유는 쉽다는 이유였습니다. 아직 브라우저에서 지원하지 않는 CSS2.0, CSS3.0 선택자(Selector) 를 지원하면서 DOM선택 (DOM Query )이 쉬워져서 Front-End 개발자들이 많이 사용하기 시작했습니다.

자바스크립트의 경우 여럿이 함께 작업하기 어려운 이유가 서로 DOM 객체를 선택(Query)하는 방법이 틀리며 선택하는 방식도 상당히 어려워 스파게티 소스가 될 가능성이 많은 언어였습니다. (select의 option값 선택 및 document.all, document.layer, document.getElementById(), ~~getElementsByNames(), ~querySelector()… 기타등등)..

이러한 문제들을 jQuery가 해결해 주었지요~

이러한 맥락에서 보면 스펙상에는 존재하지만 브라우저에서 지원하지 않는 스펙상 문법들을 jQuery에서 지원해 줬다는 얘기가 됩니다.

여기서 data()의 경우도 HTML5의 스펙으로 문서자체를 데이터로 보자는 기본 사상을 가져와 data-* 의 Attribute값으로 말 그대로 데이터로써의 역할을 잠시 Elements에 저장해 두거나 서버로 전송하기 위한 방법으로 사용합니다.

즉 <span data-name=”값”>의 경우 객체.dataSet(“name”)과 같이 쓸 수 있듯이 jQuery에서는 객체.data()와 같이 간략하게 표현하였니다.

다만, 위와 같이 직접 HTML에 data-*와 같이 쓴다면 DTD가 xhtml 일 경우에는 validation 오류를 발생시켜 버린다는 문제가 있지요. 존레식 아우님(?) 께서도 이러한 문제점을 알고 있었지만 강력한 기능에 라이브러리에 포함시켜버렸다는 뒷 이야기가 있지요..

서두가 너무 길었고 사실 본 프로젝트에서는 data-*를 underscore라이브러리의 템플릿 형태로 사용하기 위해 사용했음을 알립니다.

추가적으로 HTML5의 data-*을 가져오는 dataSet에 대한 설명과 이와 비슷한 item-scope에 대한 설명, 비슷한 자d바스크립트 템플릿엔진등을 비교설명하면 더 좋은 공부가 될듯 합니다.

이와는 다르지만 HTML5에 data-*와 같이 추가된 웹접근성 관련 aria-* , role-* 등도 한번 보시길…

'javascript' 카테고리의 다른 글

[JavaScript] 브라우저 크기 구하기 : 화면 해상도 구하기 (0)	2016.09.12
How to get selected tab index when clicking - jqueryUI - tabs (0)	2016.08.22
[jQuery] each 메소드 사용시 break, continue 사용 (0)	2016.07.12
함수호출 방식에 따른 this의 바인딩에 대해서... (0)	2016.07.12
div float 쓴 후 float 효과 지우기 (0)	2016.07.11

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

햇빛이좋은정리공간

티스토리 뷰

jQuery: data() 이해와 활용

출처: http://www.nextree.co.kr/p10155/

jQuery: data() 이해와 활용

1. data()

2. data() 활용방안

[ 활용방안 1. ]

[ 활용방안 2. ]

3. 마치며

6 Responses to “ “jQuery: data() 이해와 활용”

'javascript' 카테고리의 다른 글

티스토리툴바