eMotion

Entries Feed

Search results for “Devlog” in entries

There were 19 results found in entries.

웹에서의 쉬운 단축키 구현

Published by Deni, 2007/07/10 00:34 in Devlog.

iLove by julian- 요즘 웹 어플리케이션이 등장하면서 단축키를 지원하는 서비스들이 늘고 있습니다. 역시 그 시작은 GMail이라고 할 수 있습니다. 국내에서도 대표적으로 라이프팟(Lifepod)과 스프링노트(SpringNote)에서 사용하고 있습니다. 물론 웹사이트의 단축키는 오히려 화가 되는 것을 염두에 두어야 할 것입니다.

쓸데없는 이야기는 그만하고 단축키를 쉽게 구현하기 위한 자바스크립트 코드를 소개할까 합니다.

웹에서 단축키를 구현하기 위해서는 윈도우의 이벤트를 받아 키 코드를 검사한 후 해당 코드에 따라 적절히 분기하여 그에 맞는 함수를 호출해 주는 방식으로 작성하여야 합니다. 하지만 이러한 방법 대신에 사용자 친화적인 코드를 이용하여 누구나 쉽게 사용할 수 있는 라이브러리를 소개합니다.

관련 내용 및 코드 다운로드: Handling Keyboard Shortcuts in JavaScript

아래의 예제와 같이 코드를 작성하면 "Ctrl+Shift+X" 키를 눌러 "Hi there!"라는 메시지를 표시할 수 있습니다.

shortcut 함수는 다음과 같이 3개의 인자를 받고 있습니다.

shortcut과 callback 이외에 opt라는 인자가 옵션으로 존재합니다.

type (String)
키 이벤트의 종류를 적습니다. 기본값은 'keydown'으로 키가 눌려졌을 때 실행됩니다. 가능한 값은 'keydown', 'keyup', 'keypress' 입니다.
target (DOM Element)
키 이벤트를 감시할 페이지의 엘리먼트 객체입니다. 기본값은 document로 문서의 모든 키 반응을 감시합니다.
propagate (Boolean)
키 이벤트로 함수를 호출한 후 추가적인 이벤트가 등록되어 있을 때 계속적으로 호출할지를 정해줍니다. 기본값은 false로 다음 이벤트로 전달하지 않습니다.

모든 인자를 기본값으로 호출하면 다음과 같이 됩니다.

지원되는 단축키 목록 및 자세한 내용은 위의 관련 페이지 링크를 참고하세요.

Tags: JavaScript, Shortcut, 단축키, 자바스크립트
Licensed under Creative Commons By-Nc-Sa(Attribution-NonCommercial-ShareAlike) 2.5.
Translate this entry into English.

Permalink 0 Trackbacks 4 Comments

윈도우즈: 아이튠즈의 노래 정보를 미투데이에 싱크하자

Published by Deni, 2007/06/25 19:25 in Devlog.

오늘 소개할 스크립트는 윈도우즈에서 아이튠즈로 듣고 있는 곡명을 미투데이 설명문으로 보여주는 매쉬업입니다. 이미 기존에 맥에서 시도되었던 것을 iTunes COM for Windows SDK를 이용한 WSH(Windows Script Host)로 만들어 봤습니다.

me2DAY with iTunes

사용 방법은 아래의 JScript를 다운받아 아이튠즈가 재생되는 중에 실행하면 됩니다. 실행전에 반드시 에디터 JScript 파일을 열어 첫부분을 자신에 맞게 수정해야합니다. 수정할 부분은 미투데이 사용자 아이디와 사용자 키, 기본 설명문, 이렇게 세부분입니다.

실행이 되면 2분마다 현재 재생중인 음악의 태그 정보를 바탕으로 미투데이의 설명문을 자동으로 변경해줍니다. 아이튠즈를 종료하면 상태를 판단하여 스크립트 프로그램도 종료됩니다. 작업 관리자에 'wscript.exe'라는 이름의 프로세스로 떠있으니 참고하세요.

다운로드: me2DAY with iTunes.zip

아래는 JScript의 소스입니다. 다른 기능을 추가하고 싶은 경우 참고하세요.

/* Configurations
 * --------------------------------------------------
 */
var id = 'myid'; // me2DAY 사용자 아이디
var key = '********'; // me2DAY 사용자 키
var prefix = '친구신청하세요~ ^^;;'; // 기본 설명문

/* Logics
 * --------------------------------------------------
 */
var url = 'http://me2day.net/api/set_description/' + id + '.xml';
var WinHttp;
var iTunes = WScript.CreateObject('iTunes.Application');

try {
  WinHttp = WScript.CreateObject('WinHttp.WinHttpRequest.5.1');
} catch (e) {
  WinHttp = WScript.CreateObject('WinHttp.WinHttpRequest.5');
}

WScript.Echo(
    'iTunes 음악 정보를 me2DAY의 설명문에 출력해 주는 스크립트를 '
  + '시작합니다.\n업데이트는 2분마다 이루어집니다.');

while (true) {
  try {
    update(getInfo());
    WScript.Sleep(120 * 1000);
  } catch (e) {
    WScript.Echo(
        'iTunes가 꺼져있거나 재생중인 트랙이 없습니다.'
      + '\n음악을 재생한 후 다시 실행해 주세요.');
    update(prefix);
    break;
  }
}

/* Required Functions
 * --------------------------------------------------
 */
function getInfo() {
  var value = prefix + ' / ';

var CurrentTrack = iTunes.CurrentTrack;
  value += 'iTunes ♪ '
    + CurrentTrack.Artist + ' - ' + CurrentTrack.Name;

return value;
}

