2013년 2월 25일 월요일

[발번역] 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가 구현되기를 기대하고, 데모와 라이브러리 사용을 시작한다.


2013년 2월 20일 수요일

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