Graceful Degradation

Graceful Degradation 은 “우아한 낮춤”, “적절한 퇴보”, “성능 저하” 등 여러가지로 번역되고 있습니다.

의미는, 먼저  최신의 기술 기반 혹은 최신의 기기에서 동작하는 기능을 만들고 나서 오래된 기술 기반 혹은 오래된 기기에서도 유사하게 (성능을 낮춰서라도) 동작하도록 조치하는것을 말합니다. 이런 의미에서 위의 번역들은 모두 틀리지 않다고 할 수 있겠습니다. (광의적으로 “성능 저하”도 틀리지는 않지만 웹 개발의 관점에서 보면 사용자 경험을 낮춰서라도 기능을 지원하는 것이기 때문에 “성능 저하”는 맞지 않을 것 같네요.)

※ 컴퓨터 시스템에서의 허용 오차 시스템(Fault tolerant system) 과 유사하다고 할 수 있습니다. 허용 오차 시스템은 프로그램 구동 환경에 문제가 생겨도 프로그램이 정지하지 않고 성능을 낮추면서 프로그램 구동을 지속하도록 하는 시스템을 말합니다.

우리가 잘 알고 있는 예를 들자면 IMG 태그에 alt 속성을 지정하는걸 들 수 있겠네요. 이미지를 표시하는 브라우저에서는 이쁘게 이미지를 표시하지만 텍스트 브라우저라든지 이미지를 렌더링하지 못하는 브라우저에서는 alt 속성에 부여한 대체 텍스트를 표시하도록 구성 합니다. (이 예에서는 성능을 낮춘다기보다 사용자 경험을 낮춰서라도 … 의 표현이 어울리겠네요. )

javascript 관점에서 Graceful Degradation 을 보자면 NOSCRIPT 라는 태그를 들 수 있습니다. 보통 NOSCRIPT 는 두가지 방식으로 사용됩니다.

NOSCRIPT (대체 콘텐츠 제공)

<script type="text/javascript" src="slide.js"></script>
<noscript>
<ul>
<li><a href="some url"><img src="1.jpg" alt="image 1"/></a></li>
<li><a href="some url"><img src="2.jpg" alt="image 2"/></a></li>
<li><a href="some url"><img src="3.jpg" alt="image 3"/></a></li>
</ul>
</noscript>

위의 예제에서 slide.js 는 서버로부터 이미지 3개를 받아 사용자 경험이 풍부한 스라이드 쇼를 만드는 스크립트입니다. (있다고 칩시다 –;) 바로뒤에 NOSCRIPT 태그를 사용해 스크립트가 동작하지 않는 브라우저에게 대신할 수 있는 콘텐츠를 제공하고 있습니다.

꽤 괜찮은 방법이라고 생각합니다. 자바스크립트가 구동되지 않는 환경에서도 콘텐츠에 접근할 수 있으며 IMG에 alt 를 제공하고 링크까지 걸려 있어 검색엔진도 좋아하는 형태입니다.

이 예에서의 문제는 NOSCRIPT 태그의 근본적인 문제입니다. 브라우저는 자바스크립트를 지원하지만 자바스크립트 파일을 통제하는 네트웍 환경 (보안상의 이유로?)에 있거나 자바스크립트를 다운로드 하지 못한 경우 사용자는 아무것도 볼 수 없게 됩니다.

NOSCRIPT (자바스크립트를 켜세요 ?)

<script type="text/javascript"  src="slide.js"></script>
<noscript>
<p>자바스크립트를 지원하는 브라우저를 사용하거나, 자바스크립트를 활성화 시켜 주세요</p>
</noscript>

우리는 사용자가 왜 자바스크립트가 동작하지 않는 브라우저를 사용하는지, 자바스크립트를 비활성화 시켰는지 알지 못합니다. 그런 상황에 사용자에게 “이래라, 저래라” 하는것은 좋은 방법이 아닙니다. 그리고 위 지시 문은 사용자가 자바스크립트가 뭔지 알고 있고, 자바스크립트를 활성화 시킬 수 있다고 가정하고 있습니다. 하지만, 태반의 사용자가 이런 사항 잘 알지 못합니다. 순전히 개발자의 관점에서 작성된 겁니다.

반성합니다 !! 저도 두번째 예제 코드를 무수히 만들었습니다. 변명을 하자면 KADO-WAH 초기 버전에서 (지금은 안 그렇죠?) SCRIPT 태그 이후에 NOSCRIPT 가 없는 경우 오류 (경고?)로 잡았었습니다. 그래서 기계적으로 SCRIPT 태그가 있는 곳에 NOSCRIPT (자바스크립트를 켜세요) 를 넣었고, 이게 또 HEAD 안에서는 P 태그 등이 올 수 없기 때문에 모든 SCRIPT/NOSCRIPT 태그를 BODY 밑으로 내리는 작업을 했습니다.  반성합니다.