function update(description) {
  WinHttp.Open('POST', url, false);
  WinHttp.SetRequestHeader('Authorization', createAuthorization(id, key));
  WinHttp.SetRequestHeader(
    'me2_application_key',
    'd978d3bceffa15d6aa71aa2659857af3');
  WinHttp.SetRequestHeader(
    'Content-Type',
    'application/x-www-form-urlencoded');
  WinHttp.Send('description=' + encodeURIComponent(description));
}

function createAuthorization(id, key) {
  var nonce = getNonce();
  return 'Basic ' + encodeBase64(id + ':' + nonce + hex_md5(nonce + key));
}

function getNonce() {
  var value = '';
  for (var i = 0; i < 8; i++)
    value += Math.floor(Math.random() * 16).toString(16);
  return value;
}

function encodeBase64(text) {
  var k = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';

var value = '';
  var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
  var i = 0;

while (i < text.length) {
    chr1 = text.charCodeAt(i++);
    chr2 = text.charCodeAt(i++);
    chr3 = text.charCodeAt(i++);

enc1 = chr1 >> 2;
    enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
    enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
    enc4 = chr3 & 63;

if (isNaN(chr2))
      enc3 = enc4 = 64;
    else if (isNaN(chr3))
      enc4 = 64;

value += k.charAt(enc1) + k.charAt(enc2)
          +  k.charAt(enc3) + k.charAt(enc4);
  }

return value;
}

// MD5 via http://pajhome.org.uk/crypt/md5/md5src.html
function hex_md5(s) { return binl2hex(core_md5(str2binl(s), s.length * 8)); }

function core_md5(x, len) {
  x[len >> 5] |= 0x80 << ((len) % 32);
  x[(((len + 64) >>> 9) << 4) + 14] = len;

var a =  1732584193;
  var b = -271733879;
  var c = -1732584194;
  var d =  271733878;

for (var i = 0; i < x.length; i += 16) {
    var olda = a;
    var oldb = b;
    var oldc = c;
    var oldd = d;

a = md5_ff(a, b, c, d, x[i+ 0], 7 , -680876936);
    d = md5_ff(d, a, b, c, x[i+ 1], 12, -389564586);
    c = md5_ff(c, d, a, b, x[i+ 2], 17,  606105819);
    b = md5_ff(b, c, d, a, x[i+ 3], 22, -1044525330);
    a = md5_ff(a, b, c, d, x[i+ 4], 7 , -176418897);
    d = md5_ff(d, a, b, c, x[i+ 5], 12,  1200080426);
    c = md5_ff(c, d, a, b, x[i+ 6], 17, -1473231341);
    b = md5_ff(b, c, d, a, x[i+ 7], 22, -45705983);
    a = md5_ff(a, b, c, d, x[i+ 8], 7 ,  1770035416);
    d = md5_ff(d, a, b, c, x[i+ 9], 12, -1958414417);
    c = md5_ff(c, d, a, b, x[i+10], 17, -42063);
    b = md5_ff(b, c, d, a, x[i+11], 22, -1990404162);
    a = md5_ff(a, b, c, d, x[i+12], 7 ,  1804603682);
    d = md5_ff(d, a, b, c, x[i+13], 12, -40341101);
    c = md5_ff(c, d, a, b, x[i+14], 17, -1502002290);
    b = md5_ff(b, c, d, a, x[i+15], 22,  1236535329);

a = md5_gg(a, b, c, d, x[i+ 1], 5 , -165796510);
    d = md5_gg(d, a, b, c, x[i+ 6], 9 , -1069501632);
    c = md5_gg(c, d, a, b, x[i+11], 14,  643717713);
    b = md5_gg(b, c, d, a, x[i+ 0], 20, -373897302);
    a = md5_gg(a, b, c, d, x[i+ 5], 5 , -701558691);
    d = md5_gg(d, a, b, c, x[i+10], 9 ,  38016083);
    c = md5_gg(c, d, a, b, x[i+15], 14, -660478335);
    b = md5_gg(b, c, d, a, x[i+ 4], 20, -405537848);
    a = md5_gg(a, b, c, d, x[i+ 9], 5 ,  568446438);
    d = md5_gg(d, a, b, c, x[i+14], 9 , -1019803690);
    c = md5_gg(c, d, a, b, x[i+ 3], 14, -187363961);
    b = md5_gg(b, c, d, a, x[i+ 8], 20,  1163531501);
    a = md5_gg(a, b, c, d, x[i+13], 5 , -1444681467);
    d = md5_gg(d, a, b, c, x[i+ 2], 9 , -51403784);
    c = md5_gg(c, d, a, b, x[i+ 7], 14,  1735328473);
    b = md5_gg(b, c, d, a, x[i+12], 20, -1926607734);

a = md5_hh(a, b, c, d, x[i+ 5], 4 , -378558);
    d = md5_hh(d, a, b, c, x[i+ 8], 11, -2022574463);
    c = md5_hh(c, d, a, b, x[i+11], 16,  1839030562);
    b = md5_hh(b, c, d, a, x[i+14], 23, -35309556);
    a = md5_hh(a, b, c, d, x[i+ 1], 4 , -1530992060);
    d = md5_hh(d, a, b, c, x[i+ 4], 11,  1272893353);
    c = md5_hh(c, d, a, b, x[i+ 7], 16, -155497632);
    b = md5_hh(b, c, d, a, x[i+10], 23, -1094730640);
    a = md5_hh(a, b, c, d, x[i+13], 4 ,  681279174);
    d = md5_hh(d, a, b, c, x[i+ 0], 11, -358537222);
    c = md5_hh(c, d, a, b, x[i+ 3], 16, -722521979);
    b = md5_hh(b, c, d, a, x[i+ 6], 23,  76029189);
    a = md5_hh(a, b, c, d, x[i+ 9], 4 , -640364487);
    d = md5_hh(d, a, b, c, x[i+12], 11, -421815835);
    c = md5_hh(c, d, a, b, x[i+15], 16,  530742520);
    b = md5_hh(b, c, d, a, x[i+ 2], 23, -995338651);

a = md5_ii(a, b, c, d, x[i+ 0], 6 , -198630844);
    d = md5_ii(d, a, b, c, x[i+ 7], 10,  1126891415);
    c = md5_ii(c, d, a, b, x[i+14], 15, -1416354905);
    b = md5_ii(b, c, d, a, x[i+ 5], 21, -57434055);
    a = md5_ii(a, b, c, d, x[i+12], 6 ,  1700485571);
    d = md5_ii(d, a, b, c, x[i+ 3], 10, -1894986606);
    c = md5_ii(c, d, a, b, x[i+10], 15, -1051523);
    b = md5_ii(b, c, d, a, x[i+ 1], 21, -2054922799);
    a = md5_ii(a, b, c, d, x[i+ 8], 6 ,  1873313359);
    d = md5_ii(d, a, b, c, x[i+15], 10, -30611744);
    c = md5_ii(c, d, a, b, x[i+ 6], 15, -1560198380);
    b = md5_ii(b, c, d, a, x[i+13], 21,  1309151649);
    a = md5_ii(a, b, c, d, x[i+ 4], 6 , -145523070);
    d = md5_ii(d, a, b, c, x[i+11], 10, -1120210379);
    c = md5_ii(c, d, a, b, x[i+ 2], 15,  718787259);
    b = md5_ii(b, c, d, a, x[i+ 9], 21, -343485551);

a = safe_add(a, olda);
    b = safe_add(b, oldb);
    c = safe_add(c, oldc);
    d = safe_add(d, oldd);
  }
  return Array(a, b, c, d);
}

