Alan's Blog

오늘 코엑스 애니랜드 가서 Wii 를 사왔습니다. 프로젝터랑 연결해서 대형화면으로 즐겨볼까 합니다 ㅋ 근데 아직 스피커를 연결 못해서(단자 모냥이 안 맞아요 ㅜㅠ) 리모콘에서 나는 소리만으로 "처음 만나는 Wii"를 초큼 해봤습니다.

에, 주제는 그게 아니고, 이 Wii 리모콘이라는게 참 신기하단 말이죠. 일단 양방향 통신이 가능하고, 3차원 공간상에서의 움직임을 인식하기도 하면서, (좀 찾아봤더니) 앞 부분의 적외선 센서는 동시에 네 개의 적외선 신호를 인식할 수 있다고 합니다. 게다가, 블루투스를 지원하기 때문에 Wii 본체가 아니라 일반 컴퓨터랑도 연결이 가능하다는 사실.

눈이 번쩍. 뭔진 모르겠으나 재밌는 놀이를 할 수 있겠다는 생각이. 좀 더 찾아보니 역시나. 이미 많은 사람들이 Wii 리모콘을 가지고 다양하게 놀고 있더군요. 이를테면 마이너리티 리포트 놀이를 하시는 분도 계시고요.

저도 뭔가 하고 싶은데, 회사에도 맨날 자바스크립트만 하다보니 이것도 자바스크립트로 해야겠다는 오기 혹은 사명감 따위의 이름모를 악감정(응?)이 발동하였습니다. ㅋ

1. 우선 Wii 리모콘과 PC를 연결해야 하는데, 제 PC에는 블루투스가 없다는 --; 하지만 옆에 있는 UMPC(후지쯔 U1010)에 있으므로 OK. "블루투스 장치 연결 마법사"를 시작하고 Wii 리모콘의 1, 2 버튼을 동시에 눌러서 연결 성공. (Nintendo RVL-CNT-01 이라는 이름으로 연결됩니다.)

2. 위에서 링크한 "마이너리티 리포트 놀이" 하시던 분이 만들어 놓은 .NET Managed DLL 발견. (아싸 날로 먹었다)

3. Windows Scripting Host의 JScript로 해볼까 싶었는데 위 라이브러리를 어떻게 COM으로 등록하는지 몰라서 초큼 삽질하다가 포기. RegAsm.exe 로 해봤는데 "No types were registered"라고만 나옴. 음. 찾아볼까 하다가 귀찮아서 포기. 안되면 말지 뭐. JScript는 포기.

4. JScript.NET으로 선회. ㅎㅎ 위 DLL과 같은 디렉토리에 test.js 라는 파일을 생성:
    > import WiimoteLib;
    > new Wiimote();

5. 컴파일
    > jsc test.js

6. 실행
    > test.exe

7. 끝. 이제 DLL 소스와 도움말(chm) 참고해서 노는 일만 남았습니다. 뭘 하면 좋을까요? ㅡㅡ;

이제 준비는 끝났고, 앞으로 진척 상황을 연재 형식으로 써볼 생각입니다. :-)

* PS: 구글신께서 알려주신건데, 닌텐도의 Wii에는 오페라가 들어 있잖아요? 그 오페라에는 특별한 객체가 있다고 합니다. 대충 이런 식인가봐요:
    > var remote = opera.wiiremote.update(1);
    > if(remote.isEnabled) { ... }

http://jania.pe.kr/xtx


요런 놈을 하나 만들어봤습니다. 스크립트 두 줄만 써주면 보통 TEXTAREA에 몇 가지 유용한 단축키들이 추가됩니다.

• Tab, Shift+Tab 으로 들여쓰기, 내어쓰기
• Alt+Up/Down 으로 줄단위 이동
  
• Ctrl+Alt+Up/Down 으로 줄 복사
• Ctrl+D 는 현재 줄 삭제

짬나면 자동완성이나 템플릿 같은 기능들을 좀 추가해볼 생각입니다. 괜찮다 싶으면 Xquared소스 편집기에도 붙여볼 생각이예요. 에 물론 Plugin 형식으로요. 이것저것 다 붙이면 무거워지니깐.

(이전 포스트에서 3시간 작업하다가 날려먹었다는 코드가 이거였어요 --;)

• 2008년 오픈마루 동계인턴을 모집합니다. :: 오 픈 마 루 스 튜 디 오
  말 그대로, 오픈마루에서 2008 겨울방학 인턴을 모집합니다. 웹 서비스 개발, 테스트 엔지니어, 마케팅, User research 등 총 4개 부분입니다.
• Pro JavaScript Design Patterns, by Ross Harmes and Dustin Diaz
  Javascript DP 책이 나왔군요. 이달 12일에 출간되었다고 합니다. ECMAScript 계열 언어로 쓰인 패턴책은 제가 알기론 Flash ActionScript 책 이후로 두 번째.
  
  Flyweight Pattern을 다루고 있는 Sample Chapter를 읽어보면 패턴 책이라기 보다는 그냥 쿡 북이 아닌가 싶어요. C.A 이후로 패턴책이 점점 더 패턴의 본질에서부터 멀어지는 느낌입니다.