Graceful Degradation 접근 방법

위의 두가지 예제를 보면 구현 모양은 다르지만 동일한  Graceful Degradation 접근 방법을 사용하고 있습니다.

자바스크립트로 slide.js 라는 사용자 경험 풍부한 기능을 먼저 만들고 자바스크립가 지원되지 않는 환경을 위해 NOSCRIPT를 이용해 추가(개선) 작업을 하고 있습니다. 이것이 뒤에서 말하려는 Progressive Enhancement 과 대조되는 부분입니다.

Progressive Enhancement

“점진적 향상” 이라고 번역할 수 있겠습니다.

말 그대로 기능을 점진적으로 향상시키는것을 말합니다. 바로 웹과 결부해서 말하자면

1. HTML 로만 콘텐츠를 구성합니다. (CSS 를 지원하지 않는 브라우저에서도 접근 가능합니다.)
2. CSS 로 시각적인 향상을 꾀합니다. (HTML은 이미 구성되었으므로 외부 CSS파일이 적당하겠네요.)
3. Javascript 를 적용해 사용자 경험을 향상 시킵니다. (역시 외부 js 파일을 두고 이벤트를 가로채는 방법으로 사용해야겠네요)

1.2.3 의 순서로 점차적으로 향상 시키고 있습니다. 이렇게 구현했을 때 나중에 나온 기술(css, javascript)들이 지원되지 않더라도 콘텐츠에 접근하는데 무리가 없습니다. 추가로 얻을 수 있는 장점은 이 방법을 사용하면 밑에 예제를 봐도 알겠지만 구조, 표현, 동작이 자연스럽게 분리된다는 점입니다. 단계적으로 html, css, js 가 추가되기 때문입니다. (솔깃하네요.)

직접 Progressive Enhancement 방법을 사용해 구현을 해 보겟습니다. 예제로는 어느 사이트에나 있는 FAQ를 사용합니다.

1. HTML 구성

<h1>자주답변하는 질문들</h1>
<dl id="faq-list">
<dt>백업파일(*.bak)을 생성하지 않는 방법은?</dt>
<dd>'기본설정'->'파일' 에서 '저장시 백업 파일 생성' 옵션을 제거하시면 됩니다.</dd>
<dt>업그레이드 후 이전 설정이 없어진 경우.</dt>
<dd>이전 버전을 올바르게 설치하지 않은 경우 일어나는 현상입니다. 이런 경우에는 '도구'->'INI 파일 디렉토리' 메뉴 옵션을 실행해서 이전 설정 (*.ini 파일)이 있는 디렉토리를 지정해 주십시오.</dd>
<dt>사용자 정의 stx, acp, ctl 파일을 추가하는 방법은?</dt>
<dd>
<p>*.STX 파일과 *.ACP 파일을 설정하는 방법</p>
<ol>
<li>'기본설정' 대화상자에서 '설정 및 구문강조' 페이지를 선택합니다.</li>
<li>원하는 파일 종류를 선택하거나 원하는 파일 종류가 없는 경우 '추가' 버튼을 누른 후 '파일 확장자' 란에 파일 확장자를 지정합니다.</li>
<li>STX 와 ACP 파일의 완전한 경로를 '구문 파일' 과 '자동 완성' 란에 지정합니다.</li>
</ol>
</dd>
</dl>

위의 FAQ는 에디트플러스 사이트에서 가져왔습니다. FAQ 목록에 DL 을 사용하는게 적절한지는 논외로 하겠습니다. HTML 만 사용했을 때 질문과 답변을 구분할 수 있도록 하는 목록 태그로는 적절하다고 생각해서 사용했습니다.

HTML만 적용된 화면

1단계에서 중용한 건 의미 있는 마크업을 논리적인 순서에 따라 구축하는게 중요하겠습니다. 물론, 이를 만족하기 위해서는 웹 표준을 준수하는게 우선되어야 할거고요.

하지만, 기획팀 으로부터 넘어온 스토리보드, 화면설계와 디자인팀으로 부터 잘려 넘어온 이미지들을 보고 있으면 당최 논리적으로 짜보기가 두려워 집니다. 뭐, 이런걸 잘 하는것도 우리의 능력중의 하나라고 봐야겠습니다. (전 멀었습니다.;;)

2. CSS 적용