function safe_add(x, y) {
  var lsw = (x & 0xFFFF) + (y & 0xFFFF);
  var msw = (x >> 16) + (y >> 16) + (lsw >> 16);
  return (msw << 16) | (lsw & 0xFFFF);
}

function bit_rol(num, cnt) { return (num << cnt) | (num >>> (32 - cnt)); }

function binl2hex(binarray) {
  var hex_tab = "0123456789abcdef";
  var str = "";
  for (var i = 0; i < binarray.length * 4; i++) {
    str += hex_tab.charAt((binarray[i>>2] >> ((i%4)*8+4)) & 0xF) +
           hex_tab.charAt((binarray[i>>2] >> ((i%4)*8  )) & 0xF);
  }
  return str;
}

function str2binl(str) {
  var bin = Array();
  var mask = (1 << 8) - 1;
  for (var i = 0; i < str.length * 8; i += 8)
    bin[i>>5] |= (str.charCodeAt(i / 8) & mask) << (i%32);
  return bin;
}

Tags: iTunes, me2day, Windows, WSH, 미투데이, 아이튠즈, 윈도우즈
Licensed under Creative Commons By-Nc-Sa(Attribution-NonCommercial-ShareAlike) 2.5.
Translate this entry into English.

Permalink 0 Trackbacks 0 Comments

자바스크립트 라이브러리별 CSS 쿼리 성능은

Published by Deni, 2007/06/13 19:26 in Devlog.

웹 2.0 시대에 접어들면서 Ajax를 이용하면서 다양한 사용자 인터페이스 방식이 제안되고, 실제 쓰이고 있습니다. 이제는 웹 페이지에서의 드래그&드랍 방식을 이용한 사이트를 쉽게 볼 수 있습니다.

이러한 UX의 높은 품질 뒤에는 다양한 자바 스크립트 라이브러리들의 도움이 컷을 것으로 생각됩니다. 제가 처음 접한 라이브러리는 Prototype 이었습니다. 아직까지도 주력으로 사용하고 있고, 이 라이브러리로 인해 개발 시간을 절반 이하로 줄일 수 있었습니다.

이러한 라이브러리들은 대체적으로 CSS Query를 이용하여 앨리먼트를 선택할 수 있는 기능을 제공해줍니다. CSS Query라는것은 CSS Selector 문법으로 태그들을 선택하고 조작하기위해 만들어진 자바 스크립트 기능을 의미합니다. XML 기반 문서를 다루는 데에도 유용하기 때문에 다른 프로그래밍 언어에서 차용하기도 합니다. Ajax로 페이지를 동적으로 조작할 때 특히 유용하게 사용됩니다.

SlickSpeed

MooTools 사이트에 있는 SlickSpeed Selectors Test 도구를 이용하면, 앞서 설명한 CSS Query의 성능을 각 자바 스크립트 라이브러리별로 비교할 수 있습니다. 비교 대상은 Porotype, jQuery, MooTools, Ext JS, cssQuery, dojo.query입니다.

아래 표에는 현재 PC에 설치되어 있는 브라우져별로 모든 쿼리를 하는데 걸린 시간을 정리해 보았습니다. Safari, Firefox, IE 순서로 성능 차이가 발생하는군요.

라이브러리별 CSS Query 성능 측정 (단위:밀리초) - SlickSpeed
JS Framework	IE6	Firefox	Safari(Win)
prototype 1.5.1	2534	232	136
jQuery 1.1.2dev	5732	5831	968
MooTools 1.2dev	2183	244	188
ext 1.1b1	(*비정상) 1549	1301	(*비정상) 179
cssQuery 2.02	11559	7579	1293
dojo query	1214	446	243

