Skip to main content

3자리마다 콤마를 찍어주는 플러그인

이 플러그인도 jquery용입니다.

별도의 파일로 만들어서 script src로 불러다 쓰시면 편리합니다.

몇가지 타입이 있는데요… 통합할려다가 그때 그때 필요한 것을 추가하다보니 함수가 3개나 되었네요 -_-

$(function($){

    //NumberFormat -_-a 딱히 이름이 안 떠오름
    // 3자리 마다 콤마를 찍어줌
    $.DNumberFormat = function(value) {
        var data = value + "";
        var arrResult = data.split("");
        var startIndex = arrResult.length - 3;
        for (var i = startIndex; i > 0; i -= 3) {
            arrResult.splice(i, 0, ","); // 0은 기존 배열을 삭제하지 않고 삽입만 하겠다는 의미
        }
        return arrResult.join(''); // 공백없이 문자열로 변환
    };



    //객체를 지정해서 찍는것도 ...
    $.fn.DNumberFormatInput = function() {
        var value = $(this).val();

        var data = value + "";
        var arrResult = data.split("");
        var startIndex = arrResult.length - 3;
        for (var i = startIndex; i > 0; i -= 3) {
            arrResult.splice(i, 0, ","); // 0은 기존 배열을 삭제하지 않고 삽입만 하겠다는 의미
        }
        $(this).val(arrResult.join('')); // 공백없이 문자열로 변환
    };

    //html용 (try_catch가 필요할듯...)
    $.fn.DNumberFormatHtml = function() {
        var value = $(this).html();

        var data = value + "";
        var arrResult = data.split("");
        var startIndex = arrResult.length - 3;
        for (var i = startIndex; i > 0; i -= 3) {
            arrResult.splice(i, 0, ","); // 0은 기존 배열을 삭제하지 않고 삽입만 하겠다는 의미
        }
        $(this).html(arrResult.join('')); // 공백없이 문자열로 변환
    };

});

사용하는 방법은 여타의 플러그인들과 마찬가지로 …

$("#객체").DNumberFormat();

 

용도에 따라 함수를 바꿔주면 됩니다. …

(누군가 하나로 통합해줬으면.. -ㅅ- .. 내가 잘쓸텐데…   class도 처리되게 해줬으면….  )

 

…. 이라고 하기에 누가 만들어 놓지 않았을까요 -ㅅ-)!!

HTML DOM 요소를 섞어 주는 플러그인?

jquery를 이용하여 객체를 랜덤으로 출력할 일이 있어서 만들어 보았습니다.

(만든게 아닌가 -_- 어딘가 스텍에서 따온건가 …  가물가물하군욥… 어쨌든 잘 쓰고 있습니다.)

 

당연한 이야기지만 jquery를 불러놓고 써야합니다.

 

(function($){

    $.fn.DShuffle = function() {

        var allElems = this.get(),
            getRandom = function(max) {
                return Math.floor(Math.random() * max);
            },
            shuffled = $.map(allElems, function(){
                var random = getRandom(allElems.length),
                    randEl = $(allElems[random]).clone(true)[0];
                allElems.splice(random, 1);
                return randEl;
            });

        this.each(function(i){
            $(this).replaceWith($(shuffled[i]));
        });

        return $(shuffled);

    };

})(jQuery);

 

사용법은….

$('ul#list li').shuffle();

requireJS 사용해보기

요즘은 웹사이트에서 자바스크립트의 비중이 커져서 로딩시간이 길어진다든지, 저사양PC에서 웹사이트 실행속도가 늦다든지 하는 문제가 발생하는경우가 많습니다.

뭐 단적인 예로 회사(제가 다니는..)에서 운영하는 홈페이지의 서버가 외국에 있고, 수십가지 라이브러리를 웹페이지에 로드해야할 경우 JS가 동적으로 로딩 될수 있도록 고려해보는 것도 좋지 않을까요….

동적으로 JS파일을 모듈형식으로 로드할수 있는데 이것을 AMD 방식이라고 하는것 같습니다.

자세한 내용은 다음 링크를 보시면 도움 될 것입니다.

https://github.com/amdjs/amdjs-api/blob/master/AMD.md

그래서 찾아보던 도중 requireJS라는 녀석이 이 기능을 하고 웹페이지 node.js 등에서 많이 사용 된다고 해서 사용해보기로 했습니다.

requireJS의 기능은 동적로딩, 의존성 적용, 템플릿로드 … 정도 인것 같습니다.

공식사이트 : http://requirejs.org/docs/start.html

requireJS를 실제로 적용하기위해서 디럭토리 구조가 중요합니다.

