Heungsub Blog

얼마 전 강규영 님은 JavaScript 객체와 DOM Element를 맵핑시켜주는 JOE를 공개하셨습니다. JOE는 DOM Element를 모델 스토리지로 사용할 수 있게 해주는 굉장히 유용한 프로젝트입니다.

하지만 아쉽게도 jQuery 기반으로 만들어져 MooTools 1.2를 사용하는 VLAAH나 개인 작업에는 사용할 수 없었죠. 저는 곧 바로 JOE를 MooTools 스타일로 포팅하는 MooJoe 프로젝트를 시작했는데 한참 잊고 있다가 이제서야 공개합니다.

---

Simple Mapping

다음과 같은 HTML 코드가 주어졌습니다.

<div id="names">
    <p class="name">
        <span class="first">Heungsub</span>
        <span class="last">Lee</span>
    </p>
    <p class="name">
        <span class="first">Alan</span>
        <span class="last">Kang</span>
    </p>
</div>

척 보기에도 서버 측에서 두 개의 Name 객체를 div#names에 출력한 모습입니다. MooJoe는 JOE와 마찬가지로 DOM Element를 JavaScript 객체에 동기화시켜줍니다. 동기화를 하기 위해 먼저 Name 클래스를 정의합니다.

var Name = new MooJoe.Class({
    first: '.first',
    last: '.last'
});

MooJoe의 클래스는 MooJoe.Class 생성자로 만들 수 있습니다. 인자로 맵핑 룰을 지정할 수 있는데 Name 클래스의 경우 first 속성에 .first라는 CSS 셀렉터를, last 속성에 .last라는 CSS 셀렉터를 지정했습니다. CSS 셀렉터를 맵핑룰로 쓰기 때문에 .last가 항상 두 번째 span이라면 다음과 같이 써도 무관합니다.