Prototype과 MooTools, dojo.query의 성능이 대체적으로 좋게 나왔습니다. 신뢰성은 각각의 셀렉터별로 틀리기는 하지만 성능이 좋은 라이브러리가 품질 또한 좋았습니다. (Ext JS의 경우 속도는 빠르지만 쿼리된 앨리먼트의 개수가 잘못된 경우가 많았습니다.)

여러분은 어떤 라이브러리를 사용하고 계신가요?

Tags: JavaScript, 성능, 자바스크립트, 테스트
Licensed under Creative Commons By-Nc-Sa(Attribution-NonCommercial-ShareAlike) 2.5.
Translate this entry into English.

Permalink 1 Trackbacks 0 Comments

프로젝트가 실제로 어떻게 진행되는가

Published by Deni, 2007/05/16 13:42 in Devlog.

Project Cartoon 사이트의 글을 번역해 보았습니다. 공감가는 부분이 많으실 겁니다. 직접 가보시면 자신만의 카툰도 만드실 수 있습니다. 아래 그림은 갤러리 페이지에서도 보실 수 있습니다.

프로젝트가 실제로 어떻게 진행되는가

Tags: Cartoon, Fun, PROJECT, 프로젝트
Licensed under Creative Commons By-Nc-Sa(Attribution-NonCommercial-ShareAlike) 2.5.
Translate this entry into English.

Permalink 2 Trackbacks 7 Comments

야후 파이프를 이용한 플톡 피드 위젯

Published by Deni, 2007/04/17 21:49 in Devlog.

예전에 플톡을 티스토리에 달아보자라는 포스트를 작성한 적이 있습니다. 그 때는 야후 파이프의 JSON 서비스를 알지 못해서 John Resig의RSS to JSON Convertor를 이용한 방법을 설명했었습니다.

이 포스트에서는 일반적인 RSS 피드를 야후 파이프를 경유시켜 자바스크립트를 이용한 위젯을 만드는 방법을 설명 드리겠습니다.

먼저 야후 파이프에서 RSS 파이프를 생성하거나 기존에 생성되어 있는 파이프를 선택합니다. 여기에서는 제가 생성한 파이프 모듈을 이용하겠습니다. 이 모듈은 Pipes: PlayTalk Entry Feed 페이지에서 테스트해 볼 수 있습니다. 위쪽에는 최대 피드 크기를 넣고, 아래에는 자신의 플톡 아이디를 입력하면 됩니다. 파이프를 실행하면 제일 아래쪽 도구에 RSS와 JSON 출력이 있습니다. 이 JSON 출력을 자바스크립트로 받아 처리하면 됩니다.

자바스크립트의 처리는 Prototype 라이브러리를 이용합니다.

var id = 'emotion'; // 플톡 아이디
var size = '5'; // 출력 개수
var length = 25; // 항목당 글자 길이
var interval = 1000; // 지연시간 (플톡 때문에 지연될때 조정, 밀리초 단위)

// ----------

window.setTimeout(function pipes() {
  var s = document.createElement('script');
  s.type = 'text/javascript';
  s.src // 다른 모듈 이용하시려면 여기를 변경
    = 'http://pipes.yahoo.com/pipes/pipe.run?_id=wOVHVxPZ2xGjnCJlE5PZnA'
    + '&_render=json&_callback=piper'
    + '&size=' + size + '&id=' + id
    + '&t=' + (new Date()).getTime();
  $$('head')[0].appendChild(s);
}, interval);

function piper(feed) {
  var h = '';
  feed.value.items.each(function(item) {
    h += '<li><a href="' + item.link + '" title="' + item.title + '\n'
      + item.description.stripTags() + '">'
      + ellipsis(item.description.stripTags(), length) + '</a></li>';
  });
  $$('#pipes-widget ul')[0].innerHTML = h;
}

위 소스를 원하는 위치에 넣으시면 됩니다. 태그 부분의 마크업과 스타일 시트 부분은 스킨에 맞게 변경하시면 좋습니다. 단 DIV 태그의 pipes-widget 아이디와 UL은 구조는 지켜주셔야 합니다. 플톡 초기화시 코드를 끼워 넣은 이후 부분의 표시가 지연되는 문제가 생길 때에는 interval 값을 조정하시면 됩니다. 기본 1000으로 되어있어서 1초 후에 피드를 긁어오게 됩니다.

Tags: JavaScript, RSS, Yahoo Pipes, 야후 파이프, 위젯, 자바스크립트, 피드
Licensed under Creative Commons By-Nc-Sa(Attribution-NonCommercial-ShareAlike) 2.5.
Translate this entry into English.

Permalink 2 Trackbacks 2 Comments

플톡 PlayTalk 친구들의 최신 피드 구독하기

Published by Deni, 2007/03/26 18:30 in Devlog.

Pipes: PlayTalk Friends Feed

플톡의 친구 리스트를 이용하여 친구들의 최신 톡을 구독할 수 있는 파이프(Yahoo! Pipes)를 만들었습니다. PlayTalk Friends Feed라는 파이프 페이지로 가셔서 최대 목록과 플톡 아이디를 넣어 사용하시면 됩니다.

파이프를 이용해 피드를 티스토리에 다는 방법이 있으니 참고하세요.

Tags: Pipes, playtalk, 파이프, 플톡
Licensed under Creative Commons By-Nc-Sa(Attribution-NonCommercial-ShareAlike) 2.5.
Translate this entry into English.

Permalink 0 Trackbacks 0 Comments

웹 문서의 DOCTYPE.. 올바로 사용하자

Published by Deni, 2007/02/20 15:37 in Devlog.