다음은  실제로 사용하는 폴더 입니다.  -ㅅ-);;

requirejs_folder

여기서 중요하게 보실 것이 common.js 파일과 lib 폴더 입니다.

common.js는 웹페이지에서 사용할 스크립트들을 정의하는 역할을 합니다. (그리고 의존성도 관리합니다.)

lib폴더에는 jquery, undercore 등 JS라이브러리들입니다. (흔히들 많이 사용하는…)

 

구동 테스트를 위한 샘플에서는 위와 같은 폴더구조를 만들고 common.js 파일을 다음과 같이 작성하였습니다.

requirejs.config({
	baseUrl: 'js',  //js폴더 
	//스크립트 정의
	paths: {
		underscore : "lib/underscore",
		jquery : "lib/jquery"
	},
	//의존성정의
	shim: {
		underscore: {
			exports: '_'
		},
		jquery : {
			exports: '$'
		}
	}
});

baseUrl은 javascript가 저장될 폴더 path에는 사용할 자바스크립트를 모두 적어줍니다.
(모드 안적어도 상관은 없지만 js폴더(baseUrl) 기준으로 로드 되게 됩니다. 가능하면 적어두고 로드 하는것이 실제로 사용할 때 편리합니다. )
shim에서는 의존성을 정의( [‘패키지’,’패키지’] 이런식으로 정의 ) 할수 있고 export를 통해서 jquery객체를 $으로 사용할수있게 합니다.
(paths에서 정의해두면 버전이 다른 jquery를 사용할수도 있습니다.)

그리고 이제 HTML페이지에서 requriejs를 호출해 봅시다.



    
        requirejs TEST
        
		
		
        
    
    
		require js 테스트 테스트 테스트 테스트
    

라이브러리를 로드하고나서 data-main=”js/common”를 통해서 config를 로드할수 있다고 하던데 실제로 해보니 작동하지 않아
별도로 다시 로드 시켜 보았습니다.

이 게시글 처음에 언급한 AMD방식으로 JS를 로드하는 방식과 유사하게 로드합니다.
requriejs에서 로드할 lib들의 이름을 지정하고(config기준) 그속에 JS를 코딩하게 됩니다.
물론 requriejs속에서는 $든, _를 사용할 수 있씁니다만, 밖에서는 사용할 수 없습니다. 그리고 속에서 선언된 함수선언
function을 HTML에서 onclick, onsubmit등으로 직접 호출 할 수 없음으로 $(객체).on(“click”,function(){}); 과 같이 사용해야 합니다.

위의 구동 예제로 구현된 샘플입니다.

http://jusun.org/example/requirejs/

실제로 사용하는 common.js 파일입니다. ^^ 의존성관리, 초기화가 필요한 스크립트의 처리 등을 확인해보세요.


/**
 * Created by jusun on 2016-08-04.
 */
requirejs.config({
    baseUrl: '/js',
    paths: {
        underscore : "lib/underscore",
        jquery : "lib/jquery-1.12.4.min",
        jqueryui : "lib/jquery-ui.min",
        post : "lib/tr.post",
        ckeditor : "lib/ckeditor/ckeditor",


        mathjax : "//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML",
        google : "//apis.google.com/js/client:plusone.js",


        design : "kor/design",
        korcommon : "kor/kor.common",
        sns : "kor/sns",
        snsdev : "kor/sns.dev"
    },
    shim: {
        underscore: {
            exports: '_'
        },
        jquery : {
            exports: '$'
        },
        post : ['jquery'],
        korcommon:['jquery','jqueryui'],
        design:['jquery','jqueryui'],
        mathjax: {
            exports: "MathJax",
            init: function () {
                MathJax.Hub.Config({
                    showProcessingMessages: false,
                    messageStyle: "none",
                    config: ["MMLorHTML.js"],
                    jax: ["input/TeX","output/HTML-CSS","output/SVG"],
                    extensions: ["tex2jax.js"],
                    TeX: {
                        extensions: ["AMSmath.js","AMSsymbols.js","noErrors.js","noUndefined.js"]
                    },
                    tex2jax: {
                        inlineMath: [ ['\\(','\\)'] ],
                        displayMath: [ ["\\[","\\]"] ],
                        processEscapes: true
                    },
                    SVG:{
                        scale: 96
                    },
                    "HTML-CSS": { availableFonts: ["STIX","TeX"] }
                });
                MathJax.Hub.Startup.onload();
                return MathJax;
            }
        }
    }
});

(오늘은 정말 여기까지.. ㅋㅋ )

mustache.js – 자바스크립트 템플릿 엔진

