'ITWeb/개발일반' 카테고리의 글 목록 (37 Page)

Cookie 랑 Web Storage 맛보기.

ITWeb/개발일반 2011. 12. 1. 15:08

Client 에서 정보를 저장하고 사용하기 위해서 전통적으로 cookie 를 많이 사용했었죠.
HTML5 이 대두 되면서 더 좋은 기술들이 나오고 있습니다.
그래서 cookie 랑 localStorage 맛보기 들어 갑니다.

그냥 단순히 작성한 코드니까 확장이나 응용, 활용은 각자의 몫입니다. ^^

[Cookie]
- 이전 글 참고 부탁 하며,
- http://jjeong.tistory.com/528

var COOKIE = {

set : function(k, v, e, t) {

var expireDate = new Date();

var cookieValue;

if (t == '') {

t = CONSTANT.COOKIE_EXPIRE_DAY;

}

switch (t) {

case CONSTANT.COOKIE_EXPIRE_DAY:

expireDate.setDate(expireDate.getDate() + e);

break;

case CONSTANT.COOKIE_EXPIRE_DAY:

expireDate.setTime(expireDate.getTime() + (e * 60 * 60 * 1000));

break;

default:

expireDate.setDate(expireDate.getDate() + e);

}

if (e) {

cookieValue = escape(v) + '; expires=' + expireDate.toGMTString();

} else {

cookieValue = escape(v);

}

document.cookie = k + '=' + cookieValue + '; path=/';

},

get : function(k) {

var cookies = document.cookie.split(';');

var i, key, val, size, idx;

size = cookies.length;

for (i = 0; i < size; i++) {

idx = cookies[i].indexOf('=');

key = cookies[i].substr(0, idx);

val = cookies[i].substr(idx + 1);

key = key.replace(/^\s+|\s+$/g, "");

if (key == k) {

return unescape(val);

}

return false;

},

del : function(k) {

this.set(k, '', -1);

}

[localStorage]

var LOCALSTORAGE = {

set : function (k, v) {

//localStorage[k] = v;

localStorage.setItem(k,v);

},

get : function (k) {

//return localStorage[k];

return localStorage.getItem(k);

},

del : function (k) {

localStorage.removeItem(k);

},

clear : function () {

localStorage.clear();

}

[간단설명]
- 둘 다 client 단에서 정보를 read/write 하기 위해서 만들어 졌습니다.
- Code 크기만 보더라도 localStorage 가 훨씬 짧죠.. 그리고 더 직관적이고 사용하기 아주 쉽습니다.
- 각 코드에는 exception 처리가 포함되어 있지 않습니다. biz 나 service layer 에서 처리를 하시면 되겠죠.
- Web Storage 도 localStorage 와 sessionStorage 가 있습니다.
- Cookie 랑 비교하면 persistence cookie == localStorage, temporary cookie == sessionStorage 정도 되겠내요.
- 성능적인 부분에서도 localStorage 가 월등 합니다.

[참고사이트]
- http://dev.w3.org/html5/webstorage/
- http://www.w3schools.com/html5/html5_webstorage.asp
- https://developer.mozilla.org/en/DOM/Storage

[W3C Web Storage Interface]

interface Storage {
  readonly attribute unsigned long length;
  DOMString? key(unsigned long index);
  getter DOMString getItem(DOMString key);
  setter creator void setItem(DOMString key, DOMString value);
  deleter void removeItem(DOMString key);
  void clear();
};

:

JavaScript unix timestamp 맛보기.

ITWeb/개발일반 2011. 11. 30. 15:08

아래 두개 중에 택 1 하세요.
둘다 정수를 return 해 줍니다.
다만, 차이는 아시죠.. 반올림과 내림이라는거..

[참고사이트]
- http://www.w3schools.com/jsref/jsref_obj_math.asp

[CASE 1]
Math.round((new Date()).getTime() / 1000);

[CASE2]
Math.floor((new Date()).getTime() / 1000);

:

JavaScript Cookie 맛보기.

ITWeb/개발일반 2011. 11. 30. 14:40

Browser 에서 Cookie 를 다루는 것은 매우 오래된 기술이죠.
그래서 맛보기 작성해 봅니다.
기억을 새록 새록 ㅎㅎ

[제약사항]
- 단일 Domain 에대한 쿠키 count 와 length 제한이 있습니다. 이전 글 참고하세요.
- http://jjeong.tistory.com/278

[참고사이트]
- http://www.quirksmode.org/js/cookies.html
- http://www.w3schools.com/js/js_cookies.asp

[Session vs Persistent Cookie]

- Session Cookie
Temporary Cookie 라고도 합니다.
말 그대로 임시쿠키 입니다.
브라우저가 살아 있는 동안만 유지되는 쿠키로 expire date 이 없기 때문에 브라우저를 닫으면 바로 쿠키는 사라집니다.

- Persistent Cookie
세션쿠키와 다르게 브라우저가 닫혀도 쿠키가 유지 되는 쿠키 입니다.
즉, expire date 을 설정해 주기 때문에 그 기간 동안 쿠키는 유지 되며, 임의 삭제를 하지 않는 이상 유지됩니다.
이 쿠키는 expire 되기 전까지 쿠키 file 에 쓰여져서 저장됩니다.

[소스코드]

<!DOCTYPE html>

<html>

<head>

<title>JavaScript Cookie</title>

//<![CDATA[

var COOKIE = {

set:function (n,v,e,t) {

var expireDate = new Date();

var cookieValue;

switch ( t ) {

case 'day' :

expireDate.setDate(expireDate.getDate() + e);

break;

case 'hour' :

expireDate.setTime(expireDate.getTime() + (e*60*60*1000));

break;

default :

expireDate.setDate(expireDate.getDate() + e);

}

if ( e ) {

cookieValue = escape(v) + '; expires='+expireDate.toGMTString();

} else {

cookieValue = escape(v) ;

}

document.cookie = n + '=' + cookieValue + '; path=/';

},

get:function(n) {

var cookies = document.cookie.split(';');

var i, key, val, size, idx;

size = cookies.length;

for ( i=0; i<size; i++ ) {

idx = cookies[i].indexOf('=');

key = cookies[i].substr(0, idx);

val = cookies[i].substr(idx+1);

key = key.replace(/^\s+|\s+$/g,"");

if ( key == n ) {

return unescape(val);

}

},

del:function(n) {

this.set(n,'',-1);

}

function testGet() {

var val = COOKIE.get('DUID');

alert(val);

}

function testDel() {

COOKIE.del('DUID');

alert(document.cookie);

}

//]]>

</script>

</head>

<button onclick="COOKIE.set('DUID', '123456789', 365);">set cookie</button>

<button onclick="testGet();">get cookie</button>

<button onclick="testDel();">del cookie</button>

</body>

</html>

※ 기본 code base 는 위 두 사이트를 바탕으로 작성한 것입니다.

:

Mobile Device API 관련 PDF

ITWeb/개발일반 2011. 11. 30. 12:44

Device API 관련 구글링 하다 얻어 걸린 PDF 파일 올려 봅니다.

:

COMET 언제쩍 건데.. 그래서 맛보기

ITWeb/개발일반 2011. 11. 30. 11:58

좀 예전에 작성해 놓았던 건데 걍 정리 하는 차원에서 맛보기 들어 갑니다.
아래 기술하는 내용은 XMLHttpRequest polling 방식 입니다.
아주 예전에 제가 쓰던 방식은 hidden iframe 을 이용한 remote scripting 이였는데 뭐.. 세상은 날로 좋아지고 있으니.. ㅎㅎ
관련 글 WebSocket 도 참고하세요.
- http://jjeong.tistory.com/485

[참고링크]
- http://en.wikipedia.org/wiki/Comet_(programming)
- http://www.google.co.kr/search?q=reverse+ajax

[Server]

// server.html

<?php

header("Cache-Control: no-cache, must-revalidate");

header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");

header('Content-Type: multipart/x-mixed-replace; Charset=utf-8');

$filename = 'comet.txt';

$currentTime = filemtime($filename);

$inputTime = filter_input(INPUT_GET, 'inputTime', FILTER_SANITIZE_STRIPPED);

clearstatcache();

while ( $inputTime < $currentTime ) {

$inputTime = $currentTime;

echo $currentTime;

flush();

usleep(10000);

}

?>

[Client]

// client.html

<!DOCTYPE html>

<html>

<head>

<title>XMLHttpRequest</title>

//<![CDATA[

var XHR = {

conn : null,

request : {

url : '',

method : 'GET',

data : '',

async : true

},

header : {

key : [],

value : {}

},

data : {

key : [],

value : {}

},

response : {

type : "XML"

},

createConnection : function() {

if (typeof window.XMLHttpRequest) {

this.conn = new XMLHttpRequest();

} else if (typeof window.ActiveXObject) {

this.conn = new ActiveXObject("Microsoft.XMLHTTP");

}

return this.conn;

},

createRequestData : function() {

var size = this.data.key.length;

for ( var i = 0; i < size; i++) {

this.request.data += this.data.key[i] + '='

+ this.data.value[this.data.key[i]] + '&';

}

this.request.data = this.request.data.substr(0,

this.request.data.length - 1);

return this.request.data;

},

createRequestHeader : function() {

var size = this.header.key.length;

for ( var i = 0; i < size; i++) {

this.conn.setRequestHeader(this.header.key[i],

this.header.value[this.header.key[i]]);

}

},

open : function() {

var requestUrl;

if (this.request.method == 'GET') {

requestUrl = this.request.url + '?' + this.request.data;

} else {

requestUrl = this.request.url;

}

this.conn.open(this.request.method, requestUrl, this.request.async);

},

send : function() {

if (this.request.method == 'GET') {

this.conn.send();

} else {

this.conn.send(this.request.data);

}

XHR.request.url = "http://192.168.1.1/comet/server.html";

XHR.request.method = "GET"; // "POST";

XHR.header.key = ["Content-Type"];

XHR.header.value = {

"Content-Type":"application/x-www-form-urlencoded"

};

XHR.data.key = ["id", "s", "ts", "inputTime"];

XHR.data.value = {

"id":12345678,

"s":"320x48",

"ts": Math.floor(new Date().getTime()/1000),

"inputTime":0

};

function xhrRequest() {

XHR.createConnection();

XHR.createRequestData();

XHR.conn.onreadystatechange = function () {

switch ( XHR.conn.readyState ) {

case 0 : // XHR.conn.UNSENT :

break;

case 1 : // XHR.conn.OPENED :

break;

case 2 : // XHR.conn.HEADERS_RECEIVED :

break;

case 3 : // XHR.conn.LOADING :

break;

case 4 : // XHR.conn.DONE :

doReadyStateChange();

break;

}

/*

별도로 수행해야 하는 함수 작성 필요

*/

function doReadyStateChange() {

if ( XHR.conn.status >= 200 && XHR.conn.status < 300 ) {

testConsole(XHR.conn.responseText);

XHR.data.value.inputTime = XHR.conn.responseText;

} else if ( XHR.conn.status == 404 ) {

alert('Not Found.');

} else {

alert(XHR.conn.status);

}

};

XHR.open();

XHR.createRequestHeader();

XHR.send();

}

function testConsole (log) {

var console = document.getElementById("console");

console.innerHTML = log + '<br>' + console.innerHTML;

}

window.setInterval("xhrRequest();", 5000);

//]]>

</script>

</head>

<body>

</body>

</html>

[Content&Message File]
- comet.txt
- 이 파일은 Client 로 전달한 content 나 message 등을 넣어 놓으면 server.html 에서 while loop 내 file_get_contents 함수를 통해서 Data 를 읽고 Client 로 전달해 주면 됨.

[간단설명]
- Client 에서 주기적으로 Server 에 Request 를 보냅니다.
- Server 에서는 comet.txt 파일의수정 시간을 검사를 합니다.
- 전달할 메시지가 추가 되었다면 file의 수정된 시간이 크기 때문에 comet.txt 파일의 Content 를 읽어서 Client 로 전달을 합니다.
- Async 방식은 잘 아실테니 설명 생략하구요.

※ 작성된 코드는 아주 옛날에 작성된것으로 ㅋ 초간단 버전 입니다. - 태클금지 -

:

DOM Linking Elements : insertBefore, appendChild, replaceChild 맛보기

ITWeb/개발일반 2011. 11. 29. 10:45

DOM Linking 맛보기

[[insertBefore]]
[문법]

DOMNode.insertBefore(newNode, existNode)

- newNode : document.createElement 로 생성한 노드
- existNode : 이미 존재하고 있던 DOM 노드

[설명]

existNode 앞으로 newNode 가 삽입 됩니다.

[예제]

// pseudo code 수준으로 작성 하고 동작하는 코드는 제일 아래 코드 참고하세요.

// Before
<body>
<div id='div1'></div>
</body>

// Run
<script type="text/javascript">
document.body.insertBefore(div2, div1);
</script>

// After
<body>
<div id='div2'></div>
<div id='div1'></div>
</body>

[[appendChild]]
[문법]

DOMNode.appendChild(newNode)

- newNode : document.createElement 로 생성한 노드

[설명]

DOMNode 의 마지막 Child 노드에 newNode 를 추가합니다.

[예제]

// pseudo code 수준으로 작성 하고 동작하는 코드는 제일 아래 코드 참고하세요.

// Before

<div id='div1'>DIV1

<div id='div2'>DIV2

<div id='div3'>DIV3

</div>

</div>

// Run
var obj = document.getElementById('div2');
obj.appendChild(node);

// After

<div id='div1'>DIV1

<div id='div2'>DIV2

<div id='div3'>DIV3

</div>
<div id='div4'>DIV4></div>

</div>

[[replaceChild]]
[문법]

DOMNode.replaceChild(newNode, existNode)

[설명]

DOMNode 의 Child 노드 인 existNode 를 newNode 로 바꾸게 됩니다.

[예제]

// pseudo code 수준으로 작성 하고 동작하는 코드는 제일 아래 코드 참고하세요.

// Before

<div id='div1'>DIV1

<div id='div2'>DIV2

<div id='div3'>DIV3

</div>

// Run

var obj = document.getElementById('div2');

var child = document.getElementById('div3');

var node = document.createElement('div');

node.id = 'div4';

node.innerText = 'DIV4';

obj.replaceChild(node, child);

// After

<div id='div1'>DIV1

<div id='div2'>DIV2

<div id='div4'>DIV4

</div>

</div

[[샘플코드]]

<!DOCTYPE html>

<html>

<head>

<title>DOM Linking</title>

function testInsertBefore(){

var obj = document.getElementById('div1');

var node = document.createElement('div');

node.id = 'div4';

node.innerText = 'DIV4';

document.body.insertBefore(node, obj);

alert(document.body.innerHTML);

}

function testAppendChild(){

var obj = document.getElementById('div2');

var node = document.createElement('div');

node.id = 'div4';

node.innerText = 'DIV4';

obj.appendChild(node);

alert(document.body.innerHTML);

}

function testReplaceChild(){

var obj = document.getElementById('div2');

var child = document.getElementById('div3');

var node = document.createElement('div');

node.id = 'div4';

node.innerText = 'DIV4';

obj.replaceChild(node, child);

alert(document.body.innerHTML);

}

</script>

</head>

<div id='div1'>DIV1

<div id='div2'>DIV2

<div id='div3'>DIV3

</div>

<br>

<button onclick="testInsertBefore();">insertBefore</button> | <button onclick="testAppendChild();">appendChild</button> | <button onclick="testReplaceChild();">replaceChild</button>

</body>

</html>

:

WAC SDK2.0 에서 AVD 를 못찾을때.

ITWeb/개발일반 2011. 11. 25. 17:22

어제 테스트 하다 보니 Eclipse 에서 Run As -> Widget Application 을 통해서 실행을 시키는데 아래와 같은 오류가 나더군요.

[Error Message]

An internal error occurred during: "Launching HelloWorld".

com.android.sdklib.internal.avd.AvdManager.getValidAvds()[Lcom/android/sdklib/internal/avd/AvdManager$AvdInfo;

그래서 별짓을 다 해보았으나 잘 안되었구요.
오늘 성공한 사례는 아래와 같습니다.

[성공사례]

- Windows7 + JDK6
1. 기존에 설치된 WAC SDK 2.0 을 제거
2. WAC SDK 2.0 을 관리자 권한으로 재설치
3. 기존에 ADT Plugin 설치된 메뉴 구조와 다르게 WAC SDK 2.0 을 설치 하면 나오는 메뉴 구조가 생성됨.
4. 그 이외 설정은 그대로 WAC Tutorial 에 있는데로 수행
5. Sample WAC project 생성 후 실행
6. 성공.

참 신기하죠...
뭐 어찌 되었건 잘 되내요.. ㅎㅎ

:

W3C Widget, BONDI, JIL - 너흰 누구냐??

ITWeb/개발일반 2011. 11. 25. 09:23

위젯 관련 표준이라고 보면 되려나요??

[W3C Widgets]
- http://www.w3.org/TR/widgets/

[OMTP BONDI - 보다폰]
- http://www.omtp.org/

[JIL : Joint Innovation Lab]
- http://www.jil.org/ 였으나 지금은 WAC 으로 통합 된것 같다.
- http://www.wacapps.net/

결국 이넘들은 HTML, Javascript, CSS 와 더불어 Device API 와 interfacing 할 수 있는 능력을 갖추게 되어 쉽게 App 개발을 할 수 있어 지는 것 같내요.

어찌 되었건 결국 WAC 으로 통합되어 가는 분위기 인듯....

:

Appspresso 맛보기.

ITWeb/개발일반 2011. 11. 24. 17:02

이전 직장에서 같이 일하던 아주 실력 좋은 동생이 KTH 에 입사해서 appspresso 를 개발했내요.
그래서 가볍게 맛보기로.. 한번 도전해 보기로.. ^^

[공식사이트]
- http://www.appspresso.com : 영문
- http://www.appspresso.com/ko : 한글

[다운로드]
- 다운로드는 기본적으로 이메일을 등록하면 메일로 다운로드 링크를 보내 주고 있습니다.
- 사실 이건 좀 맘에 들지는 않지만.. 뭐.. 이런 좋은 툴을 제공해 주니.. 이메일 정도는 넘겨도 ㅋ

[시작하기]
- 링크 참고 하시면 됩니다.
- http://www.appspresso.com/ko/developer-ko/getting-started-ko
- WAC SDK 와 유사하게 Eclipse 와 함께 패킹 된 상태로 설치 됩니다.
- Windows 7 에서는 간혹 emulator 실행 시킬때.. 오류가 나는데요.. 이건 관리자 권한으로 실행 시켜서 하시면 해결 되는 것 같습니다.

※ 사용에 대한 자세한 내용은 앱스프레소 개발자 사이트 들어 가시면 자세하게 나와 있습니다.

[오늘 테스트 하면서 느낀점]
- 사내 네트웍이나 보안이 좀 특이해서 맞는지 틀리는지 확인이 어렵지만..
- 금일 테스트 한 내용 중

document.write
XMLHttpRequest
CORS
iframe
등을 사용해서 사내 개발서버에 있는걸 좀 테스트 했습니다.

이상한건.. 되다 안되다 한다는 것이였구요..
android 2.3.3 으로 테스트 했는데..

시간이 많지 않았던 관계로 중단을 했습니다.

- 쉽게 위젯 형태의 App 개발은 가능 하다는 점과 iOS, Android 용 App 으로 변환이 가능 하다는 점에서 높은 점수를 주고 싶내요.
- 앱스프레소의 문제는 아닌듯 하지만 WAC 에서 동작하는 코드가 잘 동작 안되는 점이 살짝 아쉽습니다. (어디의 문제 인지 아직 못찾았내요.. ㅋ)
- 총평은 쉽고 좋다 입니다. ^^

:

WAC 기반의 WebApp 맛보기.

ITWeb/개발일반 2011. 11. 23. 16:55

그냥 필요해서.. 찾아 보던 내용인데 remind 차원에 맛보기 등록.. :)

[주요사이트]
- http://www.wacapps.net : 여기 들어 가셔서 tutorial 보시면 아주 쉽게 구현해 보실 수 있습니다.
- http://developer.android.com/sdk/installing.html#Installing : Eclipse 에서 개발하기 위해서는 ADT plugin 설치를 해야 합니다.
※ 참고로 저는 zip 파일을 다운로드 받아서 패키지 4개를 하나씩 하나씩 따로 따로 설치 했습니다. (방화벽과 보안때문에 이렇게 밖에 안되내요.)

[WAC SDK 설치하기]
- 기본 Eclipse 가 WAC SDK 에 포함이 되어 있기 때문에 ADT plugin 만 추가해 주시면 됩니다.

[WAC 사이트의 WAC App 만들어보기]

얼마전에 W3C 의 Device API WG 관련 북마킹을 했었는데요.
올해 3월에 한국에서 행사가 있었더군요.
- http://www.w3c.or.kr/DAP2011/

어찌 되었건 제가 Web 와 WebApp 에 관심이 많기 때문에.. ㅎㅎ
암튼 세상에는 배울것과 할게 너무 많아요.. ^^;

:

jjeong

'ITWeb/개발일반'에 해당되는 글 489건

Cookie 랑 Web Storage 맛보기.

JavaScript unix timestamp 맛보기.

JavaScript Cookie 맛보기.

Mobile Device API 관련 PDF

COMET 언제쩍 건데.. 그래서 맛보기

DOM Linking Elements : insertBefore, appendChild, replaceChild 맛보기

WAC SDK2.0 에서 AVD 를 못찾을때.

W3C Widget, BONDI, JIL - 너흰 누구냐??

Appspresso 맛보기.

WAC 기반의 WebApp 맛보기.

티스토리툴바