HTML 표준에 따르면 각각의 HTML 문서는 문서 형식을 선언할 필요가 있습니다. DOCTYPE 혹은 Document Type Declaration이라고 합니다. 태그로 시작하는 이러한 선언은 브라우저 혹은 HTML 문법 검사기에게 어떤 판번호(Version)의 HTML로 작성된 페이지인지를 알려주게 됩니다. IE(Internet Explorer)에서는 DOCTYPE에 따라 박스 모델을 해석하는 방법이 다르기 때문에 동일한 화면 구현물을 얻기 위해서 필히 명시해 주어야 합니다.

아래는 웹 페이지에 사용되는 일반적인 문서 형식을 정리한 것입니다.

HTML 2.0

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
HTML 2.0은 대다수의 브라우저가 지원하는 문서 형식입니다. 시작적으로 보여지는 엘리먼트 위주로 구성되어 있고 테이블, 프레임, 다국어 등은 지원되지 않습니다.

Compact HTML 2.0

<!DOCTYPE HTML PUBLIC "-//BBSW//DTD Compact HTML 2.0//EN">
HTML 2.0의 간략 버전입니다.

HTML 3.2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN" "http://www.w3.org/MarkUp/Wilbur/HTML32.dtd">
HTML 3.2부터 제한적으로 스타일 시트를 지원하기 시작했습니다. 역시 프레임과 다국어 등은 지원되지 않습니다.

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ko">
HTML 4.01 Strict는 HTML 4.01의 제한된 엘리먼트를 제외시켜 좀 더 엄격한 규칙을 적용합니다. 프레임과 앵커의 타켓 속성도 사용하지 못하도록 정하고 있습니다. 이러한 제한을 통해 웹의 접근성과 구조적인 문제를 어느 정도 해결할 수 있습니다.

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
HTML 4.01 Strict 보다는 좀 더 유연성을 가질 수 있는 문서 형식입니다. BASEFONT 혹은 CENTER 등의 제한된 엘리먼트를 허용합니다.

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html lang="ko">
HTML 4.01 형식의 프레임 구조를 정의하는 문서 형식입니다. 프레임을 정의하는 HTML 4.01 Transitional 문서를 대체하기 위해 사용합니다.

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
XHTML 1.0 Strict는 HTML 4.01 Strict와 동일합니다. 문법이 XML 구조를 따라야 한다는 점만이 다릅니다.

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
HTML 4.01 Transitional의 XML 버전입니다.

XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
HTML 4.01 Frameset의 XML 버전입니다.

XHTML 1.1

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
XHTML 1.1은 XHTML 1.0 Strict와 별 차이는 없습니다. 다만 완벽한 XML 표준 문법만을 사용하여야 합니다. Transitional 혹은 Frameset 버전이 제공되지 않습니다. 가장 최근 규격이어서 브라우저에 따라 지원되지 않을 수도 있습니다. 잘 고려한 후 사용해야 하겠습니다.

<html> 태그 안에 쓰인 lang 속성은 CSS Design Korea 포럼의 UI Design 관련 코멘트에 자세히 설명되어 있으니 그 쪽을 참고하시면 됩니다.

Tags: DOCTYPE, HTML, Web Standard, 웹 표준
Licensed under Creative Commons By-Nc-Sa(Attribution-NonCommercial-ShareAlike) 2.5.
Translate this entry into English.

Permalink 0 Trackbacks 4 Comments

JavaScript를 이용한 OBJECT 객체의 추가

Published by Deni, 2007/01/15 18:41 in Devlog.

이올라스(Eolas)테크놀로지와 캘리포니아대학 등이 보유한 특허를 침해했다며 낸 소송에 MS가 패하면서 플러그인 객체를 활성화 하기 위해 사용자가 직접 활성화 시켜 주어야 하는 패치가 적용되었습니다. 이를 피하기 위해서 사용하는 방법이 외부 스크립트 파일을 이용하여 객체를 구성해 주는 방법입니다.

이번 글에서는 Object 객체를 쉽게 링크하기 위한 스크립트와 사용 방법을 적어볼까 합니다. 먼저 object.js의 소스입니다.

위 코드에 따르면 el, attr, prop를 인자로 건네 주어야 합니다. el은 해당 Object가 문서 내에서 위치할 엘리먼트를 지칭하고, attr은 OBJECT 태그의 속성, Prop는 OBJECT 태그 내부의 파라미터를 말합니다.

위 함수를 이용한 샘플 코드는 다음과 같습니다.

Tags: flash, HTML, JavaScript, 자바스크립트, 플래쉬
Licensed under Creative Commons By-Nc-Sa(Attribution-NonCommercial-ShareAlike) 2.5.
Translate this entry into English.

Permalink 0 Trackbacks 0 Comments

비트 연산자를 이용한 다중 플래그 처리

Published by Deni, 2006/12/05 10:06 in Devlog.

Binary Incrementing Machine

유닉스에서의 권한 코드(Read, Write, Execute) 같이 하나의 값으로 다중 플래그의 켜짐과 꺼짐을 표현할 수 있습니다. 이 글에서는 C에서의 내용을 바탕으로 Java에서의 활용 방법을 설명합니다.

비트 연산자에는 시프트 연산자를 제외하면 &(and), |(or), ^(xor), ~(비트 반전)의 4개 연산자가 존재합니다. 각각에 대해 살펴보면,

& 연산 : 양쪽 모두 1일 경우에만 1이라는 결과가 나옵니다.
| 연산 : 양쪽 모두 0일 경우에만 0이라는 결과가 나옵니다.
^ 연산 : |(or)와 비슷하지만 양쪽 모두 1일 경우에만 0이라는 결과가 나옵니다.
~ 연산 : 모든 비트를 반전시킵니다. 즉, 1의 보수를 의미합니다.