자바 스크립트 탬플릿 엔진을 왜 써야하는가에 대한 고찰부터 해봐야할거 같네요.

원페이지 웹 페이지를 개발하다 보면 동적으로 화면을 붙이거나 서버에서 데이터만 가져와서

화면을 구성해야하는 경우가 있습니다.

저도 급할때는 이렇게 합니다만… 다음처럼 스크립트속에 html을 넣어서 원하는 위치에 append 해서 처리합니다. -_-

.... 중략...
var html = "<b>"+name+"</b> is great!! <br>";
html = html + "welcome to " + area;
$("body").append(html);

솔직히 뽀대 안나지 않습니까 -ㅅ-)
동적으로 처리해야 하는 부분이 많다면 소스 자체도 복잡해지고 가독성도 떨어집니다.

그래서 html로 불러다가 붙이는 경우도 있습니다.
html을 ajax으로 불러 화면에 붙이게 되면 속도가 빠른경우는 문제가 되지 않겠지만
페이지가 크다면 페이지를 불러 올때마다 로드가 걸립니다.

그래서 템플릿 엔진을 써야합니다. -ㅅ-)/” (씁시다…… )

앞으로 만든 페이지를 유지관리하거나 속도면에서 유리한면이 상당합니다…

이것저것 해보다가 jquery플러그인인 jquery templete을 사용하려고 하다가 바인딩하는 값마다가 싸줘야해서… 너무 귀찮아서 ;;;
포기하고

mustache.js!! 를 찾아냈습니다. -ㅅ-);;;

무려 용량이 9kb!!(min파일 기준)

대략적인 구현방법은…

템플릿을 같은 문서내에 bind될 값만 데이터에 맞게 만들어 숨겨둡니다.
그리고 ajax로 json 파일을 받아 mustache achat viagra soft.js로 가공해주면 끝입니다.
그렇지만 템플릿을 만들려면 템플릿 문법을 알아야합니다. ;;;
(사실 템플릿을 익히는데 거부감이 많으신분들이 많습니다. ㅠ_ㅠ )

“jquery templete으로 삽질할래 템플릿 배울래?” 하면…. 전 템플릿 배우겠습니다.

자세한 사항은 공식 사이트 https://github.com/janl/mustache.js/ 에 있습니다.

기본적인 템플릿엔진 기능인 값을 바인딩 하는 것과 루프로 값을 찍는것을 해보았습니다. (다음 링크를 보세요 ㅎㅎ)

http://jusun.org/example/mustache/

<!---
mustache.js - Logic-less {{mustache}} templates with JavaScript
https://github.com/janl/mustache.js/
--->
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>
<script src="mustache.min.js"></script>
<style>
	.hide { display:none; }
</style>

</head>
<body>

<div id="result1"></div>
<div id="templete1" type="x-tmpl-mustache" class="hide">
	<b>{{name}}</b> is babo. <br />
	<span style="font-size:11pt;color:red">{{age}} years old.</span>
</div>

<hr />