body,dl,dt,dd {margin:0; padding:0;}
html {font-size:78%;}
html body {font-size: 1em;}
h1 {border:1px dotted #ccc; background:#eee; margin: 0 0 5px 0; padding:5px; font-size:1.4em;}
dt,dd {border-bottom:1px solid #ccc;line-height:1.5em;}
dt {background:black url(images/q.png) no-repeat left center; color:white; padding:7px 0 7px 25px; cursor:pointer;}
dd {background: #eee; padding:10px;}

CSS 까지 적용된 화면

네, 이쁘지 않은거 압니다. 제 미적감각이 이정도입니다. (사실, 최선을 다하지 않았다고 변명을 … ㅠㅠ)

3. javascript 적용

window.onload = function() {
var selectedQ = 0;
var dts = document.getElementsByTagName('dt');
var dds = document.getElementById('faq-list').getElementsByTagName('dd');
for(var i = 0, n = dts.length; i < n; i++) {
dds[i].style.display = (i == 0) ? 'block' : 'none';
dts[i].idx = i;
dts[i].onclick = function() {
if (selectedQ != this.idx) {
dds[selectedQ].style.display = 'none';
dds[this.idx].style.display = 'block';
selectedQ = this.idx;
}
};
}
};

javascript 까지 적용된 화면

네, 썩 좋지 않은거 압니다. (사실, 돌아가게 만드는게 우선이엇다는 변명을 … ㅠㅠ 정말 오랜만에 mootools 없이 javascript 만들어봤네요;;)

좋지 않은 예이긴 하지만, HTML → CSS → javascript 수순으로 점진적으로 향상시키고 있음을 주목해주세요.

위의 예는 faq.htm 에서 보실 수 있습니다. (ie8, firefox 에서만 테스트 되었습니다.)

정리

구현할 때 “누가 요새 javascript 안되는 브라우저를 쓰겠어?” 라는 생각이 들 정도로 자바스크립트는 대부분의 브라우저에서 지원하고 있는게 사실입니다. 사실, 그냥 막 써도 이로인한 불평(자바스크립트가 안되는 환경에서의 불평)도 들어본적이 없습니다. 아마, 사용자들 스스로가 감내하고 있겠지요. 하지만, 웹 접근성을 생각하고 이를 보장하고자 한다면 자바스크립트에 의존하는 코드를 사용해서는 안되겠습니다. href=”javascript:…” , href=”#” onclick=”" 이러 코드 때문에 얼마나 많은 시간을 웹 접근성 개선을 위해 허비했는지 … Progressive Enhancement  방법을 수행하는게 쉬운것만은 아닙니다. 아마 Graceful Degradation 과 비교해서 시간, 노력 등의 자원을 더 필요로 할겁니다. 기 구축된 사이트를 개선하는 작업에 있어서는 Progressive Enhancement 보다 Graceful Degradation 을 선택하는게 더 현명한 방법일지도 모르겠습니다. 하지만 잊지말아야 할 원칙 하나는 “Web for All”. 팀 버너스 리의

웹의 힘은 그것의 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.
(The power of the Web is in its universality, Access by everyone regardless of disability is an essential aspect.)

라는 것이겠지요.

관련 지침

• 3.3.1 (콘텐츠의 선형화) 콘텐츠는 논리적인순서로 제공해야 한다.
• 4.1.1 (마크업 오류 방지) 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.

이런겁니다. 콤보박스가 나오고 목록에서 항목을 선택하면 새창으로 해당 사이트가 열립니다. 코드는 아래와 같습니다.

<!-- 코드 #1 -->
<p>
관련 사이트 바로가기
<select onchange="if(this.value != '') window.open(this.value);">
<option value="">관련사이트 목록</option>
<option value="http://twitter.com/yangkun7">양군의 트위터</option>
<option value="http://picasaweb.google.com/yangkun7">건이네 웹앨범</option>
<option value="http://www.greenfarm.pe.kr/">푸른농장 (준혁,서영이네)</option>
</select>
</p>

#1. 문제점

• SELECT 양식에 대한 설명이 필요합니다 . (KWCAG 1.0 항목 3.3 온라인 서식 구성)
• 키보드만 이용할 때, 해당 컨트롤로 포커스가 이동하고 이동 키(↓↑)를 이용해 그 목록을 보려 하면 바로 첫 번째 항목의 사이트로 이동해 버립니다. (KWCAG 1.0 항목 2.4 키보드로만 운용 가능)

#1. 개선

1. SELECT 양식에 대한 LABEL 추가
2. onchange 이벤트 제거
3. [이동] 버튼 추가
4. [이동] 버튼 클릭 시 해당 사이트로 이동하도록 변경.

개선된 코드는 다음과 같습니다.

<!-- 코드 #2 -->
<p>
<label for="relSites">관련사이트 바로가기<label>
<select id="relSites">
<option value="">관련사이트목록</option>
<option value="http://twitter.com/yangkun7">양군의 트위터</option>
<option value="http://picasaweb.google.com/yangkun7">건이네 웹앨범</option>
<option value="http://www.greenfarm.pe.kr/">푸른농장 (준혁,서영이네)</option>
</select>
<input type="button" value="이동" onclick="window.open(document.getElementById('relSites').value);"/>
</p>

#2. 문제점

여전히 문제가 남아 있습니다.

• 자바스크립트가 지원되지 않는 환경에서는 위의 기능을 사용할 수 없습니다. (KWCAG 1.0 항목 4.1 신기술의 사용)

#2. 개선

1. SELECT 양식 값을 전달할 수 있도록 FORM 삽입
2. SELECT 양식에 name 설정
3. SELECT 양식 값을 전달할 수 있도록 일반 버튼을 submi 버튼으로 변경
4. 전달받은 URL로 이동할 수 있는 서버측 로직 구성

개선된 코드

<!-- 코드 #3 -->
<p>
<form action="redirect.php" method="post" target="_blank">
<label for="relSites">관련사이트 바로가기<label>
<select id="relSites" name="url">
<option value="http://twitter.com/yangkun7">양군의 트위터</option>
<option value="http://picasaweb.google.com/yangkun7">건이네 웹앨범</option>
<option value="http://www.greenfarm.pe.kr/">푸른농장 (준혁,서영이네)</option>
</select>
<input type="submit" value="이동"/>
</form>
</p>

서버측 코드

<?php
// redirect.php
// 필요하면 카운팅 로직 추가
header('Location: ' . $_POST['url']);
?>

개선점

#3의 코드는 그대로 완벽한 것 같지만 개선의 여지가 남아 있습니다.

• 코드대로 실행하면 선택한 사이트가 새창으로 열리게 되는데 이에 대해 알리는 부분이 없습니다. (KWCAG 1.0 항목 2.6 반응시간의 조절기능)
• 자바스크립트가 사용 가능한 환경에서는 굳이 서버 로직을 거치지 않고 선택한 사이트로 이동하게 하고 싶을 수도 있습니다.

최종 개선 코드

<!-- 코드 #4 -->
<script type="text/javascript">
function gotoUrl(id) {
window.open(document.getElementById(id).value);
return false;
}
</script>
<p>
<form action="redirect.php" method="post" target="_blank" onsubmit="return gotoUrl('relSites');">
<label for="relSites">관련사이트 바로가기<label>
<select id="relSites" name="url">
<option value="http://twitter.com/yangkun7">양군의 트위터</option>
<option value="http://picasaweb.google.com/yangkun7">건이네 웹앨범</option>
<option value="http://www.greenfarm.pe.kr/">푸른농장 (준혁,서영이네)</option>
</select>
<input type="image" src="btn_move.gif" alt="이동 (새창)"/>
</form>
</p>

관련 지침

• (키보드 사용 보장) 모든 기능은 키보드만으로도 사용할 수 있어야 한다.

홈페이지 작업을 하면 빠지지 않는게 사용자가 입력한 폼을 전송하는 겁니다. 그런데, 이 폼이 구성된 페이지의 캐릭터셋과 받는 페이지의 캐릭터셋이 다르면 입력한 글자가 깨지게 됩니다. 저도 이번에 타 시스템과 연동을 한 경험이 있는데요 우리가 작성한 페이지는 EUC-KR 이었고 검색을 수행하는 솔루션의 페이지는 UTF-8 이었습니다. 물론, 해당 솔루션을 변경할 수는 없는 노릇이었습니다. 이런 경우 사용할 수 있는 방법입니다.

방법

폼을 전송하기 전에 자바스크립트에서 다음을 수행합니다.

function beforeSubmit(f) {
document.charset = 'utf-8';
f.submit();
}

페이지의 캐릭터셋을 임시로 변경하는겁니다. 하지만, 아쉽게도 이 방법은 IE에서만 동작합니다.
Firefox 에 대해서는 다음과 같은 방법을 사용할 수 있습니다.

<form ... method="post" accept-charset="utf-8">
</form>

즉, 다음과 같이 쓰면 되겠네요.

<script type="text/javascript">
function beforeSubmit(f) {
document.charset = 'utf-8';
return true;
}
</script>

<form ... method="post" accept-charset="utf-8" onsubmit="return beforeSubmit(this);">
</form>

유용한 정보가 되었길 바랍니다.

홈페이지를 만들다 보면 IFrame 에 타 도메인의 어플리케이션을 넣어야 하는 경우가 생깁니다. 이런 경우 문제는 IFrame 안에 삽입된 타 도메인의 어플리케이션의 문서가 IFrame 의 높이를 넘어서면 IFrame 에 스크롤바가 생기면서 별로 보기가 좋지 않아집니다. 이 문서에서는 삽입된 어플리케이션 문서의 높이에 따라 IFrame 높이를 적절하게 조절해서 스크롤바를 없애는 방법을 설명합니다.

타 도메인의 페이지를 핸들링 할 수 없습니다.

조건

A 도메인 a.htm 에 삽입된 B 도메인의 b.htm 문서를 수정할 수 있어야 합니다.

해법

해법은 B 도메인의 b.htm 에 A도메인의 다른 페이지 a-1.htm 을 iframe에 삽입하면 삽입된 a-1.htm 에서 a.htm 의자바스크립트 함수를 호출할 수 있다는겁니다.

삽입된 a-1.htm 에서 부모의 부모 (a.htm) 의 함수 호출

코드는 아래와 같습니다. ( 방법만 배우시고 코드의 세세한 부분은 무시해주세요 )

A 도메인 a.htm

<iframe src="http://B/b.htm" width="100%" height="400"
     id="bFrame" frameborder="0" scrolling="no"></iframe>

function resizeFrameHeight(height) {
    document.getElementById('bFrame').style.height = height;
}

B 도메인 b.htm

<iframe src="http://B/b.htm" width="0" height="0"
     name="aFrame" frameborder="0"></iframe>

window.onload = function() {
    document.aFrame.location.href = 'http://A/a-1.htm?height=' +
                     document.body.scrollHeight;
}

A 도메인 a-1.htm

var parameter = location.href.split('?')[1];
var height = parameter.split('=')[1];
parent.parent.resizeFrameHeight(height);

그리고, 이 글은 방명록에 펑크테디 님께서 남겨주신 질문에 대한 답이기도 합니다.

bind

MooTools 의 주요 함수들에 함수가 인자로 넘어갈때는 대부분 bind 인자가 함께 따라오는데요, 그 bind 인자에 대해 이렇게 설명하고 있습니다.

bind – (object) The object that the “this” of the function will refer to.

즉, bind 인자는 “해당 함수에서 this 로 참조할 객체” 정도 되겠네요. 예를 하나 보겠습니다.

// 사랑을 고백할 Lover 객체를 만듭니다.
// 인자로 넘어온 lover 가 해당 객체의 this.lover 에 저장됩니다.
var Lover = function(lover) {
	this.lover = lover;
};
// 고백할 함수를 추가합니다.
// 인자로 넘어온 who 에게 this.lover 가 고백 하는 함수입니다.
Lover.prototype.confess = function(who) {
	alert(this.lover + ' loves ' + who);
};
// 사랑을 고백할 gun이를 만듭니다. gun 의 this.lover 는 '건이' 가 될겁니다.
var gun = new Lover('건이');
// 이제 MooTools 의 Array.each 를 사용해 엄마, 아빠에게 고백합니다.
// 함수 인자로는 익명의 Lover 의 confess를 전달합니다.
// 이 new Lover().confess 에는 this.lover 가 없는 상태입니다.
// bind 인자로는 gun 을 할당합니다.
['아빠', '엄마'].each( new Lover().confess, gun );

마지막 인자로 넘어간 new Lover().confess 를 그냥 실행하면 누가 고백을 하는지 모를겁니다. new Lover() 의 this.lover에 아무 값도 할당 하지 않았으니까요. 하지만 두번째 bind 인자로 gun 을 넘겨서 new Lover().confess 의 this.lover 는 gun의 this.lover 가 사용되서 다음과 같이 이쁘게 고백할겁니다.

건이 loves 아빠.
건이 loves 엄마.

앞에서 언급한 “해당 함수에서 this 로 참조할 객체” 를 다시 보자면, “new Lover().confess 함수에서 사용할 this 가 참조할 객체가 gun 이 되는것” 입니다. 즉, new Lover().confess 의 this.lover 가 gun 의 this.lover 인 ‘건이’ 가 되는 겁니다.

예가 좀 억지스럽긴 하지만 이런 모습은 주로 DOM 객체에 이벤트를 할당할 때 자주 보게 되는 모습입니다. 이정도 이해로도 MooTools 를 사용하는데는 지장이 없을거라고 생각합니다만 … 사실 MooTools 의 bind 는 javascript 의 closure 와 깊게 관련이 있습니다. 즉, 정확히 이해하기 위해서는 closure 에 대한 이해가 선행 되야 합니다.

클로저(Closure)

클로저(Closure) 에 대한 설명은 아래 문서 링크들로 대신 하겠습니다.
closure 에 대한 이해가 없으신 분들은 일독을 권합니다.

• JavaScript Closures for Dummies (영문) – 추천
  더미 시리즈의 일부 처럼 꾸며서 아주 쉽게 설명된 영문 문서입니다.
• Javascript Closures (영문)
  클로저에 대해 아주 상세하게 설명하고 있는 영문 문서입니다. 클로저로 할 수 있는 3가지 예제도 함께 제공하고 있습니다.
• 클로저 (Closure) – 마틴 파울러 (한글)
  closure 에 대해 설명하고, 이를 C#, Java, C 등에서 보이는 유사한 기법들과의 차이점을 설명하는 마틴 파울러의 closure 에 대한 번역문 입니다. Javascript 에 대한 언급은 없습니다.
• Closure in javascript (자바스크립트에서 클로져는 무엇인가?) – 추천
  클로저에 대해 그림과 함께 명쾌하게 설명하고 있으며 클로저 사용에 따른 메모리 누수도 언급하고 있는 가장 추천하는 문서입니다. 사실은, closure 에 대해서 설명을 해보려다가 이 문서를 찾고 포기했습니다. 하하.
• Java theory and practice: 클로저(closure) 논의 (한글)
  Java 에 Closure를 추가하는 문제에 대한 논의입니다. 거의 1년이나 지난 문서네요.

이해 하셨나요 ?

Closure & MooTools bind

그렇다면 MooTools 에서 클로저가 적용되는 부분을 보겠습니다.

// 새로운 클래스를 만듭니다.
// id 와 name 을 인자로 받습니다.
// ID 가 id 인 Element 를 클릭했을 때 name 을 출력합니다.
var Alert = new Class({
	initialize: function(id, name) {
		this.name = name;
		this.initButton(id);
	},
	initButton: function(id) {
		$(id).addEvent('click', function() { alert(this.name); });
	}
});
// DOM 이 준비되면
// id 가 button 인 element 를 클릭했을 때 '양군' 이 출력되도록합니다.
window.addEvent('domready', function(){
	new Alert('button', '양군');
});

어떻겠습니까 ? 위의 코드는 잘 동작할까요 ?
위의 코드는 원하는대로 동작하지 않습니다. 바로 addEvent 에 전달된 function() {alert(this.name);} 이 문제가 되는데요. 이 부분이 closure 가 됩니다.

우리가 원하는것은 alert(this.name); 이 Alert 내에서 쓰였으므로 this 가 Alert 이길 바라지만 실제 이 closure 가 평가되는 부분은 DOM Element 에서입니다. 그래서 실제로 수행하게 되면 this 는 Alert 가 아니라 $(‘button’)이 됩니다.

var Alert = new Class({
	initialize: function(id, name) {
		this.name = name;
		this.initButton(id);
	},
	initButton: function(id) {
		// this.get('id') 를 출력해 해당 element의 id를 출력하도록 변경.
		$(id).addEvent('click', function() { alert(this.get('id')); });
	}
});
window.addEvent('domready', function(){
	new Alert('button', '양군');
});

이렇게 수정해서 실행하면 ‘button’이 출력됩니다. alert(this.get(‘id’)); 에서 this 가 $(id) 가 되기 때문에 문제 없습니다. 그렇다면 처음의 코드를 어떻게 수정해야 원하는대로 동작할까요.

바로 MooTools 에서 제공하는 Function::bind 를 사용하면 됩니다. 수정된 코드는 아래와 같습니다.

var Alert = new Class({
	initialize: function(id, name) {
		this.name = name;
		this.initButton(id);
	},
	initButton: function(id) {
		// this 를 bind 로 넘겨 closure 를 생성합니다.
		$(id).addEvent('click', (function() { alert(this.name); }).bind(this));
	}
});
window.addEvent('domready', function(){
	new Alert('button', '양군');
});

Function::bind 는 해당 함수내에서 this 가 참조할 객체를 설정하면서 closure 를 생성합니다.
Function::bind 의 인자에 대한 설명입니다.

1. bind – (object, optional) The object that the “this” of the function will refer to.
2. args – (mixed, optional) The arguments to pass to the function (must be an array if passing more than one argument).

Conclusion

보시면 알겠지만 MooTools 의 bind 를 사용하는데 Closure 의 이해는 사실 필요 없습니다, 다만 필요한 인자의 타입이 함수인 경우에 Function::bind, Function::bindWithEvent, Function::pass 등의 함수를 이용해 함수를 만들어주면 됩니다. 그리고 bind 인자에 대한 이해 정도만 있으면 됩니다. 이는 closure에 대한 이해가 필요한 부분을 MooTools 가 내부에서 감쇠시키고 있기 때문입니다. 즉, 그런거 잘 몰라도 MooTools만 쓸 줄 알면 되도록 해주고 있는겁니다.

하지만, Closure 에 대한 이해가 선행된다면 MooTools 혹은 다른 JavaScript 라이브러리의 사용이 더욱 자유롭고 유연해질 수 있을거라고 믿습니다. 그리고 우리에게 언제나 MooTools를 사용할 수 있는 환경이 제공되지는 않을거라는 걸 잘 알고 있기 때문에라도 Closure에 대한 이해는 필요합니다.

May the force be with you.

원래 포함된 구문 파일을 개인적으로 고치면서 사용하던건데 요청하시는 분이 꽤 있어서 업로드 합니다. MooTools에 최적화 되어 있긴 하지만 대부분의 자바스크립트의 구문 파일로 유용할것으로 기대합니다.

수정, 재배포 등등의 제한은 없습니다. 자유롭게 사용하시기 바랍니다.

다운로드

이 파일은 에디트플러스 공식홈페이지의 사용자 파일 에서도 다운로드 할 수 있습니다.

js.stx 다운로드

미리보기

보시는 것은 제 에디트플러스 설정이며 이 파일은 구문 정보만 담고 있으면 컬러는 개별적으로 설정해야 합니다.

구문 구분 목록

구문 파일에 포함된 구문들은 아래와 같습니다.

• Reserved Keywords (예약어)
• Built-in method (기본 함수)
• Object (기본 객체. Document, Element, String 등)
• Collections (기본 콜렉션. arguments, forms, elemetns 등)
• Predefined Properties (selected, class, href 등)
• Event (이벤트 목록. onclick, onkeydown 등)
• Style Properties (CSS 스타일 항목)
• MySyntax (gun.. 시리즈에서 사용하는 구문들)
• moo function (MooTools 함수들)
• moo class (MooTools 클래스등)
• Line Comment / Block Comment
• Double Quotation / Single Quotation
• Number (c++ 타입 숫자)

• 프로젝트 홈 : http://code.google.com/p/gun-asterisk-js
• gun.gchart.js Source : http://code.google.com/p/gun-asterisk-js/source/browse/#svn/gchart/trunk

Overview

gun.gchart.js 는 Google Chart API 를 편하게 사용할 수 있도록 한 단순 Wrapper 입니다. 나중에 Google Chart Generator 를 만들어볼 요량으로 시작했습니다. Google Chart 와 관련해서는 이미 다양한 언어를 위한 Wrapper 와 차트 생성 도구등이 공개되었습니다.

Usage

gun.gchart.js 역시 mootools 1.2 를 기반으로 하고 있습니다. gun.gchart.js 를 사용하기 전에 mootools 라이브러리를 먼저 포함시켜야 합니다.

  	<script type="text/javascript" src="../mootools-1.2-core.js"></script> 	<script type="text/javascript" src="../gun.gchart.js"></script> 

 <script type="text/javascript">
window.addEvent('domready', function() {
	new gun.gchart.Pie({
		size: [400, 200],
		title: 'pie test',
		data: {'orange': 64, 'apple':18, 'melon':18}
	}).inject('chartContainer');
});
</script></p>
<div id="chartContainer">&nbsp;</div>
<p>

사이즈, 제목, 데이터 만 설정 한 후에 특정 Element 에 삽입합니다. Element 를 참조해야 하기 때문에 domready 이벤트에서 수행합니다.

 <script type="text/javascript">
window.addEvent('domready', function() {
	var theme = new gun.gchart.Theme();
	theme.setTitle(24, 'ff0000');
	theme.setFillBackground('gradient', '', 0, ['76A4FB',1,'ffffff',0]);

	var p = new gun.gchart.Pie3();
	p.setSize(300,150);
	p.setTitle('pie 3d test');
	p.addData({'orange': 64, 'apple':18, 'melon':18});
	p.setTheme(theme);
	p.inject('chartContainer');
});
</script></p>
<div id="chartContainer">&nbsp;</div>
<p>

위의 예제에서는 options 를 넘겨서 차트를 설정했고, 이 예제에서는 제공되는 메소드를 호출 해 차트를 설정하고 있습니다. 또한, 테마는 제목 스타일, 배경, 차트 배경 등을 객체로 설정할 수 있게 합니다. 마찬가지로 DOM Element 에 삽입되기 때문에 domready 안에서 수행합니다.

 <script type="text/javascript">
	var theme = new gun.gchart.Theme();
	theme.setTitle(24, 'ff0000');
	theme.setFillBackground('gradient', '', 0, ['76A4FB',1,'ffffff',0]);
</script></p>
<div id="chartContainer"><script type="text/javascript">
new gun.gchart.Pie({
	size: [350, 200],
	title: '파이 차트 테스트 (draw)',
	data: '64,18,18',
	labels: '한국,일본,중국',
	theme: theme
}).draw();
</script></div>
<p>

이 예제에서는 차트에 사용되는 텍스트를 한글로 쓰고 있습니다. 또한 위의 예제와 달리 데이터와 라벨을 문자열 형식으로 따로 설정하고 있습니다. 또한 draw 메소드를 사용해 바로 HTML에 쓰고있습니다.

Download

다운로드 파일에는 sample이 포함되어 있습니다. 다운로드는 프로젝트 페이지에서 제공하고 있습니다. http://gun-asterisk-js.googlecode.com/files/gun.gchart.js-0.1.zip

And …

현재 Pie, Pie3 차트만 제공 하고있습니다. 모든 차트를 작성하고 공개하기에는 너무 오래 걸릴것 같아 0.1 버전으로 공개했습니다. (포스팅 꺼리도 없고요 하하) 고로, 아직은 어디다가 유용하게 사용할 수 없을것 같습니다. 죄송합니다. 시간이 되는대로 차트 지원을 늘려갈 계획이긴 하지만 … 언제가 될지.

그리고, 예전부터 생각만 해오던 구글코드에 프로젝트도 만들어봤습니다.
프로젝트 명은 gun-asterisk-js (gun.*.js) 이고요 javascript 도구들을 만들어볼 생각입니다… 만, 운영이 잘 될지는 … 하.하.  커미터로 함께 해주실 분이 계시면 더 좋을 수는 없겠지만, 그저 한번 보시고 어떤 말씀이라도 주셔도 꽤 감사하겠습니다. 모든 부분에서 말이죠.

여담입니다만, 우습게도 구글코드에서 프로젝트를 생성하고 관리하는데 가장 어려운 부분이 “영어”군요. 물론, 사용법을 익히고 기능들을 사용하는데에는 별 어려움이 없었지만.  바로, 프로젝트를 소개하고, 페이지를 만들어서 내용을 채우고 하는 부분의 영작이 문제입니다. 참여 폭을 넓히려면 소개 및 여러 문서들을 영문으로 작성해야 되는데 잘 안됩니다. 안타깝네요… 아흑… 공부해야겠습니다. 불끈.

프로젝트 정보입니다.

• Project : gun-asterisk-js
• Project Home : http://code.google.com/p/gun-asterisk-js/
• Source Repository : http://code.google.com/p/gun-asterisk-js/source/browse/#svn/sprite/trunk
• Downloads : http://code.google.com/p/gun-asterisk-js/downloads/list

대부분의 아케이드 게임에서(3D 이전)는 화면의 객체가 움직이는 것 처럼 보이게 하기위해서 스프라이트 이미지를 사용한다. 스프라이트 이미지는 움직이는 캐릭터의 순간순간 이미지를 연속해서 붙여놓은 큰 이미지이다. gun.sprite.js 의 Sprite 는 이 스프라이트 이미지를 특정 DOM element 안에서 애니메이션 되도록한다.

구글의 예를 보면 하단에 애니메이션되는 버튼들이 있는데 이는 플래시가 아닌 스프라이트 이미지를 이용한거다. 구글에서는 우측에 보이는 스프라이트 이미지를 이용해 이 효과를 만들었다.

Sample

아직은 포스트 안에 실행되는 스크립트를 넣는 방법을 몰라 샘플 페이지를 따로 만들었다.

• 단일 애니메이션
• 구글 흉내내기
• 게임 캐릭터 움직이기

Download

gun.sprite.js v.20080909 /  gun.sprite.js include sample

Usage

<script type="text/javascript" src="mootools-1.2-core.js"></script>
<script type="text/javascript" src="gun.sprite.js"></script>
<script type="text/javascript">
var sprite = new gun.sprite.Sprite(element, options);
</script>

Reference

arguments

options

events

methods