여기에서 설명한 연산자는 무부호(Unsigned) 정수에 대해서만 동작하게 됩니다. 때문에 정수 형태의 선언이 아닌 16비트 선언이 사용됩니다. 우선 각각의 플래그를 선언해 보도록 하겠습니다.

다중 플래그 처리를 위해서는 1, 2, 4, 8과 같은 2진수 형식으로 증가되어야 합니다. 위에서 정의된 각 플래그 상수값을 2진수로 변환해 보면 다음과 같습니다.

위 내용과 같이 각 플래그 상수간의 비트 중복이 없어야 합니다. 비트 연산을 하기 위한 필수 사항입니다. 각각의 상수를 비트 연산 한다고 하면 2진수의 각 자리마다 논리 연산을 수행해 준다는 의미입니다.

FLAG_A와 FLAG_D를 |(or) 연산하면 아래와 같이 "0000 1001"이라는 FLAG_A와 FLAG_D가 동시에 표현된 값이 나옵니다.

위에서 나온 "0000 1001"라는 값에 FLAG_D의 보수(1111 0111)를 &(and) 연산하면 "0000 0001"이라는 FLAG_D를 끈 값이 나옵니다.

즉 다음과 같이 하나의 값에 복수의 플래그를 켜거나 끌 수 있습니다.

그리고 아래와 같이 플래그가 켜져 있는지, 혹은 지정한 플래그들 외에 다른 플래그가 켜져있는지 검사하는 논리식이 가능합니다.

각각의 논리식은 2진수 변환 상태에서 &(and), |(or), ~(비트 반전)의 연산을 따라해 보면 확실히 이해할 수 있습니다.

참고 : 비트 연산자 - Superkkt Blog

Tags: BIT, Flag, Java, Programming, 비트 연산, 자바, 프로그래밍, 플래그
Licensed under Creative Commons By-Nc-Sa(Attribution-NonCommercial-ShareAlike) 2.5.
Translate this entry into English.

Permalink 1 Trackbacks 1 Comments

IE6을 IE7과 같이 돌려보자

Published by Deni, 2006/12/04 12:15 in Devlog.

IEBlog에 IE6을 테스트 환경으로 돌릴 수 있는 방법 이 올라왔습니다. Standalone IE6 이 이미 있는 상태지만 세션이 유지되지 않는 문제 때문에 정상적인 브라우저 테스트가 어려운 상태였습니다. IEBlog에서는 Virtual PC를 이용하여 IE6의 렌더링 문제를 테스트 할 수 있도록 pre-activated Windows XP SP2, IE6 and the IE7 Readiness Toolkit 이미지를 제공하고 있습니다.

IE6 Test VPC

VPC용 IE6 Test 이미지는 다음 내용을 포함하고 있습니다.

Windows XP Professional SP2 + high-priority fixes through November 2006
Internet Explorer 6.0
Internet Explorer 7 Readiness Toolkit 2.0

이미지를 이용하여 IE6 테스트 OS로 부팅하기 위해서는, 공개로 풀려있는 Virtual PC 2004 버전과 IE6 테스트 VPC 이미지를 다운로드 하여야 합니다.

Virtual PC 2004 SP1 다운로드 (18.2 MB)
IE6 테스트 VPC 이미지 다운로드 (495.8 MB) *XP 정품 인증이 필요합니다.

제공되는 이미지는 Windows XP SP2에 11월 최신 보안 패치가 적용되어 있고 2007년 4월 1일부로 라이센스가 만료됩니다. 또한 하드 드라이브에 대한 엑세스가 금지되는 등 브라우저 실행 이외의 기능은 거의 막혀 있습니다.

모든 기능을 사용하기 위한 팁:
제한으로 막혀있는 기능을 풀기 위해서는 "/시작 /실행"에서 "gpedit.msc"를 입력하여 Group Policy 콘솔을 띄웁니다. 왼쪽 트리 구조에서 "/User Configuration /Administrative Templates" 아래의 "Startup Menu and Taskbar"와 "Desktop" 폴더에서 오른쪽의 "Enabled"로 되어 있는 상태를 모두 "Not Configured"로 변경하여 줍니다. 이제 모든 기능 제한이 풀리게 됩니다.

Group Policy

설치 과정은 간단합니다. Virtual PC 2004 버전을 인스톨 한 후 실행하여 새 VM을 만들어 주고 설정에서 Hard Disk 1을 다운로드 받은 IE6Test.vhd로 지정해 주면 됩니다. 네트워크 설정을 위해서는 Networking에서 어댑터 방식을 NAT로 설정해야 합니다.

한글 사이트를 보기 위해서는 한글 언어팩을 설치하여야 합니다. 기본적으로 포함되어 있지 않습니다. 어쩔 수 없이 기존에 가지고 계신 Windows XP CD를 이용하여 설치해야 할 것으로 보입니다. 나중에 Windows XP Product Key를 변경하여 라이센스 만료 이후에도 사용할 수 있을 것으로 보입니다.

Tags: Browser, IE6, IE7, web, 브라우저, 웹
Licensed under Creative Commons By-Nc-Sa(Attribution-NonCommercial-ShareAlike) 2.5.
Translate this entry into English.

Permalink 0 Trackbacks 3 Comments

Spring - HashMap을 Command 객체로 사용하기

Published by Deni, 2006/12/01 17:05 in Devlog.

이번 글에서는 HashMap을 Command 객체로 이용하기 위한 방법을 설명합니다.