<div id="result2"></div>
<div id="templete2" type="x-tmpl-mustache" class="hide">
	{{#peoples}}
	* {{name}} is {{age}} years old. <br />
	{{/peoples}}
</div>



<script type="text/javascript">

//단일 데이터 메칭 
function temp_exam1(){
	var template = $('#templete1').html();
	Mustache.parse(template);

	var data = {
		name: "Luke",
		age: 15
	};
	
	var rendered = Mustache.render(template, data);
	$('#result1').html(rendered);
}

temp_exam1();



//루프 예제
function temp_exam2(){
	var template = $('#templete2').html();
	Mustache.parse(template);

	var data = 
	{
	  "peoples": [
		{ 
		  "name": "Moe",
		  "age":13
		},
		{ 
		  "name": "Larry",
		  "age":16

		},
		{ 
		  "name": "Curly",
		  "age":21
		},
		{ 
		  "name": "Jusun",
		  "age":36
		}
	  ]
	};
	
	var rendered = Mustache.render(template, data);
	$('#result2').html(rendered);
}
temp_exam2();

</script>

</body>
</html>

오늘은 여기까지 -ㅅ-)

YDN-DB 브라우저 로컬저장소에 저장하기

오랜만에 포스트를 남깁니다.

데이터베이스를 이용한다면 보통은 서버 설치해서 Server-side기준으로 운영하게 됩니다.

그렇지만 간혹 용도에 따라 사용자의 개인적인 데이터를 저장해두어야할 필요가 있을 때가 있습니다.
(쿠키도 가능하지만 용량이 작아서 ;; )

(지금 당장 생각나는 예는 없지만 ;; )

HTML5 표준에 따르면 sqlite를 이용한 브라우저, 내장 DB가 크롬브라우저에도 내장(IndexedDB)되어있고 파이어폭스는 webstoreage(?) 등
을 사용합니다. 그렇다보니 웹의 특성상 여러가지 브라우저에서 동일하게 동작하는 것이 좋은데 그렇지 못한 경우가 생깁니다.
특히 낮은 버전의 브라우저는 지원되지 않아 아쉬움이 많습니다.
그래서 YDN-DB를 써볼까 합니다. ^^ (다른 프로젝트에 사용해봤었는데 생각보다 괜찮습니다. )

YDN-DB의 공식 홈페이지는 https://dev.yathit.com/ydn-db 입니다.

YDN-DB에서 지원하는 브라우저는 다음과 같습니다.

– Chrome 4+ (IndexedDB or WebSql)
– Firefox 3+ (IndexedDB draft), Firefox 10+ (IndexedDB)
– IE 6 (userdata), IE7+ (localStorage), IE10+ desktop/mobile (IndexedDB)
– Safari 3.1+ desktop/mobile/iOS web client (WebSql)
– Android web client, Android browser 2.1+ (WebSql), 4+ (IndexedDB)

– Opera 10+ (WebSql), Opera 15+ (IndexedDB)

현재 널리 사용되고 있는 왠만한 브라우저는 다 지원하고 있으니 해볼만하지 않을까요 ^^
추가하자면 IE에서는 용량제한이 있다고 합니다. IE6에서 1Mb IE7,8,9에서 5M 까지만 저장….

YDN을 이용하여 간단한 LIST샘플을 만들어 보았습니다.

http://jusun.org/example/ydn-db

익숙한 SQL을 사용하여 데이터를 컨트롤하면 좋겠지만…
nosql 쿼리 처럼 객체를 정의하여 쿼리하게 되어있습니다.

가장 중요한 것이 스키마 입니다. 예제에서는 단순히 리스트처럼 만들었지만 실제로는 객체 밑에 겍체가 들어가는 자료구조도 가능합니다.
(자세한 내용은 공식홈페이지에서…)

스키마를 정의하고 그 스키마 기준으로 자료를 입출력할 수 있습니다.
(업데이트 함수도 따로 있는것 같긴한데 같은 ID로 등록하면 덥어쓰던거 같습니다. )

대부분 개발자들은 말로 하는것보다 코드 보는게 빠르지 않수 ? -ㅅ-)

<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="1.4.3-ydn.db-is-core-qry.js"></script>

<script type="text/javascript">
//스키마를 정의 해둠
var schema = {
	version:1,
	autoSchema:false,
	stores:[{
		name:"jusun_test",
		keyPath:"id",
		autoIncrement:true,
		indexes:[
			{name:'title'},
			{name:'memo'},
			{name:'date'}
		]
	}]
};

var db = new ydn.db.Storage('jusun_db', schema);


var addItem = function () {

	var data = {
		"title":$("input[name=title]").val(),
		"memo":$("input[name=memo]").val(),
		"date":Date()
	};

	db.put('jusun_test', data).fail(function(e) {
		console.error(e);
	});

	getAllItems();

	$("input[name=title]").val("");
	$("input[name=memo]").val("");
};

//삭제
var deleteItem = function (id) {
  db.remove('jusun_test', id).fail(function(e) {
    console.error(e);
  });

  getAllItems();
};


//전체 가져오기
var getAllItems = function () {
  $("#list li").remove();
  var df = db.values('jusun_test');

  df.done(function (items) {
    var n = items.length;
    for (var i = 0; i < n; i++) {
      console.log(items[i]);
	  renderList(items[i]);
	}
  });

  df.fail(function (e) {
    console.error(e);
  });
};

//화면에 그리기
var renderList = function (item) {
  var list = document.getElementById("list");
  var li = document.createElement("li");
  var a = document.createElement("a");
  var t = document.createTextNode(item.title + "---" + item.memo);

  a.addEventListener("click", function () {
    deleteItem(item.id);
  }, false);

  a.textContent = " [x]";
  li.appendChild(t);
  li.appendChild(a);
  list.appendChild(li)
};



db.onReady(function() {
  getAllItems();
});


</script></pre>
<h2>YDN-DB Example(jusun.org)</h2>
&nbsp;
<div>

&nbsp;

<input name="title" type="text" placeholder="title" />

&nbsp;

<input name="memo" type="text" placeholder="memo" />

&nbsp;

<input name="add" type="button" value="add" />

</div>

<div class="list">

<ul id="list"></ul>

</div>

오늘은 여기까지 입니다. ;;;