2012년 6월 22일 금요일

로그 : 온라인 에디터 현황

Syntax Highlight editor
. CodeMirror

Collaborative real-time editor (http://en.wikipedia.org/wiki/Collaborative_real-time_editor)
. Etherpad
Collabedit
. theFileTree
. ShareJS (Cool!)

Collaborative real-time Graphic Editor
. NetSketch

2012년 6월 17일 일요일

Modern Web Application Tech Stack

모던 웹 어플리케이션 이라니 참 생경한 용어라고 생각했는데 이미 자리 잡았나보다.
http://lucumr.pocoo.org/2011/11/15/modern-web-applications-are-here/
http://jtaby.com/2012/04/23/modern-web-development-part-1.html
http://www.smashingmagazine.com/smashing-book-1/user-interface-design-in-modern-web-applications/
등등 많이들 쓰네.

무성의하게 이야기하면 페이스북이나 구글플러스처럼 클라이언트 사이드에서 지지고 볶고 하는 웹으로 만드는 어플리케이션인데. (미안 사실 그건 아니야)
모던 웹 어플리케이션에 대한 정의는 따로 써야할만한 내용이라 일단은 패스.

어느정도는 적당히 맨땅에 헤딩도 해야하지만 간지나는 그분들의 도구들이 뭔지는 알아두자싶어
순서없이 생각날때마다 그때그때 기록해볼련다.

Trello
view-source:https://trello.com/ 해 보니
열심히 Uglify 해 놓았다.
그중 https://d2k1ftgv7pobq7.cloudfront.net/js/2583c1272b9a443e986489d1ed094af4/all.js 의 내용을 보니
http://jquery.com/
http://sizzlejs.com/
http://docs.jquery.com/UI
http://docs.jquery.com/UI/Widget
http://www.datejs.com/
backbone.js

highcharts.js
json2.js
markdown.js
socket.io.js
underscore.js


node.js
HAProxy
Redis
MongoDB

정도 사용한다.

. FourSquare
역시 자바스크립트들을  한방에 뭉쳐놓았다.
https://ss1.4sqi.net/scripts/build/ko/foursquare/root-b0da858aba9baaa4f80b6f60d63011f0.js 의 내용을 보았다.

Underscore.js 1.2.2
Backbone.js 0.5.3

정도 사용하고 있다.

. Linkedin
 i18n.translate 자체 i18n 지원 라이브러리를 만들어쓰는가본데 흥미로움
yui
sizzlejs (오호 여기도?)
dustjs https://github.com/dmix/dusterjs, Template 엔진.
backbone 과 함께 사용하는 예. http://dmix.ca/2011/12/dustjs-backbonejs-dusterjs/

. airBnb
<a href="javascript:void(0);"> 참 독특한 테크닉이네;
https://github.com/mathiasbynens/jquery-placeholder
https://github.com/imakewebthings/jquery-waypoints (무한스크롤 등등)
https://github.com/carhartl/jquery-cookie

아이구 은근히 피곤한 작업이네.

. Meteor - 이건 framework stack이라고 해야하나 암튼
fiber
connect
gzippo
optimist
mime
handlebars
useragent
underscore
* 8.25현재 추가
clean-css : css-minifier. test 소스 한번 보자

http-proxy : A full-featured http proxy for node.js. WebSockets, HTTPs 지원
nib : Stylus mixins, utilities, components, and gradient image generation.
optimist : 명령행 인자 파싱
request : http request client - oAuth 예제를 보니 쓰기 편해보인다.


기타 돌아다니면서 쓸만한 것들 (계속 업데이트)

Android 4.0.3 ICS Ice Cream sandwich / iOS 5 에서 WebView 를 사용할 때 주의할 점

잘돌던 앱이 갤럭시S2에서 갑자기 안돈다고 한다.
뭔가 해서 봤더니 shouldOverrideUrlLoading 이 제대로 작동하지 않는 것을 발견.
콘솔로 찍어보니까 통신용 커스텀 프로토콜 이름을 nativeCall://doSomething 과 같이 카멜노테이션 식으로 대소문자를 혼용했는데 이것이 실제로 해당 method 안에선 url 이 소문자로 들어가서 생기는 현상이었음.

결론: shouldOverrideUrlLoading 을 사용할땐 소문자만 쓰자.

추가: iOS 5.0 에서도 동일한 현상이 있다는 제보가 있습니다 :)

2012년 6월 15일 금요일