원래 Command 객체로 이용하기 위해서는 빈즈 표준(VO 필드와 Getter 및 Setter)을 준수하는 POJO 객체를 생성하여 컨트롤러에게 알려 주어야 합니다. 하지만 Struts의 DynaActionForm과 같은 사용법에 익숙해져 있는 저에게 있어서는 요청마다 그에 적절한 사용자 객체를 생성해 주어야 한다는 것이 불편하게 느껴졌습니다.

그래서 생각한 것이 Spring의 AOP에서 제공되는 MethodInterceptor를 이용하여 HashMap 객체를 채워주는 방법입니다. MultiActionController와 같이 사용하도록 구현했기 때문에 내부적인 로직은 MultiActionController를 참고하였습니다.

먼저 MethodInterceptor를 구현한 RequestValueInterceptor의 소스는 다음과 같습니다.

package web.interceptor; import java.util.Enumeration; import java.util.HashMap; import java.util.Iterator; import java.util.Map; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import org.aopalliance.intercept.MethodInterceptor; import org.aopalliance.intercept.MethodInvocation; import org.springframework.web.multipart.MultipartFile; import org.springframework.web.multipart.MultipartHttpServletRequest; import org.springframework.web.servlet.ModelAndView; public class RequestValueInterceptor implements MethodInterceptor { /** * @see org.aopalliance.intercept.MethodInterceptor * #invoke(org.aopalliance.intercept.MethodInvocation) */ @SuppressWarnings("unchecked") public Object invoke(MethodInvocation invocation) throws Throwable { if (invocation.getMethod().getReturnType().equals(ModelAndView.class)) { Class[] params = invocation.getMethod().getParameterTypes(); if (params.length >= 3 && params[0].equals(HttpServletRequest.class) && params[1].equals(HttpServletResponse.class) &&!params[params.length - 1].equals(HttpSession.class) && params[params.length - 1].equals(HashMap.class)) { HttpServletRequest request = (HttpServletRequest) invocation.getArguments()[0]; HashMap<String , Object> map = new HashMap<String , Object>(); Enumeration<String> enumeration = request.getParameterNames(); while (enumeration.hasMoreElements()) { String name = enumeration.nextElement(); String[] values = request.getParameterValues(name); if (values != null) { map.put(name, values.length > 1 ? values : values[0]); } } if (request instanceof MultipartHttpServletRequest) { MultipartHttpServletRequest multi = (MultipartHttpServletRequest) request; Map files = multi.getFileMap(); Iterator<Map.Entry<String , MultipartFile>> iterator = files.entrySet().iterator(); while (iterator.hasNext()) { Map.Entry<String , MultipartFile> entry = iterator.next(); String key = entry.getKey(); MultipartFile value = entry.getValue(); if (!value.isEmpty()) { map.put(key, value); } } } invocation.getArguments()[params.length - 1] = map; } } return invocation.proceed(); } }

MultiActionController의 로직과 같이 요청 메소드를 리턴값과 시그니처로 판별하여 HashMap에 값을 채우고 있습니다. MultipartHttpRequest인 경우도 고려하여 첨부된 파일도 추가적으로 채워줍니다. 다만 같은 파라미터명으로 전달된 배열 속성의 첨부 파일은 고려하지 않았습니다. Spring에서 배열 속성의 첨부 파일에 대한 문제는 SteelHeart Rocks님의 Spring MultipartFile 삽질기에 잘 나와 있습니다.

위 MethodInterceptor의 대상이 되는 것은 MultiActionController에 위임되는 객체로써 다음과 같은 형식으로 되어 있어야 합니다.

