BMW FREE E-SYS EST TOKEN for 100 years

I generated an EST Token for E-SYS which is for BMW coding. It's for 100 years.

Copy and save below content as a file 'token.est', the password is 1234.
Enjoy with your BMW.
Gracias.

<?xml version="1.0" encoding="UTF-8" ?>
<root>
<Name>BMW Coder</Name>
<Role>EXPERT</Role>
<EST NotValidBefore="2013-11-11" NotValidAfter="2113-10-18">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
</EST>
</root>

TreeGridTable 개발 공유

1. 기존 Table

• 트리 형태의 데이터이며, 단순 들여쓰기로 표현됨.
• 한 줄 이상의 데이터는 표시되지 않으며, 클릭 시 펼칠 수 있도록 되어 있음.
• 테이블 가로 사이즈가 고정형이고, 가로스크롤바가 표시됨.

2. 요구사항

• 접고 펼 수 있는 트리 형태의 테이블
• 각 컬럼의 가로 사이즈를 조정 가능
• 컬럼의 가로 사이즈 조정시 다른 컬럼의 영향을 주지 않고, 테이블 전체 사이즈를 늘리고 줄일 수 있도록
• 기본적으로 전체 노드가 펼쳐진 상태
• 데이터의 내용이 왼쪽, 가운데, 오른쪽으로 정렬 가능
• 손 쉬운 사용

3. 구글링