일기- ubuntu 12.04 시스템 설치

기존 10.04 Server 에서 한글 문제가 좀 있어서 삽질하려다가
그냥 12.04 Desktop으로 올림.

1.설치 후 사용자 계정 만들기
2.ssh 설치
$ sudo apt-get install ssh
3.phantomjs 설치.
phantomjs: error while loading shared libraries: libQtWebKit.so.4: cannot open shared object file: No such file or directory
실행하니 위와 같은 오류 발생.
$ sudo apt-get install libqt4-webkit
해결.

4.node.js 는 package manager 로 설치. 소스컴파일 안할래
5.npm 은 언제나 말썽. 오류를 우장창 내뱉았으나 일단 작동은 함.
6.server 쪽에서 내 osx로 전송하기 위해 클라이언트 ftp 활성화 (http://appletree.or.kr/forum/viewtopic.php?id=229 참조)
FTP 서버쪽도 열어야지
$ sudo apt-get install vsftpd
$ sudo vi /etc/vsftpd.conf
에서 3줄 수정
anonymous_enable=NO
local_enable=YES
write_enable=YES
$ sudo /etc/init.d/vsftpd restart
재시작
7.phantom.js 의 rasterize.coffee 실행. 그러고보니 phantom.js example 들은 훌륭한 coffeescript 레퍼런스로군!
8.npm install -g express
9.npm install jsdom

한참 걸리네.....
npm WARN optional dep failed, continuing contextify@0.1.3
WARNING 이 하나 있네. npm 설치시 문제때문인가.
sudo apt-get install build-essential 
C 컴파일러 문제인득. 이걸로 해결

10. 망할 iconv 도 설치하자. build-essential 패키지를 설치안하니 이것도 안되더라.
11. mongodb 도 설치.
sudo apt-get install mongodb
의존성 문제가 있다고 하던데 그런거 없는듯?
12. mongodb 드라이버 설치 확인
npm install mongodb
13. meteor 설치
curl install.meteor.com | /bin/sh
후우. 일단 이정도면 되겠지.

2012년 6월 13일 수요일

Meteor 에서 외부 라이브러리를 사용하는 법

csv 파일을 읽어서 초기데이터 로딩을 하려고 했더니
meteor 에선 그냥 require 를 사용할 수 없다.
다음과 같이 __meteor_bootstrap__ 객체를 이용하여 가져온다.

fs = __meteor_bootstrap__.require('fs');
  if !Users.find().count()
    console.log ">> Initiate user list"
    ((readLine)->
      keyList = readLine.shift(0).split(',')
      for line in readLine
        result = {};
        for valueList,k in line.split(',') when valueList
          result[keyList[k]]=valueList;
        Users.insert result
    )(fs.readFileSync("#{process.env.PWD}/server/fixture/user.csv").toString().split('\n'))
    console.log "User added"

fs 모듈을 이용해서
csv 파일을 읽어 Users 컬렉션에 로드하는 예제
값이 없는 경우는 k,v 를 만들지 않는다.

가령 user.csv 가

userid, password, email
spectrum,1234,spectrum@wherever.net
acidsound,1234,
admin,,
이런식으로 들어가 있으면 user 콜렉션은
[
  { user : 'spectrum', password: '1234', email:'spectrum@wherever.net' }
  { user : 'acidsound', password: '1234' }
  { user : 'admin' }
]
이 된다.

이것 말고도 __meteor_bootstrap__ 엔 비밀이 많다. :)

node.js 로 만드는 원격 갈무리 도구