• forum.rubykr.org :: 주제 보기 - 회계, 인사, 구매 같은 si성 프로그램을 루비
  일반적으로 단점보다는 장점을 이야기하기가 쉽습니다. 자신있게 단점을 이야기하려면 많은 경험이 필요하죠. 단점에 대해 이야기할 수 있는 사람은 고수입니다. :-)
  

xquared20071205.tar.gz

• 소식: 자유게시판과 질문답변 게시판이 신설되었습니다.
• 수정: Prototype.js 라이브러리를 사용하지 않도록 수정하였습니다. 이제 jQuery나 MooTools 등을 쓰는 사이트에서도 Xquared를 수정 없이 바로 쓰실 수 있습니다.
• 수정: IE6에서 페이지 전환시 발생하던 메모리 릭을 모두 제거하였습니다.
• 수정: 각종 다이얼로그가 편집창 가운데에 제대로 나오지 않던 문제를 수정하였습니다. (haneul님이 패치를 보내주셨습니다. 감사합니다)

이번 버전은 기능 추가는 없습니다.

대신 IE6 에서 발생하던 메모리릭을 완전히 제거하였고, Prototype.js에 대한 의존성을 없앴습니다. 따라서 Prototype.js 을 쓰지 않는 사이트나, jQuery, MooTools 등을 쓰는 사이트 등에서도 쉽게 Xquared를 붙이실 수 있게 되었습니다.

감사합니다!

• Google Testing OpenID With Blogger, May Offer OpenIDs To Users
  Google의 blogger.com이 OpenID 지원을 테스트 하고있다고 합니다. 한국에는 blogger.com 사용자가 얼마나 되는지 모르겠네요. 그래도 아무튼 좋은 소식. Read/Write Web에도 같은 내용의 기사가 올라왔습니다: Blogger Beta Ships OpenID (RWW)
• evolutionary-programming-tutorial.pdf
  ecmascript.org에 새로운 PDF가 올라왔어요. Evolutionary Programming and Gradual Typing in ECMAScript 4 라는 제목입니다. 읽고 요약해서 올려보도록 하겠습니다.
• IT업계 "쉽게 좀 말합시다"
  대화 중에 불필요한 전문용어 쓰지 말자는 좋은 캠페인입니다.
  
  불필요한 전문용어는 말 그대로 "불필요한" 전문용어이니까 안쓰면 되겠지만, 전문용어에는 communication bandwidth를 넓혀준다는 순기능 또한 분명 있습니다. 따라서 억지스럽게 풀어 쓰는 것은 오히려 위험할 수 있다고 봅니다.
  
  물론 이 순기능이 제대로 작동하려면 뜻도 제대로 모르면서 있어 보이려고 전문용어를 오남용 하는 경우들이 사라져야죠. 제가 보기엔 이게 더 큰 문제.
  
• Jimmy Wales' on The Future of Web 2.0 and His Tips for Entrepreneurs
  위키피디아의 창시자인 Jimmy Wales가 말하는 Web 2.0의 미래. 음악과 비디오와 같은 멀티미디어 컨텐츠에 대해서도 대규모의 참여와 협업이 일어날 것이라고.
• YAPC::Europe's Winter of Code - O'Reilly ONLamp Blog
  유럽에도 Windowter of Code가 있군요. ㅎㅎ 그래도 오픈마루가 먼저라는거~! :-)
• 세상을 여는 창 :: 이런 제길, 개팔자가 상팔자구나
  제목을 보는 순간 "뭐? 개발자가 상팔자라고?" 하면서 발끈해서 눌렀는데, "개발자"가 아니라 "개팔자"였습니다 ㄷㄷㄷ

2007년 11월 29일 "월간 마이크로소프트웨어 창간 24주년 기념 세미나"에서 "RIA 세상의 공용어: Javascript"라는 제목으로 발표한 자료입니다. 마소 송년호(12월호) 커버스토리에 실린 기사와 같은 주제로 준비한 것이므로 잡지를 참고하셔도 됩니다.

질문/건의사항이 있으시면 이곳에 커멘트로 달아주시거나 메일( jania902@gmail.com ) 혹은 메신저( MSN jania902@hotmail.com ) 를 통해 연락해주세요.

• 다음-네이버 베끼기 논란…제2 ‘카페분쟁’ 확산?
  Daum의 파워 에디터가 Naver의 스마트 에디터를 표절했다는 의혹. 한편, 다음에 오래 계셨던 개발자 분이 쓴 다음 파워 에디터와 네이버 스마트 에디터에 대하여..라는 글에서는 아니라고 합니다.
• High-Performance JavaScript
  최근 읽었던 것 중 가장 "안좋은" 자바스크립트 최적화 가이드. 세상에나. 커멘트가 아주 우호적인 것을 보니 더욱 안습입니다. 변수 이름 짧게 써서 성능 올리자는 얘기나 별 반 다를 바 없는 얘기들입니다. 물론 변수 이름 짧게 쓰면 성능은 빨라지겠죠. 초큼이라도.
  