package foo; import java.util.HashMap; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.springframework.web.servlet.ModelAndView; public class FooAction { public ModelAndView actionName( HttpServletRequest request, HttpServletResponse response, HashMap<String , Object> form) throws Exception { // Some logic return new ModelAndView("..."); } }

이제 위에서 작성한 것을 가지고 요청 처리 객체(MultiActionController에 위임하여 처리하도록 한 객체)로부터 가로채기 위해 Spring 설정 파일에 등록하도록 하겠습니다.

게으른 개발자를 위해 제공되는 DefaultAdvisorAutoProxyCreator를 이용하여 설정하였습니다. DefaultAdvisorAutoProxyCreator는 일반적이고 굉장히 강력한 자동 프록시 생성자로, 컨텍스트 내에 생성되어 있는 Advisor 모두를 순회하면서 Pointcut을 설정하게 됩니다.

Advisor와 Pointcut을 엮기 위해서 정규식 표현이 가능한 RegexpMethodPointcutAdvisor를 사용하였습니다. 이제 ~Action 객체의 모든 메소드 호출을 가로채 (요청을 처리하는 메소드일 경우) HashMap을 채우게 됩니다.

남은 부분인 Validation에 대해서는 추가적으로 살펴 보아야 할 것 같습니다.

Tags: Java, Spring, 스프링, 자바
Licensed under Creative Commons By-Nc-Sa(Attribution-NonCommercial-ShareAlike) 2.5.
Translate this entry into English.

Permalink 0 Trackbacks 0 Comments

Spring - 위임을 통한 MultiActionController의 사용

Published by Deni, 2006/12/01 16:08 in Devlog.

Spring은 모두 기능적으로 그룹화되는 한개의 컨트롤러로 다중 액션을 합치도록 하는 다중액션(multi-action) 컨트롤러를 제공하고 있습니다. MultiActionController가 그것입니다. 이 객체는 메소드이름으로 요청을 맵핑하는 능력을 가지고 있으며 하나의 컨트롤러로 많은 요청들을 공통적으로 처리하고자 할때 편리합니다.

MultiActionController를 이용하는 방법은 두 가지가 존재합니다. 하나는 다중 액션 컨트롤러를 상속하여 구현하는 것이고 다른 방법은 별도의 클래스를 위임Delegate하여 처리할 수도 있습니다. 여기에서는 위임을 사용하여 설정 파라미터에 주입하는 방법을 설명하도록 하겠습니다.

MultiActionController에서 요구하는 요청 처리 메소드는 몇가지 제약 사항을 가지고 있습니다. 내부적인 처리 방식은 실제 구현 코드를 통하여 파악할 수 있습니다. 즉 다음과 같이 정리할 수 있습니다.

요청 처리 메소드는 반드시 ModelAndView 객체를 반환해야하고, 첫번째 인자로 HttpServletRequest, 두번째 인자로 HttpServletResponse를 가져야 합니다. 코드에서 보면 약간의 유동적인 부분까지 허락해 놓았는데 다음과 같이 추가적인 인자값을 선택할 수도 있습니다.

ModelAndView actionName(HttpServletRequest request, HttpServletResponse response);
ModelAndView actionName(HttpServletRequest reqeust, HttpServletResponse response, Exception errors);
ModelAndView actionName(HttpServletRequest request, HttpServletResponse response, HttpSession session);
ModelAndView actionName(HttpServletRequest request, HttpServletResponse response, Object command);
ModelAndView actionName(HttpServletRequest request, HttpServletResponse response, HttpSession session, Object command);

위와 같은 메소드 시그니처를 가지는 클래스를 위임하여 MultiActionController를 사용할 수 있습니다. 위에서 보여지는 내용 중에 command 대상이 되는 객체는 기본 생성자를 가지고 있어야 합니다. 즉, 인터페이스 객체는 올 수 없습니다. 파라미터의 Object 타입에 따라 리플렉션 되어 자동적으로 command 객체의 값이 채워지게 됩니다.

위 내용에 따란 위임을 통한 설정 및 구현 코드는 다음과 같이 작성합니다.

먼저 XML 설정 파일은 다음과 같습니다.

다음으로 FooActionImpl의 인터페이스는 다음과 같을 것입니다.

public interface FooAction { //... public ModelAndView myaction(HttpServletRequest request, HttpServletResponse response, Foo command) throws Exception; //... }

이제 정의한 MethodNameResolver에 의해 위임된 객체의 실제 메소드가 호출되게 됩니다.

다음 글에서는 command 객체로써 HashMap을 사용하는 방법에 대해 소개하도록 하겠습니다.

Tags: Java, MultiActionController, Spring, 스프링, 자바
Licensed under Creative Commons By-Nc-Sa(Attribution-NonCommercial-ShareAlike) 2.5.
Translate this entry into English.

Permalink 0 Trackbacks 0 Comments

블럭의 테두리를 둥글게.. Nifty Cube

Published by Deni, 2006/10/13 22:57 in Devlog.

Nifty Corners Cube(tm)

Web 2.0 디자인의 특징 중 하나가 둥근 모서리 처리라고 합니다. 하지만 IE나 FireFox등의 웹 브라우저에서 CSS Level 3가 아직 지원되지 않아서 9개의 DIV(Division) 혹은 3x3의 테이블을 만들어 이미지로 처리하는것이 대체적이었습니다. 그 와중에 웹 표준이 강조되면서 지저분한 코드가 문제가 되기도 했습니다.

그 와중에 2005년 4월에 Nifty Corners가 나오면서 모든 문제가 사라졌습니다. 불필요한 마크업과 이미지를 필요로 하지 않아 둥근 모서리를 표현하기 위해 제일 많이 사용되는 라이브러리가 아닐까 생각합니다.

그 1년이 지나 Nifty Cube라는 이름의 종 버전으로 공개되었습니다. 기존 버전에서의 개별 로딩 방식과 복잡한 함수 호출 부분의 단순화와 추가적인 기능, 전체적인 최적화가 주 변경사항입니다.

Nifty Cube 예제

라이브러리를 사용하려면 Nifty Cube 페이지의 제일 하단에 링크되어 있는 파일을 다운로드 받습니다. 사용 방법은 동일한 페이지에서 13개의 다양한 예제로 설명되어 있습니다.

Tags: Cifty Cube, CSS, Nifty Corners Cube, Web Design, 웹 디자인
Licensed under

eMotion

eMotion

Search results for “Devlog” in entries

웹에서의 쉬운 단축키 구현

Trackbacks to this entry

윈도우즈: 아이튠즈의 노래 정보를 미투데이에 싱크하자

Trackbacks to this entry

자바스크립트 라이브러리별 CSS 쿼리 성능은

Trackbacks to this entry

프로젝트가 실제로 어떻게 진행되는가

Trackbacks to this entry

야후 파이프를 이용한 플톡 피드 위젯

Trackbacks to this entry

플톡 PlayTalk 친구들의 최신 피드 구독하기

Trackbacks to this entry

웹 문서의 DOCTYPE.. 올바로 사용하자

HTML 2.0

Compact HTML 2.0

HTML 3.2

HTML 4.01 Strict

HTML 4.01 Transitional

HTML 4.01 Frameset

XHTML 1.0 Strict

XHTML 1.0 Transitional

XHTML 1.0 Frameset

XHTML 1.1

Trackbacks to this entry

JavaScript를 이용한 OBJECT 객체의 추가

Trackbacks to this entry

비트 연산자를 이용한 다중 플래그 처리

Trackbacks to this entry

IE6을 IE7과 같이 돌려보자

Trackbacks to this entry

Spring - HashMap을 Command 객체로 사용하기

Trackbacks to this entry

Spring - 위임을 통한 MultiActionController의 사용

Trackbacks to this entry

블럭의 테두리를 둥글게.. Nifty Cube