jsdom 이 역시 최고.
검진 기관명 목록을 통째로 뽑기 위해 node.js 로 짜보았다.
한글 문제는 iconv 를 설치해서 해결. euc-kr > utf-8으로 변환함.
jsdom 과 iconv 가 설치하는데 까칠거려서 애좀 먹었음.
http://pastie.org/4078210
결과물은 엑셀에서 뽑기 좋게
993 광양사랑치과의원 광양사랑치과의원 전라남도 광양시 공영로 73, 3층 (중동) (☎ 061-795-2879) 내원 출장 994 광양시보건소 광양시보건소 전남 광양시 광양읍 칠성리70 (☎ 061-797-4008) 내원 출장 995 광양웰치과의원 광양웰치과의원 전라남도 광양시 불로로 87, 3층 (중동) (☎ 061-793-7588) 내원 출장 996 광양의원 광양의원 제주특별자치도 제주시 서광로 302, 4층 ... (☎ 064-723-8275) 내원 출장 997 광장수진산부인과의원 광장수진산부인과의원 경기도 부천시 원미구 부일로 202-13, ... (☎ 032-328-9686) 내원 출장 998 광제산부인과의원 광제산부인과의원 충청남도 천안시 서북구 서부18길 23, (... (☎ 041-575-3200) 내원 출장 999 광주21세기병원 광주21세기병원 광주광역시 광산구 임방울대로 164,(운남동... (☎ 062-953-7000) 내원 출장 1000 광주굿모닝병원 광주굿모닝병원 광주광역시 북구 북문대로 182, (운암동) (☎ 062-250-1000) 내원 출장

이런식으로 대략 나옴.
vi에서 복사하기 좋게 41라인을 안넘은게 자랑. 발소스는 안자랑.
cluster 를 써서 멀티코어 돌렸으면 좋았을 것을.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
var Iconv = require('iconv').Iconv;
var iconv = new Iconv('EUC-KR', 'UTF-8//TRANSLIT//IGNORE');
var jsdom = require('jsdom');
var maxidx=1695; // 1695;
var fd='\t';
var getHTML=function(idx) {
jsdom.env({
  html: 'http://hi.nhic.or.kr/ggpr001_r03.do?pageIndex='+idx,
  encoding: 'binary',
  scripts: [
    'http://code.jquery.com/jquery-1.5.min.js'
  ],
  done: function(errors, window) {
    var $ = window.$;
    var rst = '';
    $(".default_list tr").each(function(k,v) {
      if (k>1) {
        var line=$("td",v).map(function(kk,vv) {
          return (k%2===0 && kk===1) ? $(vv).attr('title')+fd+
                  $(vv).html().replace(/<br[ /]*>/g,fd) : $(vv).text();
        });
        for (var i=0; i<line.length; i++) {
          rst += line[i].replace(/^\s*|\s*$/g, '')+fd;
        }
        if (k%2===1) {
         var buf = new Buffer(rst.length);
         buf.write(rst, 0, rst.length, 'binary');
         console.log(iconv.convert(buf).toString());
         rst = '';
        }
      }
    });
    if (idx<maxidx)
      getHTML(idx+1);
  }
});
}
getHTML(1);

2012년 6월 10일 일요일

mysql password() function 을 node.js 에서 사용하려면

기존 mysql 로 다른 사람이 구축한 테이블의 데이터를 mongodb 로 이전하려고 보니
사용자 암호와 주민등록번호 뒷자리가 암호화 되어 있었다.
stackoverflow 를 뒤져보니
http://stackoverflow.com/questions/5894193/implementation-of-mysqls-password-function-in-java
이런게 있더라.
단순하게 sha1 으로 두번 암호화하고 대문자화 한담에 맨 앞에 * 붙여주는게 전부인데 이상하게 잘 안되더라.

자바를 한동안 안봐서 그런가 눈알에 힘 빡주고 보니
두번 복호화 하는 과정에서 첫번째 복호화한 값은 byte[] 형이란게 보이더라

http://nodejs.org/api/crypto.html#crypto_hash_update_data_input_encoding
node.js 에는 'sha1', 'md5', 'sha256', 'sha512' 와 같은 다양한 형태의 복호화 알고리즘을 지원하는 crypto package가 있다.
그래서 콘솔을 열고
이렇게 쳐 보았다.
# node
> var crypto = require('crypto');
> var first=crypto.createHash('sha1').update('test').digest('binary');
> var second=crypto.createHash('sha1').update(first).digest('hex');
> "*"+second.toUpperCase();
'*94BDCEBE19083CE2A1F959FD02F964C7AF4CFC29'

mysql 에서 확인해보았다.
> select password('test')
*94BDCEBE19083CE2A1F959FD02F964C7AF4CFC29

야호! 정확하게 맞아떨어진다.
(function(password) {
  return "*"+crypto.createHash('sha1').update(crypto.createHash('sha1').update(password).digest('binary')).digest('hex').toUpperCase()
}('test'));
변수를 쓰지않고 한턴에 하고 싶으면 이렇게 :)

알고리즘을 정리하면
1. UTF8 스트링 형태 sha1로 암호화하되 binary로 받는다.
2. binary받은 값을 sha1로 다시 암호화하여 hex로 받는다.
3. 받은 hex 값을 대문자화하고 앞에 *를 붙인다.

이상입니다.