var Name = new MooJoe.Class({ first: 'span.first‘, last: ‘span:nth-child(2)‘ });

이제 div#names의 내용을 방금 만든 Name 클래스의 인스턴스로 만들어봅시다.

var names = [
    $$('#names p.name')[0].toObject(Name),
    $$(’#names p.name’)[1].toObject(Name)
];
// [name_instance#1, name_instance#2]

MooJoe는 MooTools의 Element 클래스를 확장해 Element.prototype.toObject 메서드를 제공합니다. 이 메서드에 맵핑시킬 MooJoe 클래스를 넘기면 맵핑된 객체를 반환합니다. 물론 다른 MooTools의 Element 메서드처럼 Elements.prototype.toObject로 짧게 쓰는 것도 가능합니다. 다음 코드는 방금 전 예제와 동일합니다.

var names = $$('#names p.name').toObject(Name);

맵핑시킨 속성들에 접근해볼까요? getter/setter는 MooTools 1.2의 컨벤션을 따릅니다.

names[0].get(’first’);
// ‘Heungsub’
names[0].get(’last’);
// ‘Lee’

names[0].set(’first’, ‘Haesam’);
names[0].get(’first’);
// ‘Haesam’

또한 속성 값을 변경할 경우 맵핑된 Dom Element에도 즉각 반영됩니다.

...
    <p class="name">
        <span class="first">Alan</span>
        <span class="last">Kang</span>
    </p>
...

이 Element는

$$('#names p.name .first')[1].get(’html’)
// ‘Alan’

names[1].set(’first’, ‘Sungryong’);

$$(’#names p.name .first’)[1].get(’html’)
// ‘Sungryong’

이렇게 변합니다.

...
    <p class="name">
        <span class="first">Sungryong</span>
        <span class="last">Kang</span>
    </p>
...

여기까지는 단순히 자식 Element의 내용으로 속성을 맵핑시키는 간단한 사용법이었습니다. 하지만 속성이 항상 자식 Element에 표현되지만은 않겠죠. 가령 이름과 홈페이지 주소를 표현하는 경우를 생각해볼 수 있습니다.

<a class="person" href="http://heungsub.net/">이흥섭</a>

a.person으로부터 name과 homepage 속성을 갖는 Person 객체를 만들고싶습니다. 어떻게 해야할까요?

Complex Mapping

MooJoe는 복잡한 맵핑룰을 제공합니다. 위 a.person을 객체로 만들기 위해 먼저 Person 클래스를 정의합니다.

var Person = new MooJoe.Class({
    name: ['', 'text'],
    homepage: ['', 'href']
});

맵핑룰에 CSS 셀렉터 대신 배열이 쓰였습니다. 이 경우 name 속성은 “이 Element의 text 값”에 맵핑시키고 homepage 속성은 “이 Element의 href 값”에 맵핑시킨다는 뜻입니다. 배열의 첫 번째 원소인 빈 문자열이 바로 “이 Element”를 가리킵니다. text와 href는 MooTools의 getter/setter로 접근 가능한 키워드로, 각각 innerHTML과 href Attribute를 의미합니다.

var hs = $$('a.person')[0].toObject(Person);
// person_instance#1

hs.get(’name’);
// ‘이흥섭’
hs.get(’homepage’);
// ‘http://heungsub.net/’

조금 더 복잡한 Person 예제를 볼까요?

<div class="person">
    <p class="face">
        <img src="http://farm4.static.flickr.com/3122/2894552409_3439382280_s.jpg" />
    </p>
    <p class="name">
        <a href="http://heungsub.net/">
            <span class="first">Heungsub</span>
            <span class="last">Lee</span>
        </a>
    </p>
    <p class="age">18</p>
</div>

이제 Person은 이름과 홈페이지 주소 뿐 아니라 사진, 나이, 게다가 Name 객체까지 표현해야합니다. 다행히 MooJoe으로 맵핑한 각 값을 특정한 타입이나 클래스로 캐스팅해줄 수 있습니다. Person 클래스를 다시 정의해봅시다.

var Person = new MooJoe.Class({
    name: ['.name a', Name],
    homepage: ['.name a', 'href', String],
    face: ['.face img', 'src', String],
    age: ['.age', Number]
});

homepage와 face의 룰은 3개의 원소로 되어있습니다. 각각 맵핑할 Element, 맵핑할 Attribute, 타입(클래스)을 나타냅니다. 맵핑할 Element인 첫 번째 원소를 제외하고는 순서가 바뀌어도 상관 없으며 기본값으로 각각 'text'와 String을 갖기 때문에 다음과 같이 써도 동일합니다.

...
    homepage: ['.name a', String, 'href'],
    face: ['.face img', 'src'],
…

name의 캐스팅 클래스는 Simple Mapping 예제에서 정의해뒀던 Name 클래스입니다. 자 그럼 객체로 구워볼까요?

var hs = $$('.person')[0].toObject(Person);

hs.get(’name’);
// name_instance#3
hs.get(’name’).get(’first’);
// ‘Heungsub’

hs.get(’face’);
// ‘http://farm4.static.flickr.com/3122/2894552409_3439382280_s.jpg’

hs.get(’age’);
// 18

name 속성은 Name 객체로, face는 문자열로, age는 숫자로 잘 캐스팅되는군요.

(강규영 님 블로그에서 보고 너무 재미있어서 퍼왔습니다)

Detached Object

MooJoe 클래스를 MooTools 클래스처럼 사용할 수도 있습니다. 임의의 Name 객체를 만들어보겠습니다.

var new_name = new Name('Dachimawa', 'Lee');
new_name.attached;
// []

new_name.get(’first’);
// ‘Dachimawa’
new_name.get(’last’);
// ‘Lee’

생성자에 보낼 인자 순서는 맵핑룰 순서와 동일합니다. first 속성이 첫 번째 룰이었으므로 'Dachimawa'가 first 값이 됩니다.

attach() 메서드로 연결되어있지 않은 MooJoe 객체는 언제라도 Dom Element에 동기화시킬 수 있습니다.

...
    <p class="name">
        <span class="first">Sungryong</span>
        <span class="last">Kang</span>
    </p>
...

new_name.attach($$('.name')[1]);
new_name.attached;
// [<p.name>]

동기화시키는 순간 Dom Element의 내용도 업데이트됩니다. 원래의 내용이 MooJoe 객체의 내용으로 덮어씌워집니다.

...
    <p class="name">
        <span class="first">Dachimawa</span>
        <span class="last">Lee</span>
    </p>
...

다시 뗄 때는 detach() 메서드를 사용합니다.

new_name.detach();
new_name.attached;
// []

---

MooJoe 0.9.0은 다음과 같이 체크아웃 받을 수 있습니다.

svn checkout http://moojoe.googlecode.com/svn/tags/0.9.0 MooJoe

개발버전을 받고싶으시면 다음을 사용해주세요.

svn checkout http://moojoe.googlecode.com/svn/trunk MooJoe

버그 리포트 및 기능 제안은 프로젝트 이슈 페이지에서 해주세요.

아직 버그가 있긴 하지만 앞으로 차근차근 발전시켜나가야겠습니다. 특히나 MooJoe 프로젝트는 저의 첫 개인프로젝트이니만큼 애정을 갖고 말이죠. 그럼 0.9.1 버전 릴리즈 소식도 기대해주세요!

PHP에서의 함수형 프로그래밍을 돕는 프레임워크 Phunctional가 새로 릴리즈되었습니다. 자세한 업데이트 내용은 Phunctional Blog에 기재해두었습니다. 홍민희 선배 수고 많으셨습니다.

꽤 오랜 시간이 걸렸습니다. 그 동안 열심히 일한 성과를 드디어 여러분께도 보여드릴 수 있게 되었네요. 우리들의 취향 공유 VLAAH가 오늘 새벽에 성공적으로 디자인 개편을 마쳤습니다. 제가 개발과 디자인을 동시에 맡고있어 작업량이 많았던 만큼 이번 개편에 애착이 많이 생깁니다. 이번 개편을 통해 바뀐 점들은 VLOG에 자세히 써두었습니다.

VLAAH는 Lunant(야간개발팀)의 첫 번째 작품으로, 회원들끼리 취향을 공유하는 Social Network Service입니다. 현재 클로즈드베타가 진행 중입니다. 제게 이메일 주소를 보내주시면 초대장을 드리겠습니다.

최근에 겪은 일들 중 가장 설레였던 것은 6년 전 NZEO.COM에서 처음 알게된 이준협 씨와의 만남이었습니다. 그와는 픽셀아트 강좌 게시판에서 만나 오랫동안 서로 실력을 겨루고 이끌어주며 굉장히 친하게 지내고 있었습니다. 4년 후 어쩐 일인지 연락이 끊기게 되었는데 그로부터 2년이 지난 얼마전 그때가 문득 그리워졌습니다. 어렴풋이 기억나는 단서로 이곳저곳을 알아본 끝에 결국 다시 연락할 수 있게 되었습니다.

준협 씨는 얼마 전까지 뉴질랜드에서 생활하다가 올 해 한국으로 귀국해 한국과학기술원에 입학했다고 합니다. 마침 며칠 전 방학을 맞이해 서울로 올라오셔서 처음으로 오프라인에서 함께하는 자리를 마련하게 되었습니다. 종로와 신촌을 오가며 거의 하루동안 유익한 이야기를 많이 나눌 수 있었습니다.

준협 씨는 고등학교 3학년 때까지 예술가를 꿈꿨다고 합니다. 메신저로 고등학교 때 만든 작품 몇 점을 받아볼 수 있었는데 미술의 기초도 배운 적 없다는 사람이 이렇게 창의적이고 멋진 작품을 만들어냈다는 사실에 경탄하지 않을 수 없었습니다. 당시엔 예술이란 무엇일까 하는 생각을 주로 했다고 합니다. 불쌍한 우리나라 입시미술생들이 학원에서 기계처럼 발상과표현, 석고소묘, 칸만화 등을 찍어낼 때 준협 씨는 다른 수준의 고민과 수련을 하고있었던 것입니다. 안타까운 입시미술 시스템에 대해 이야기해주자 그는 우리나라 입시미술학원에서 그토록 강조–강요하는 기초라는게 자신이 예술을 공부하는 데 있어서는 필요하지 않았을 뿐이라고 당연하다는 듯이 대답해주었습니다.

제가 디자이너에서 프로그래머로 꿈을 바꾸었듯 준협 씨도 지금은 과학자를 꿈꾸고 계신다고 합니다. 오늘 만남을 통해 물리학이나 뇌과학, DNA, 양자역학 등에 이르는 해박한 과학 지식과 과학에 대한 애정을 엿볼 수 있었습니다. 특히 그는 벌 군체와 동물의 뇌를 예로 들며, 작고 멍청한 연산 하나하나는 별 의미가 없지만 방대하게 모였을 때는 마치 고도의 지능처럼 작용한다는 점에 경이로움을 느낀다고 했습니다. 내년에 선택하게 될 전공도 바이오뇌과학 과가 될 것 같다고 합니다.

그는 한 때 예술이란 무엇일까 고민한 끝에 보는 이로 하여금 어떤 생각이나 감정을 유도해낼 수 있는 무엇으로 생각하게 되었다고 합니다. 그 때 표현기법은 너무 사소한 것이어서 무엇이 되어도 상관없고, 예술의 범위와 경계는 무한히 확장 될 수 있다는 얘기도 덧붙였습니다. 그런 의미에서 자신이 지금 과학을 배우고 있어도 사실은 예술을 공부하고있는 것이고 자신의 꿈도 여전히 예술가라고 자부했습니다. 저와 함께 픽셀아트를 할때나 고등학교때 미술을 할때나 지금 과학을 공부할때나 예술하는 마음가짐은 언제나 변함 없었답니다. 오늘 준협 씨와 나눈 이야기 중 가장 인상 깊은 이야기였습니다.

아쉽게도 막차 시간이 다가와 조만간 또 뵙기를 기약하며 헤어졌습니다. 오늘 만난 준협 씨는 키도 헌칠하고 그림도 잘그리고 박식하며 유학파에 한국과학기술원 학생인 엄친아 같은 분이었습니다. 이런 소중한 인연을 만날 수 있었단 것에 크게 감사하며 앞으로는 연락 끊기는 일 없이 유익한 이야기를 계속 나눌 수 있길 바랍니다.

안녕하세요? 이흥섭입니다. 제 때 계정 기한을 연장하지못해 블로그를 잃었다가, 대문을 새로 꾸미며 새로운 블로그도 함께 오픈했습니다. 그 동안 블로그의 빈 자리는 me2DAY와 Flickr가 충실히 매워 주었고 한 동안은 그 둘만으로도 충분했습니다. 그러다 얼마 전 저에게도 블로그가 필요해졌는데, 그 때 블로그를 필요로 하게 된 이야기를 해보고자합니다.

저는 김재석 선배, 홍민희 선배, 강성룡 선배와 함께 야간개발팀의 일원입니다. 야간개발팀에서는 VLAAH라는 웹 서비스를 개발하고 있고, VLOG라는 팀 블로그를 운영하고 있습니다. VLOG는 무임금 무예산 야간개발팀이 VLAAH를 개발하며 얻은 노하우나 개발 비화, 에피소드 등을 다루는 곳인데요, 다들 서비스 개발에 집중하다보니 오랫동안 글이 올라오지 않은 적이 있었습니다. 그 때 야간개발팀은 저에게 개발은 잠시 미뤄두고 VLOG에 새로운 글을 써보라는 특명을 내렸습니다. 하지만 무턱대고 쓰라고 해도 쓸 내용이 떠오를 리 없었고 마음에 내키지도 않아서 쓰기를 미루기만 했습니다.

그러던 어느날, 전 예전에 만들어두었던 칩셋 생성기를 다듬어 VLAAH의 새로운 레이아웃에 적용하고 있었습니다. 그 때 칩셋 만들기를 자동화한 이야기를 VLOG에 써보면 어떻겠냐고 민희 선배가 얘기했습니다.

그 얘기를 듣고 부터 제 성과를 더 많은 사람들에게 알리고 공유하고 싶다는 생각이 들었습니다. 예전에 운영하던 블로그나 me2DAY, Flickr는 단지 소소한 일상을 표현하고 싶다는 마음에 사용해왔는데, 새로운 바람이 생겨난 것입니다. 당장 저에게는 개인 블로그가 없었기 때문에 밤 새 VLOG에 Colorful VLAAH를 씀으로써 그 바람을 해소했습니다. 민희 선배는 직접 웹 디자인의 방향이라는 칭찬 글까지 써주셨답니다.

드디어 1년여만에 저에게도 개인 블로그가 생겼고 제 생각과 성과를 이 곳에서 공유할 수 있게 되었습니다. 적은 주제에만 국한하고싶지 않아서 블로그 제목은 Heungsub Blog로 정했습니다. 글을 잘 쓰지는 못하지만 썩 읽어볼만한 글을 쓰기 위해 노력하며 글 솜씨도 늘어날 수 있으면 좋겠습니다. Heungsub Blog를 훌륭한 블로그로 성장시킬 수 있도록 응원해주세요.