• 300년 동안 '1남1녀'만 낳은 마을의 비밀
  이 기사 상당히 수상합니다. 만약 기사에서 밝힌 남녀성비가 사실이라면, 유아살해 혹은 유기(어쩌면 매매까지) 등을 심각하게 의심해봐야할 것 같군요. 무서운 뉴스입니다.
• W3C DOM Compatibility - HTML
  quirksmode.com의 DOM 호환성 테이블이 업데이트 되었습니다. 점점 늘어나는 녹색들!
• Agile Programming and Dilbert
  Dilbert. 지난 번 Javascript에 이어 이번에는 Agile Programming 까지. ㅎㅎㅎ
• GDrive: Three Ways it Could be a Game Changer
  Google에서 곧 공개할 것 같다는 GDrive. Gears와 연동되면 좋겠다는 의견입니다. 과연 그렇겠습니다 ㄷㄷㄷ

• iPhone Human Interface Guidelines
  이런 UI 가이드라인은 공부에 큰 도움이 되는 소스입니다. 정보 시각화, 지각 심리학, 공학 심리학 등 각종 이론서들에서 설명하고 있는 내용들이 전문가들에 의해 어떻게 실용화/구체화되었는지 비판적으로 검토해볼 수 있으니까요.
  
  WIndows Vista, Mac OS, OLPC 등의 UI Guideline은 이곳을 참고하세요.
  
• Onaswarm: Lifestreaming For Groups
  라이프스트리밍이란 한 마디로 삶의 흐름을 몽땅 기록하는 것입니다. MS 연구소 등에서 예전부터 관심을 보이고 있는 분야입니다. Onaswarm은 그룹을 위한 라이프스트리밍 서비스라는군요.
• xquared, xe editor component 연동
  Xquared와 제로보드의 에디터 컴포넌트 연동. 이모티콘, 구글지도 넣기 등이 가능합니다. ㄷㄷㄷ
• "계약서 도장 李후보것 맞다"…한나라 '가짜' 주장하다 말바꿔
  '국민에게 걱정끼쳐드려 죄송하다'고 말한 후 '회사는 소유할 수도 있다'고 말하며 BBK와의 연관성을 간접적으로 시사하는 발언을 했다. ... 오늘도 열심히 활약 중인 만순씨.

간만에 (마음의) 여유가 좀 생겨서 이것저것 하고 놀고 있습니다. 조금 전에는 간단한 JSONP Proxy를 만들어 봤어요. (검색해보니 이미 비슷한게 몇 개 있긴 했지만 그러면 또 뭐 어때요 ㅎㅎ)

JSONP란 XMLHttpRequest의 "same origin policy"라는 보안 정책을 회피하여 다른 사이트와 통신을 할 수 있게 해주는 트릭으로, 야후!나 구글의 Javascript API들이 사용하는 방식입니다. 문제는, 해당 사이트에서 JSONP 형식의 응답을 주어야만 그사이트를 호출할 수 있다는 점인데, 간단한 Proxy를 통해 모든 응답을 JSONP 형식으로 바꿔주게 만들어봤습니다.

http://jania.pe.kr/u/jsonp.cgi?url={url}&callback={callback}&charset={charset}

• {url} 부분에 원하는 사이트의 주소를 넣으시고(http 포함),
• {callback} 부분에는 호출이 완료되었을 때 실행될 자바스크립트 함수 이름을 넣고,
• {charset}은 응답 문자열의 문자셋을 적어주시면 됩니다. 생략하면 utf-8으로 지정됩니다.

예를들어,

1. function c(json) {
2.    alert(json.content);
3. }
4. 
   
5. var script = document.createElement("SCRIPT");
6. script.src =
7.    "http://jania.pe.kr/u/jsonp.cgi?" +
8.    "url=http://www.google.com&callback=c"
   
9. document.body.appendChild(script);

와 같이 쓰시면, 구글 홈페이지의 HTML이 자바스크리트 alert을 통해 화면에 출력됩니다.

이런 작은 장난감들을 몇 개 모아서 Pipe&Filter 방식으로 조합해서 가지고 놀면 재밌는걸 많이 만들 수 있을 것 같아요.

뭘 하고 놀면 재밌을까요? :-)

구글 문법 하일라이터(Syntax Highlighter)를 패치하여 스프링노트 코드 지원하기

에 소개된 코드를 조금 수정하여, 스프링노트에서 삽입한 소스 코드를 수정 없이 사용할 수 있도록 하였습니다.

스프링노트 편집기에는 아직 속성(attribute) 편집 기능이 없어서 언어를 명시할 수가 없는데요, 대충 언어를 짐작(guessing)하는 코드를 만들었더니 대략 잘 돌아갑니다:

1. alert('1');
2. for(var i = 0; i < x.length; i++) {
3. // ...
4. }

언어는 일단 C 계열(C, C++, C#, Java, Javascript 등) 언어를 먼저 판별한 후 XML 계열(XML, HTML 등)인지 보고, 그것도 아닌 것 같으면 무조건 루비( -- ;; )로 가정하도록 만들었습니다. ㅎㅎ

참고로, 스프링노트와 미투데이 매시업인 슬러거에도 동일한 코드를 붙였습니다. ^^