• TreeTable : http://ludo.cubicphuse.nl/jquery-treetable/
• • 트리 형태를 가장 단순하게 표현하고 있음.
• jQuery UI Resizable :  http://jqueryui.com/resizable/
• • 심플하면서 정말 강력함.
  • $('table td).resizable(); 을 하면, 각각의 셀들을 조정할 수 있으나 화면의 가로사이즈 이상으로 늘릴 수 없음.
• Resizable Columns :  http://dobtco.github.io/jquery-resizable-columns/
• • 컬럼의 사이즈를 저장하고 있어서 재로딩 후에도 가로 값을 유지함.
  • 컬럼 사이즈 조절시 다른 컬럼에 영향을 미침.
  • 맨 오른쪽 컬럼의 사이즈를 조절 할 수 없음.
• jExpand :  http://www.jankoatwarpspeed.com/expand-table-rows-with-jquery-jexpand-plugin/
• • 이건 아닌 것 같음.
• DataTables:   http://www.datatables.net/
• • 데이터 정렬 기능과 페이징 말고는 없음.
• FixedHeaderTable :  http://www.fixedheadertable.com/
• • 정말 고정 헤더/푸터 기능 이외에는 없음.
• Felxigrid :  http://flexigrid.info/
• • 셀 가로 사이즈 조절 가능, 맨 오른쪽도 조절 가능.
  • 세로의 고정, 자동 지원.
  • 셀 위치 변경 가능.
  • 셀을 켜고 끌 수 있음.
  • 페이징 및 추가/삭제 기능.
  • 고정 헤더 및 ajax 지원.
• Ingrid :  http://reconstrukt.com/ingrid/
• • 이것도 아닌 것 같음.
• TableSorter :  http://tablesorter.com/docs/
• • 심플하고 괜찮음.
• 기타 등등...

4. 프로토타입

1. TreeTable + jQuery UI Resizable
   • 잘 작동함.
   • 가로 길이만 조절하면 되는데, 세로도 조절됨. 막는 코드가 필요함.
   • 맨 오른쪽 셀을 조절 할 수 없음.
2. TreeTable + Resizable Columns
   • 잘 작동함.
   • 가로만 조절 가능하기에 세로 조절을 막는 코드를 넣을 필요가 없음.
   • 이것도 맨 오른쪽 셀을 조절 할 수 없음.
3. TreeTable + Felxigrid
   • 잘 작동함, 단 TreeTable을 선행 후 Felxigrid를 수행해야 함.
   • 가로만 조절 가능하며, 맨 오른쪽 셀도 조절 가능 함.
   • 기본 디자인 괜찮음.

5. 결론 및 개발 전략

• 프로토타입 3번 조합으로 결정
• Node.js + Grunt(Javascript Task Runner such as Ant http://gruntjs.com/) + Bower(Package Manager for the web such as Gem, NPM http://bower.io/) 을 이용하여 개발
• TreeTable과 Flexigrid는 Github에 등록되어 있음, 해당 js+css 파일만 복사해오는 방법이 있으나 그러지 않고, Bower에 패키지를 등록하여 설치/관리 하도록 함.
• 두 라이브러리가 일부 기능 변경이 될 수 있으므로 제 github로 Fork 한 뒤에 Bower에 등록한다.
  • • https://github.com/iamdenny/jquery-treetable
    • https://github.com/iamdenny/Flexigrid
• demo(데모), docs(문서), src(개발), test(유닛테스트) 등의 폴더 구조를 갖는다.

6. 결과물

GitHub를 이용하여 남의 코드 바꾸기.

요즘 간간히 node.js를 이용하여 개발하고 있는데요.

NPM(node package manager)나 Github등을 통해 여러 오픈 소스를 가져와서 사용하다보니 무척이나 편리합니다.

그런데 다운 받은 오픈소스에 버그가 있는 경우가 있습니다.

설치한 코드를 직접 찾아가서 수정하고 끝내도 되지만, 

좀 더 나은 세상(?)을 만들기 위해 소스 코드 수정 요청을 하였습니다.

몇시간 후 제가 요청한 부분이 반영이 되었고, 이제 다른 사람들도 변경된 모듈을 다운 받을 수 있게 되었습니다.

참 재밌고, 신이 났습니다. 전혀 모르는 외국 개발자들과 일하기가 이렇게 쉽게 될 줄은 몰랐었으니까요.

그리하여 제가 경험했던 것을 공유합니다.

1. node.js를 이용하여 imgur.com에 이미지를 자동으로 업로드하는 모듈을 찾기

2. https://github.com/adamcoulombe/node-imgur-upload 당첨.

3. 설치 후 개발.

4. 앱 실행 후 간혈적으로 오류 발생.

5. 원인은 node-imgur-upload 모듈에서, 이미지 업로드 후 결과값을 무조건 JSON으로 파싱함. (일부는 html 형태로 와서 오류가 남)

6. https://github.com/adamcoulombe/node-imgur-upload를 제 GitHub로 Fork(https://github.com/iamdenny/node-imgur-upload) 해서 소스코드를 수정 후 커밋

https://github.com/adamcoulombe/node-imgur-upload/commit/fc7c828c9f45d62e102f7f7ccbab7f098a8f97cc

7. Pull Request를 누르고, 어떤 오류가 있고, 원인이 뭐고, 해결책은 이러이러하여 커밋하니 리뷰해 달라, 라고 작성.

https://github.com/adamcoulombe/node-imgur-upload/pull/1

8. 몇시간 후 적용됨

https://github.com/adamcoulombe/node-imgur-upload/blob/master/lib/imgur-upload.js

정말 재미난 경험을 했습니다. 앞으로 더 많이 이런 활용을 해나가서 오픈 커미터로 활동해보고 싶은 욕심이 생겼습니다.^^

[BigScatterChart] 대용량 스캐터 차트 개발 공유

1. 요구조건

 - 50만개 이상에도 끄떡없는 대용량 스케터 차트

 - 마우스 드래그시 해당 영역의 스캐터를 반환해야 함

 - 스캐터 점의 타입이 여러개가 될 수 있음

 - 특정 주기마다 차트가 업데이트 될 수 있음

2. 기존 스캐터 차트

 - d3.js visualization을 이용하여 개발되었음

 - SVG를 이용하고, d3.js에서 기본적으로 제공하는 마우스 이벤트나 xy축 자동 계산, formating등등이 용이함

 - 상단의 스캐터 차트는 약 8만개의 점을 그리고 있음

 - 8만개를 한번에 로딩해서 불러오지 않고, 5천개씩 끊어서 로딩 후 그림

 - 다 그린 후 약 8만개의 DOM Elements가 생성됨

 - 메모리가 여유가 없을 경우, 차트를 그리는 이외의 작업을 할 수가 없음

 - 마우스 드래그 검색시, 선택 영역이 커질 수록 반응 속도가 느림

3. 리서치한 다른 스캐터 차트

 3.1 Google Scatter Chart (https://developers.google.com/chart/interactive/docs/gallery/scatterchart) 

  - SVG를 이용하며, 기능이 d3.js에 비해 많이 부족함, 이럴바엔 d3.js를 사용하는게 나음

  - Free License (https://developers.google.com/readme/policies?hl=en) 

 3.2 NVD3.js Scatter Chart (http://nvd3.org/ghpages/scatter.html)

  - d3.js를 이용하여 개발되었음

  - 마우스 오버시, 가이드 라인기능

  - Magnify 기능을 이용하여 해당 부분을 마우스를 이용하여 돋보기 할 수 있음

  - UI에서 드래그선택 기능을 제외하고 필요한 기능은 이미 개발 되어 있음

  - 하지만, 50만개 점을 그릴때 여전히 SVG는 50만개의 DOM Elements를 만들어서 느림

  - BSD License

 3.3 canvasXpress Scatter Chart (http://canvasxpress.org/scatter2d.html)

  - Canvas를 이용함, DOM Element가 거의 필요 없음

  - 마우스 영역 선택시, 해당 부분 확대 기능

  - 스캐터 점에 따라 회귀선 또는 분포선이 자동으로 그려짐

  - 3D 스케터도 지원함 (http://canvasxpress.org/scatter3d.html) 

  - LGPL 3.0 License.

 3.4 moochart (http://moochart.coneri.se/)

  - Canvas를 이용함

  - 너무 심플하여 기능 개발이 많이 필요함

  - MooTools javascript framework에 종속적임

  - MIT License

 3.5 결론
  - 이외에도 여러가지 차트가 많이 있다. svg를 이용하여 개발할 경우 DOM을 이용하여 각종 이벤트를 제어 가능하기에 사용자를 만족시킬 수 있는 인터렉션을 쉽게 개발 할 수 있다. 하지만 Bubble(스캐터 점)이 늘어 날 수록 DOM의 갯수가 늘어나 브라우저가 느려진다.

그래서 많은 양의 데이터는 2D 캔버스를 이용하여 그리는 것이 성능에는 좋다. 왜냐하면 필요한 DOM만 가지고 있기 때문이다. 리서치 한 결과 canvasXpress의 Scatter Chart가 Mash up 개발을 하기에 적합하였으나, 라이선스문제와 불필요한 기능들로 인한 성능 저하 예상으로 포기하였다. 대안으로 moochart를 이용하여 필요한 기능들만 추가 개발하려고 하였으나, jQuery가 아닌 MooTools을 이용하여 개발되었기에 moochart의 컨셉만을 가지고 새로 개발하기로 한다.

4. BigScatterChart

 4.1 주요 피처

  - 50만개 이상의 점을 찍더라도 느려지지 않음

  - 상단 Type 클릭시 보기, 감추기

  - 상단 Type 드래그&드랍 시, 스캐터 차트 Layer 순서 변경

  - 차트 영역에서 드래그 & 드랍시 셀렉트박스로 해당 부분 선택

  - 드래그 셀렉팅 후 스캐터 차트 영역에 맞게 맞추기

  - 드래그 설렉팅 후 해당 영역 검색

  - 특정 주기로 차트 업데이트시, 드래그 셀렉팅 영역도 같이 이동

  - 특정 주기로 차트 업데이트시, 약0.004s 시간 소요(50만개 전체 업데이트시, 약4초 소요)

  - 각종 커스텀 이벤트 제공

 4.2 성능개선

  - SVG에서 Canvas로 변경하여, 성능저하 요인인 DOM Elements를 최소화

  - 특정 주기 업데이트시, 한번 Canvas에 그린 스캐터 버블은 다시 그리지 않고, 해당 영역을 이동 후 추가분만 그리기

  - 가이드라인 Canvas와 스캐터 Canvas를 분리하여, 불필요한 작업을 줄이고, Type별로 Canvas를 또 분리하여 Type별로 제어가 가능함

  - 스캐터 테이터를 1차원 배열에 저장하지 않고, 2차원 배열에 저장함으로써, array[들어온 순서][데이터] 로 분리하고, arrayInfo[들어온 순서] 에서 최소, 최대값등등의 정보를 캐싱 함

  - 드래그 셀렉팅 검색시, x, y, width, height를 x-from, x-to, y-from, y-to로 파싱하고, 스캐터 데이터에서 보다 효율적으로 검색하기 위해 arrayInfo에 캐싱된 정보이용하여 1차 판별 후,  2차 검색을 실시하여 결과를 리턴

  - 특정 주기로 업데이트시, 사라지는 영역의 데이터 버림

  - 상단 Type 드래그 소팅시 Canvas Layer의 순서를 변경할 때, jQuery의 before, after 메소드를 이용하지 않고, z-index 값으로만 조정. 이유 : jQuery before, after는 해당 DOM Element를 Clone 하여 복사하고, 기존 값은 지우는데, 이때 Canvas의 Context는 복제하지 않음. Canvas용 before, after를 만들 수도 있지만, z-index 변경이 더 심플하고, 강력함.

5. 성능 비교

비교	기존(D3.js) 8만개 실데이터	신규(BigScatterChart) 50만개 랜덤데이터
렌더링 속도	약 33초	약 6초
렌더링 메모리	150 ~ 250M	50 ~ 80M
드래그 셀렉팅 속도	3초이상	0.2초 이내
드래그 셀렉팅 메모리	80M 이내	20M 이내

(위 성능 비교 자료는 iMac 10.8.3, 2.7Ghz, 16G, 크롬 26.0 버전에서 '활성 상태 보기' 유틸리티를 이용하여 이루어짐)

6. Feedback

 - 이밖에 BigScatterChart 성능 개선 관련하여 좋은 아이디어를 가지고 계시면 공유 부탁드립니다.

감사합니다.

[발번역] PeerJS: A Peer to Peer Networking Library in JavaScript using WebRTC

PeerJS: A Peer to Peer Networking Library in JavaScript using WebRTC
PeerJS : 자바스크립트 WebRTC를 이용한 1:1 네트워킹 라이브러리

I just caught wind of PeerJS, a project that makes peer to peer networking using the new WebRTC browser APIs easier.  WebRTC is extremely cutting edge and the library currently only works in Chrome Canary and Dev Channel, so take this with a grain of salt but it is exciting to see cutting edge libraries like this.

WebRTC 브라우저 API를 사용하여 1:1 네트워킹 프로젝트를 시작했다. WebRTC는 최첨단이며 현재 크롬 카나리아와 개발자 채널에서 작동한다. 그럼에도 불구하고 굉장히 흥미로운 첨단 라이브러리이다.

PeerJS actually consists of two parts: the client side script that communicates with other clients using WebRTC, and a Node.js servercomponent that brokers the connections between the clients.  The server keeps track of each client that is currently online so that the clients can become aware of each other.  Once the clients know about each other, they can connect directly thanks to WebRTC’s RTCPeerConnection API, which allows sending arbitrary data between clients with an API very similar to the WebSocket API.  Both binary and textual data will be supported, but right now only text is working.

PeerJS는 실제로 두부분으로 되어 있다: WebRTC를 사용하여 다른 클라이언트들과 통신을 하는 클라이언트측 스크립트와 클라이언트 간의 연결된 브로커 역활을 하는 Node.js 서버 컴포넌트로 구성되어 있다. 서버는 클라이언트가 서로를 인식 할 수 있도록 현재 온라인에서 각 클라이언트를 추적한다. 클라이언트가 서로에 대해 알고 나면, 그들은 WebRTC의 RTCPeerConnection API에 직접 연결을 할 수 있다, 이는 WebSocket의 API와 매우 비슷한 API를 사용하여 클라이언트 사이의 임의의 데이터를 보낼 수 있다.바이너리 및 텍스트 데이터가 지원되지만, 현재는 텍스트만 작동한다.

PeerJS wraps all of this up in a nice API, and they even provide a free server for you to use with an API key if you don’t want to run your own.  They also handle all of the complexities of working with the WebRTC API including handshaking, temporary binary string encoding until browsers implement sending binary data directly, and of course the actual server brokering of connections.  WebRTC handles the actual networking complexities for you, including NAT traversal, UDP and the actual peer-to-peer connections themselves.

PeerJS는 멋진 API를 제공하고 있고, 여러분이 직접 서버를 운영하지 않을 경우를 위해 API키와 함께 무료 서버를 제공한다. 그들은 또한 핸드 쉐이크를 포함하여 복잡한 WebRTC API 작업을 처리하고 임시 바이너리 문자열 인코딩의 브라우저는 바이너리 데이터를 직접 전송하고 연결과정의 실제 서버 중개까지 구현되어있다. WebRTC는 NAT Traversal, UDP 및 실제 Peer to Peer 연결 자체를 포함하여 여러분을 위해 실제 네트워크의 복잡성을 처리한다.

The API looks really easy to use.  You can check out a peer to peer chat demo using PeerJS online, and its source on Github as well.  However, as I mentioned at the top of this post, the library currently only works in the Canary and Dev versions of Chrome 26, and Firefox apparently doesn’t work yet.  It is exciting to see WebRTC coming along, both in terms of live video and audio transmission as well as arbitrary data.  WebRTC is a major undertaking for browser vendors, but I think it will create some great opportunities for browser based apps in the future.

API는 정말 보기에도 쉽다. 여러분은 PeerJS를 이용한 데모 채팅을 확인 할 수 있으며, 그 소스코드를 GitHub에서 다운 받을 수 있다. 하지만, 이 글의 상단에서 언급 했듯이, 이 라이브러리는 현재 개발자 크롬 버전 26과 카나리아에서 작동하고 Fixfox는 아직 작동하지 않는다.이 WebRTC는 라이브 비디오 및 오디오 전송뿐만 아니라 임의의 데이터의 관점에서 모두 함께 볼 수 있는 흥미로운 것이다. WebRTC는 브라우저 벤더를 위한 주요 사업이지만, 나는 미래의 브라우저 기반 애플리케이션에 대한 멋진 기회를 창출 할 것이라 생각한다.

One of the things that might be made possible with WebRTC and a library like PeerJS is a browser based BitTorrent client.  Previously it has been pretty much impossible because the only protocols supported via JS have been WebSockets and HTTP.  I’m not entirely familiar with the details of WebRTC, but it sounds like it will give developers much more networking flexibility.  I’m not sure what the security restriction are. Same domain wouldn’t really apply here, so I guess it would probably just ask the user’s permission, as it should.  Let me know if this I’m mistaken, but I think a BitTorrent client could be an feasible possibility.

WebRTC와 PeerJS 같은 라이브러리가 브우저 기반의 BitTorrent 클라이언트에서 사용 가능하게 될지도 모른다. JS를 통해 지원되는 유일한 프로토콜은 WebSockets와 HTTP 이였으므로 이전에는 불가능 했다. 나는 완벽히 WebRTC에 대해 알지 못하지만  그것은 개발자들에게 더 많은 네트워킹 유연성을 제공한다. 같은 도메인이 정말 여기에 적용되지는 않을 것이다.(크로스도메인이슈) 나는 생각에는 단지 사용자의 권한을 요청 할 수 있을 것 같다. 만약 내가 잘못 알고 있다면 알려주길 바란다. 하지만 내 생각에는 BitRorrent 클라이언트는 가능성이 있을 것 같다.

You can check out PeerJS on Github, and find the documentation and demos on their website.  I’m looking forward to seeing the future of WebRTC as it is implemented in browsers and demos and libraries start to make use of it!

여러분은 PeerJS를 GitHub에서 다운로드 받을 수 있으며, 문서와 데모를 웹사이트에서 찾아 볼 수 있다. 나는 브라우저에서 WebRTC가 구현되기를 기대하고, 데모와 라이브러리 사용을 시작한다.

Ref : http://goo.gl/czuhK

Mobile Photo Viewer

네이버 자동차 모바일 프로젝트 개발 중에 포토뷰어 개발을 맡게 되었다. 진도 프레임워크를 이용하여 개발하였는데, 콤포넌트화하여 널리 공유하면 좋을 것 같아서 만들기 시작했다.

개발 방법을 어떤 걸 선택할까 고민이 많았다. TDD, ATDD, XP, SCRUM등등 고민 고민 끝에 나는 RDD로 하기로 했다. RDD는 Readme Driven Development이다. DDD(Document Driven Development)과 유사하다. 선택한 이유는 가장 쉽고 정리가 잘 되기 때문이다. 머리 속에 대략적으로 설계 해 놓은 것을 쉽게 글로 막~ 적으면서 정리하면 된다. 그리고 다른 분들이 멋드러지게 작성해 놓은 문서를 밴치마킹 하면서 하면 된다^^. 그래도 Unit Test는 하려고 준비는 해뒀다. 시간 나면 해야지.

소스 형상 관리는 할까, 말까, 고민하다가 하기로 하였고, SVN을 할까 GIT를 할까 고민하다가 GIT를 선택했다. Private으로 할까 Public으로 할까 하다가 이왕 만들꺼 널리 공유하면 좋을 것 같아서 Public을 선택했다. 저장소를 github.com로 할까, dev.naver.com으로 할까, 서버를 만들까 하다가, 전세계적으로 많이 쓰여지고 있고, 트렌트로 떠오르고 있는 github.com을 선택했다. github.com에 소스를 올리면 곧 이력서가 되는 세상이 한국에도 오고 있다.

개발을 쌩 javascript부터 하기엔 개발시간이 늘어날 것 같고, jQuery를 이용하자니 내가 몸담고 있는 곳에서 만든 Jindo가 걸린다. Jindo 선택! Class Base로 개발할 것인가, Module Base로 할 것인가? 난 개인적으로 Class Base가 좋다.

개발툴은 Sublime2 Text 2를 이용했다. 아직 많이 모르지만 가볍고, 여러 유용한 기능들이 편하다. 압타나는 너무 무겁고, 에디터플러스2는 가볍기만 하다.

빈 폴더, Html, Css, Js 파일을 만들고, 초기에 필요한 것들을 셋팅한다. jindo 파일도 넣어놓고, 이미지도 넣어놓고...

이제 본격적으로 개발에 들어간다. jindo.m.Photoviewer.js 파일에 클래스를 만든다. 우선 환경변수를 인자값으로 받을 수 있도록 준비하고, 하나씩 개발해 나가면서 점진적으로 나아간다.

현재 버전 1.0.0을 제작하였다. 앞으로도 수 많은 기능을 넣어야 한다. 완료되면 jQuery Mobile 버전으로도 제작해야겠다.

https://github.com/iamdenny/MobilePhotoViewer