[EP] HTML5 Developer Conference 후기 #2..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

2일차

Which Way Is Forward - Doug Crockford, PayPal

말로만 듣던 자바스크립트계의 요다님이신 더글라스 크록포드님의 발표였다. 실제로 봤다. 사진하고 똑같이 생겼고 키 엄청 커!!!(같이 사진이라도 찍고 싶었는데 잠시 보이다가 사라지셨;; ㅠㅠ) 제목으로는 내용을 가늠하기 어렵지만 프로그래밍 언어에 대한 얘기였다. 사실 제대로 못 알아듣기도 했고 중간에 온라인으로 할게 좀 생겨서 잘 듣지 못했다. ㅠㅠ 어쨌든 예전으로 돌아가서 goto문얘기부터 프로토타입 상속, 타입 등 언어에 대한 얘기였다.

Introduction To The Next Generation JavaScript Library for SVG - Dmitry Baranovskiy, Adobe

알만한 사람은 아는 SVG 라이브러리 Raphaël을 만든 드미트리에 발표로 이 발표에서 새로운 SVG 라이브러리를 발표한다고 미리 얘기했기 때문에 기대를 하고 있었다.(난 SVG를 쓸 일은 별로 없었지만...) 2008년에 Raphaël을 만들었는데 DOM 처리가 어려워서 Raphaël을 안쓰겠다고 불평하는 사람이 많이 있었다. 그래서 새로 만든 SVG 라이브러리가 Snap.svg이고 Raphaël이 구형 브라우저를 지원하기 위해서 SVG와 VML의 공통 부분만 다루고 있기 때문에 제한적이었다면 Snap.svg는 모던 브라우저만 지원하기에 SVG를 완전히 지원한다. 간단히 Snap.svg를 다루는 예제(Getting Started의 내용이다.)를 보여주었는데 꽤 편해보였다.(써보기전엔 모를 일!)

발표뒤에 d3.js와 어떻게 다르냐는 질문이 있었는데 d3.js는 비쥬얼라이제이션 라이브러리고 Snap.svg는 SVG 라이브러리라고 대답했고 성능문제는 어떻게 생각하냐는 질문에는 다른 기술은 다른 문제를 다루므로 성능때문에 SVG가 적합하지 않다면 Canvas를 사용했다고 했다.

React: Rethinking best practices - Pete Hunt, Instagram

• 발표자료

이 발표는 JSconf.eu와 똑같은 발표이므로 발표영상도 공개되어 있다.(영상은 안봤지만 슬라이드가 동일하니 발표도 똑같겠지) 페이스북이 공개한 React라는 자바 스크립트 프레임웍에 대한 발표였는데 이름정도는 알고 있었지만 깊게 보지는 않았는데 이 발표를 듣고 AngularJS와는 또 다르게 꽤 관심이 많아졌다. 조만간 기회가 되면 한번 사용해 볼듯 하다.
React는 템플릿 대신 컴포넌트를 만들라고 하고 있는데 템플릿은 기술은 분리하지만 관심사는 분리하지 못하므로 모델을 바꿀때 뷰가 다 깨지게 된다. 그래서 컴포넌트로 관심사를 분리할 수 있는데 이 컴포넌트는 구성할 수 있고 재사용할 수 있고 테스트할 수 있다. UI가 어려운 이유는 상태가 많기 때문인데 React는 데이터가 변경될 때마다 완전히 새로 렌더링한다. 대신 AngularJS와 다르게 양방향 바인딩(좋지만 디버깅이 어렵다.)이 없고 더티 체킹을 하지 않는다. 명시적인 DOM 작업을 전혀 하지 않고 모든걸 선언적으로 처리한다. 매번 렌더링한다고 하면 느리다고 생각하기 마련인데 React는 Virtual DOM을 사용해서 성능을 해결했다. 데이터가 변경될 때마다 Virtual DOM을 생성해서 기존 거과 다른 점을 찾아서 최소한의 변경사항만 찾아낸다. DOM이 느리기 때문에 이 방법이 아주 빠르고 DOM처리는 최소한으로만 이뤄지며 Virtual DOM이 DOM API에 의존하지 않기 때문에 SVG, Canvas도 지원함에도 DOM 없이도 테스트할 수 있고 심지어 Node.js에서도 돌아간다.

WebSocket Perspectives and Vision for the Future - Frank Greco, Kaazing

이 발표는 영 별로였다. 그냥 예전의 웹은 어땠고 웹소켓이 왜 등장했고 웹소켓 동작방식이나 패킷에 대한 설명을 한참 하다가 데모 시연으로 넘어갔다 데모는 라즈베리파이에 연결한 램프가 있고 노트북과 연결해서 웹소켓으로 램프를 키고 끄고 하는 시연이었는데 뭔가 엄청난 일이 이뤄지는 듯이 설명했지만 라즈베리파이라고 특별히 다를 것도 없고 신기할 것도 없었다.(그냥 웹소켓으로 요청왔다갔다 하는거잖아!)

AngularJS and the Single Page Application (SPA) - Joshua Woodward, Ebay

장소가 좀 작은 곳이기도 했지만 사람이 너무 많이 들어와서 앉을 자리가 없을 정도로 사람이 몰렸다. 뭐 받아적지는 못했는데 Angular.js 소개정도의 발표였다. Angular.js 설명하면 항상 나오는 양방향바인딩부터해서 서비스, 디렉티브등을 설명했는데 그냥 튜토리얼 수준이었다. 외국에서도 아직 Angular.js가 초창기인지 이번 컨퍼런스에서 고급 팁이라던가 성능향상이나 경험등을 듣기 원했는데 대부분 튜토리얼 수준이라 많이 아쉬웠다.(큰 무대에서는 규모에 맞게 퀄리티와 수준을 올리라고!)

PDF.js - Firefox's HTML5 PDF Viewer - Brendan Dahl, Mozilla

파이어폭스에 내장된 PDF 뷰어인 pdf.js에 대한 발표였다. 처음에는 PDF 포맷에 대해서 설명하고 2011년에 Firefox 4를 발표하면서 pdf.js를 만들었다. pdf.js를 만든 이유는 보안이슈가 크고 사용자 경험을 좋게하고 성능을 높이기 위함이었다. 그리고 HTML5 기술을 한계까지 써보려는 의도도 있었다. 2011년 드디어 뷰어가 완성되었는데 텍스트 처리가 상당히 어려운 부분이었다. OS마다 폰트 엔진이 다르고 언어마다 다양한 경우가 있기 때문인데 이부분이 pdf.js의 큰 부분 중 하나이다. 그리고 성능을 위해서 최대한 웹워커를 사용하고 있다.
2013년 파이어폭스 14 나이틀리 버전에 pdf.js가 내장되었고 2013년 2월에 안정버전에 포함되었다. 그 뒤에 수많은 버그를 처리하고 한번에 다 로딩하지 않고 사용자가 스크롤을 할 때 이어서 로딩하고 증분 렌더링(incremental rendering)을 적용했다. 그래서 현재는 파이어폭스 뿐만 아니라 크롬, IE 9+, 사파리, 오페라에서 모두 동작하고 주요 PDF 기능을 거의 지원하고 있다. 거의 내가 이번 컨퍼런스에서 듣고 싶은 내용의 가장 적합한 발표중 하나였다. pdf.js를 만들면서 해결한 문제들과 배운 것들을 생생하게 들을 수 있는 자리였다.

맺음말

컨퍼런스는 2일이었지만 운좋게 출장기간도 길게 잡혔고 주말도 붙혀서 갔다 왔기에 여유로운 시간을 좀 보내고 왔다. 출장 가기전에 발표다 교육이다 해서 사실 지쳐있었는데 여유로운 시간을 보내면서 적당히 회복을 하고 돌아왔다. 작년에 갔던 Nodeconf의 화기애애한 분위기와는 또 달리 사람들하고 어울릴 틈은 별로 없었지만 좋은 시간이었다. 나중에 이 다음날부터 New Relic의 {Future}Stack 컨퍼런스가 있다는 걸 알게되었는데 좀 미리 알았다면 이것까지 듣고 올 수 있게 일정을 잡았을텐데 좀 아쉽긴 하다.

[EP] HTML5 Developer Conference 후기 #1..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

HTML5 Developer Conference가 샌 프란시스코까지 출장을 간 이유였다.(d3.js 유저그룹이 아니라..) 사실 출장 그것도 해외로 출장가는 건 처음이다. 작년에 Nodeconf에 참석했을 때는 내 돈이랑 휴가를 쓰고 갔던거였는데 출장으로 가게 되니 참으로도 좋았다. 마음도 훨씬 여유롭고... 사실 출장으로 가게 된 것이기 때문에 컨퍼런스 자체는 내가 고른 컨퍼런스가 아니고 HTML5 Developer Conference도 이번에 처음 알게된 컨퍼런스다. 히스토리를 보면 2011년에 처음 열려서 작년부터는 1년에 두번씩 열리고 있다.(이전의 발표자들이 좀 더 네임밸류가 높았던 느낌은 있지만...)

HTML5 Developer Conference

컨퍼런스는 샌프란시스코 시내에 위치한 모스콘 센터(Moscone center)였다. 모스콘센터는 Google I/O나 WWDC도 종종 열리는 큰 곳이다. 가보니 센터가 엄청 커서 한블럭가까이 차지하는 건물이 3개나 되었고 HTML5 컨퍼런스는 그 중 하나에서 열렸다. 마침 컨퍼런스가 열리는 날이(22일) 애플이 발표하기로 되어 있었는데 바로 옆에 애플 로고가 있고 사람들이 모여있는 걸 보니 저 안에서 발표를 하고 있었던 듯 하다.

바로 건너편의 모스콘센터에서는 GMIC이 같은 일정으로 열리고 있었다. 컨퍼런스 장에 들어가서 명찰을 받으려 했지만 내 명찰은 찾을 수 없었고 어떤 아가씨가 명찰에 휘갈겨 써주었다. ㅠㅠ 실제 컨퍼런스는 지하에서 열렸는데 가운데는 로비처럼 큰 공간이 있고 한쪽에는 세션을 할 수 있는 장소들이 몰려있고 반대쪽을 오픈된 공간으로 여러 부스들이 몰려 있었다. 인텔, 트위터, YELP등이 와서 자신들의 제품들을 홍보하거나 구인을 하고 있었다. 부스는 뭐 크게 볼 것은 없고 일반적인 부스였지만 이런 저런 기념품은 참 많이 주었다.

컨퍼런스 규모든 상당히 컸는데 키노트 제외하고 하루에 총 6개의 세션이 존재하고 한 세션에는 최대 12개까지의 트랙이 동시에 진행이 되었다.(행사 일정이 세로보다 가로가 훨씬 긴 경우는 처음 봤;;;) 시간에 따라서는 12개가 다 안채워지는 경우도 많았지만 어쨌든 12개 중에서 하나를 골라서 들어가려다 보니 참 고민이 많이 되었다. 영어라서 사실 막 다 알아들은건 아니라서(영어로 들으면서 화면보면서 적는건 너무 어렵다.) 대충 간략히만 정리하려고 한다.

간단히 요약하면 전에 가본 해외 컨퍼런스는 커뮤니티주도 컨퍼런스였기 때문에 이런 일반적인 해외 컨퍼런스는 처음 참석해봤는데 커뮤니티 컨퍼런스의 질이 좋은 건 해외나 국내나 비슷한 것 같다.(Google I/O나 WWDC같은 초대형 컨퍼런스는 가본적없으므로 예외) 너무 방심하고 제목만 보고 세션을 골랐더니 기술공유가 아니라 제품홍보를 위한 세션이 너무 많았다. 그래서 첫날의 경험을 교훈삼아 이틀째는 주로 오픈소스 위주로만 들으니까 좀 나았다. 아무래도 요즘은 기술이 인터넷을 통해서 전세계적으로 잘 공유하기 때문인지 해외라고 퀄리티가 무척 높게 느껴지진 않았다.(그렇다 하더라도 해외 컨퍼런스는 참석해 보기를 권한다. 세션이야 공유되면 온라인으로도 볼 수 있지만 현지에서는 다른 느낄 수 있는 것들이 많이 있다.) 발표 퀄리티 자체만 보면 국내에서도 얼마든지 이정도 퀄리티로는 컨퍼런스를 열 수 있을 것으로 보였다.(물론 12트랙이나 운영하는 규모는 힘들지만...) 해외 컨퍼런스이므로 프로젝트의 커미터들의 경험이나 설명 혹은 실제적인 규모있는 프로젝트를 하면서 고민한 내용이나 경험을 공유해 주길 기대했는데 좀 뻔한 기술가이드정도 수준의 발표들이 많아서 아쉬웠다.(내가 세션을 잘못 골랐을 수도...)

1일차

The Future of Angular - Miško Hevery, Google

• 발표자료

얼마 전에 읽은 AngularJS 기초편이라는 책에서 저자인 브래드 그린이 서문에서 구글 피드팩이라는 프로젝트를 수행하다가 6개월간 17,000라인의 프론트엔드 코드를 프로젝트 팀원이 자신이 만든 프레임워크로 2주만에 새로 작성할 수 있다고 해서 시켰는데 실제로는 3주가 걸렸지만 완성된 코드는 1,500라인으로 줄어들어서 깜짝 놀랐다는 이야기가 나오는데 이것이 Angular.js의 시작이었고 그 주인공이 이 세션의 발표자인 미스코 헤브리이다. 최근에 Angular.js에 관심이 많기 때문에 이번 컨퍼런스에서도 관심 주제중 하나였고 막 가고 싶었던 컨퍼런스는 아니지만 흥미가 생긴 이유중에 하나가 이 세션이었다.(현재 미스코는 Angular.dart쪽에 집중하고 있는 듯 하다.)

미스코의 발표를 직접 들으니까 네임밸류덕에 좋았고 Angular를 본지 얼마 안되었기 때문에 사용법 익히기에 허덕여서 프로젝트 개발상태같은 건 아직 추적하지 못하고 있는데 그런 부분에 대한 전체적인 얘기를 들을 수 있었다.

• Angular.js는 최신 브라우저만 지원한다.(구현 브라우저는 1.x 브랜치에서 지원할 것이다.)
• 최신 HTML5 표준들을 더 적극적으로 사용할 예정이고 Polymer프로젝트의 Polyfill라이브러리에 대해서 많이 언급을 했다.
• 차후 계획에 대해서도 얘기했는데(결정났다기 보다는 시도중인듯) 비동기 의존성 주입(Asynchronous DI)와 Zone기능이다. AMD가 비동기로 코드를 로딩하는 것을 관리한다면 비동기 의존성 주입은 어떤 순서로 클래스를 인스턴스화할 것인지를 다루는 것이고 Zone 기능은 영역을 나누어서 Angular.js를 사용하는 곳에서 기존의 다른 라이브러리를 사용할 수 있도록 하는 것이다. ES6와 어노테이션을 얘기하면서 마치 자바처럼 보이는(자바스크립트가 아니라) 예시코드도 보여주었는데 ES6에 어노테이션이 있는 것은 아니므로 의도는 자료를 좀 찾아봐야 이해할 수 있을듯 하다.(dart인가? ㅡㅡ;;)

Memory management for smooth infinite-scrolling - Sumit Amar, Microsoft

• 발표자료

요즘은 무한 스크롤을 많이 사용하고 최근에 개인 프로젝트를 하면서 스크롤링에 대해서 고민을 좀 많이 했던지라 선택해서 들어간 세션이었다. 무한 스크롤을 구현하면서 고민했던 내용을 공유해 주었는데 그냥 뭐 고만고만했다. 첫 접근은 스택을 사용해서 사용자가 스크롤을 하면 화면에서 사라진 DOM을 제거하고 메타데이터를 로컬스토리지를 이용해서 스택으로 쌓고 나중에 사용자가 다시 스크롤을 올리면 스택에서 가져와서 DOM을 생성한다. 하지만 이 방법은 너무 빨리 스크롤하거나 드래그를 사용하는 경우 빠지는 아이템들이 생길 수 있다. 두번째 접근은 범위에 대한 해시테이블을 사용하는 것이다. 각 아이텝의 위치를 어떤 범위로 나누고 이를 키밸류로 해시테이블에 저장하고 스크롤 할때 범위단위로 가져와서 보여주는데 이 방법은 스크롤을 적게 할때는 비효율적이다. 최종적으로는 두 방법을 섞어서 사용했다고...

Scale and performance: data visualization in modern web browsers - Gregor Aisch, Driven-By-Data.net

• 발표자료

제목대로 비쥬얼라이제이션에 대한 발표였다. 자바의 Processing으로 만들어진 Fortune 500이라는 포츈기업들에 대한 비쥬얼라이제이션을 d3.js로 다시 구현한 경험을 얘기해 주었다. 성능상으로는 d3.js + SVG 조합보다 d3.js + Canvas 조합이 좀 더 낫고 특히 파이어폭스는 DOM이 많은 경우에는 크롬에 비해서 엄청나게 느린 성능을 보여주었다. CSS3 transition이 성능이 좋아서 requestAnimationFrame()보다 낫다. 마지막으로 성능을 위해서는 저수준으로 내려가서 사용하는 라이브러리의 소스코드를 봐야하고 여러 브라우저에서 다양한 시도를 해보고 성능을 측정하라는 말은 (평이하지만)좋았다.(발표자료가 좌우뿐만 아니라 위아래로도 움직이지 잘 움직여서 봐야한다.)

Develop High Performance Sites and Modern Apps with JavaScript and HTML5 - Doris Chen, Microsoft

MS에서 나온 사람이었는데 제일 별로였던 발표였다.(이래서 내가 에반젤리스트라는 직책은 안좋아한다능;;) 자바스크립트 성능 향상에 대한 얘기를 좀 들을려고 들어갔는데 자기 소개만 한 5분하더니 이 발표에서 설명할 내용은 윈도우즈 8 어플리케이션을 만드는데도 쓸 수 있다면서 윈도우즈 8 홍보도 한 5분한듯 하다. 그리고 바로 이어진 내용은 CSS는 헤더에 넣고 자바스크립트는 맨 아래 넣으라였던가?(틀린말은 아니지만 2013년에 이런 컨퍼런스에서 할 얘기는 아닌듯...) GC를 줄이는 얘기랑 메모리 초기화 비용에 대한 괜찮은 얘기도 좀 있었지만 약을 너무 팔아서 짜증나서 잘 들리지도 않았다. 성능 얘기하면서도 IE 11의 개발자도구에서 얼마나 프로파일링을 제대로 할 수 있는지를 열심히 홍보했는데 IE11은 아직 안쓰고 있지만 원래 그런거는 다른 브라우저에서는 대부분 되던거고 성능등에서 가장 문제를 많이 일으키는 7,8,9,10은 어떻하라고?라는 생각이 들며 대부분 MS에서 표준, 성능 얘기하면 짜증나는 이유와 동일하게 발표를 들으면서 짜증났다. 기술공유를 하고 싶은건지 홍보를 하고 싶은건지 알 수 없는 세션이었다.

Levelling Up in AngularJS - Alicia Liu, Lift

• 발표자료

내가 요즘 쓰고 있는 Lift서비스의 개발자였는데 이 서비스는 앱으로만 사용해서 여기서 Angular.js에 대해서 발표할 줄은 전혀 몰랐다. 나는 마구 써보면서 기본없이 AngularJS를 배웠기 때문에 정리하면서 듣기 괜찮았지만 Levelling Up이라기 보다는 Basic 정도에 가까웠다. 서비스, 프로미스 디렉티브에 대한 사용법이나 중요한 부분에 대해서 설명한 세션이었다. 디렉티브를 이용해서 만든 마리오 데모의 소스는 디렉티브 공부하면서 참고하기에 괜찮아 보인다. 디렉티브로 저렇게 간단히 데모를 만들 수 있다는 점이 AngularJS의 장점이겠지...

Optimizing HTML5 for Distribution on Mobile Devices - Russell Beattie, Amazon

이 날 최악의 세션선택이었다.(이번에도 역시 에반젤리스트) 고르고 골랐는데 이 시간대에는 마땅히 끌리는게 없었다. 제목은 저렇게 되어 있지만 한 20분 정도는 Amazon 앱스토어가 얼마나 좋은가에 대해서 설명했다. 킨들파이어를 안써서 정확히는 모르겠지만 아마존 웹스토어에서는 웹기술로 앱을 만들 수 있는 것 같다.(아마존이 그런건지 안드로이드의 하이브리드인지는 잘..) 어쨌든 웹앱으로 만든 앱들을 보여주고 자신들의 스토어가 얼마나 좋은지 홍보를 한 20분 한 뒤 다른 사람이 나와서 앱 등록하는 과정이나 이런거 좀 설명하면서 킨들파이어에서 앱이 어떤 식으로 동작하는지를 보여주었다. 뒷부분은 거의 집중력을 잃어 듣지도 않았지만 최적화얘기를 하기는 했는지도 모르겠고 그냥 아마존 앱스토어 광고였다.

[EP] Github HQ 3.0 방문기..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

d3.bayarea()의 d3 dat app 밋업에 참가한 이유는 관심기술이기도 했지만 장소가 다른 곳도 아닌 Github HQ 3.0이기 때문이었다. 정확한 히스토리는 모르지만 버전으로 봤을 때 3번째 사무실로 보인다. 그러니까 지난 번에 샌프란시스코에 왔을대 들어가진 못하고 앞에서 서성거리기만 했던 곳은 Github HQ 2.0이고 새 사무실은 올 8월정도에(추측) 새로 옮긴 사무실로 보인다. 이전 사무실은 못 들어가 봤고 검색하면 HQ 3.0 사진이 많이 나오긴 하지만 방문한 기념으로 남겨본다.

큰 건물의 3개층을 모두 쓰고 있었는데 1층은 행사하고 손님 맞이하고 식사하는 용도인듯 하고 일하는 사무실은 2,3층에 있는 듯 하다.(2,3층은 못 가봤다.) 투자를 엄청난 금액으로 받았으므로 사무실도 좋은 곳으로 크게 옮긴듯 하다. 간판이 붙었다. 전에도 스타트업 사무실들을 찾아 돌아다닌 적이 꽤 있는데 특이하게 이런 회사들은 간판자체가 아예 없는게 특징인데 드디어 간판이 붙었다. 간판은 대로변에는 없고 손님용(?) 입구인 골목쪽에 있는 입구에 달려있다. 이쁘다 옥토캣 간판... 현관에 들어가면 조금만 공간에 몇가지 기념품(?)들이 전시되어 있다.

옥토 트로피

Crunchie Awards에서 Best Overall Startup 2012, Best Bootstrapped Startup 2008로 받은 트로피다. 고릴라 캐릭터가 귀엽다.

Laptop of Ryan "Turn Up King" Tomayko라고 제목이 붙어 있었다. Ryan Tomayko, Kyle Neath, Chris Wanstrath이 Github의 풀리퀘스트를 최초로 구현할 때 사용된 노트북이란다.

Octocat Skeleto - Felis octocatus
깃헙이 익명으로 기증을 받은 옥토캣을 증명하는 가장 오래된 화석이란다. 대략 630만년정도 된 것으로 추측하고 중국해 남쪽해안 어딘가에서 발견되었고 Felis silvestris와 Felis octocatus사이로 분류된단다.(농담아니고??? 아무튼 저렇게 써있었음..)

옥토트로피... 이런거 집에 하나 있었으면 좋겠다.

현관을 지나가면 백악관의 대통령실처럼 꾸며놓은 이쁜 방이 나온다. 이 방의 정확한 용도는 잘 모르겠는데 쇼파도 있고 하는걸 보면 손님을 맞이하는 방이 아닌가 싶다.(입구에 있는거라서 회의같은 건 못할듯...) 공간의 일부를 이런식으로 꾸민 건 재미있다.

대통령 책상에 놓여있는 안내문(잔잔한 센스가...)

바닥에는 센스 좋게 United Meritocarcy of Github라고 써있는 양탄자가 깔려있다. 옥토캣이 손에 포크까지 들고 있는 센스가...

방의 일부에 놓여있던 장식물...

대통령실을 지나서 들어가면 옥토캣이 사색에 잠겨있다.(귀여워~)

그 옆으로는 식당으로 보이는 직원들이 앉아서 먹을 수 있는 공간이 있다.

한쪽에는 Github Pub이라고 해서 사내에 있는 Pub이라기에는 꽤 큰 규모의 Pub이 있다. 근무시간에도 운영하는 것인지는 잘 모르겠지만 d3 유저그룹 모임에 참석한 사람들은 그냥 가서 맥주든 뭐든 달라면 바로 준다.(근무시간에도 맥주를 주나?)

그 한쪽 편에는 세미나를 할 수 있는 공간이 준비되어 있다.

사내 세미나가 많은 것인지 이런 외부 행사를 많이 유치하는 것인지 세미나 장소는 아주 잘 완비되어 있었다. 7-80명정도 앉을 수 있는 공간인데 뭐 의자만 더 놓으면 훨씬 더 많이 앉을 수 있는 여유로운 공간이다. 빔프로젝트외에도 모니터가 사방에 준비되어 있어서 사람이 많이 왔을 때도 화면을 보는데 어렵지 않을 것으로 보이고 발표자용 모니터화면도 잘 준비되어 있어서 왠만한 세미나 시설못지 않다.

d3.bayarea() 밋업도 진행하면서 바로 실시간 중계를 인터넷으로 했는데 이 화면처럼 라이브로 발표화면과 발표자의 모습을 녹화할 수 있도록 시설이 완비되어 있다.(역시 투자를 많이 받으니 달라..)

뒤쪽에는 이렇게 녹화등을 관리하는 엔지니어실이 위치하고 있다. 이번에 샌 프란시스코를 가면서도 스타트업이나 유명한 회사들에 방문을 하고 싶었고 Github도 가보고 싶었던 곳이라서 메일 보내서 사무실 투어를 신청해 보거나 저번에 Github에서 얘기를 주고 받았던 Phil한테 부탁해서 방문해 볼까 하다가 일행이 있는게 아니고 혼자라서 약간 애매하기도 했고 또 사무실 방문은 그냥 가보고 싶은 것이지 거기서 얻을 수 있는 큰 의미는 없었기에 하지 않았는데 이런 기회로 갔다 오게 되서 참 좋다...

My Comment..
내가 가본 곳은 아니지만, 햄의 후기를 통해서 그래도 이렇게 생겼구나.. 이런 곳이구나.. 이렇게 생활을 하는 구나 하는.. 부분에 대해서 알게 되서 좋으다.. 모든 지식이나 정보란 것이 나 스스로 터득하면 좋겠지만 꼭 그게 정답은 아니니까..

특히나 IT 관련된 부분들은 항상 저 멀리 먼저 앞서나가는 햄의 정보를 토대로 공부하고 답습해도 나에게는 많은 도움이 된다라고 생각한다.. 새삼스럽게 햄.. thank u..

[EP] d3.bayarea() 유저그룹 Meetup 후기..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

컨퍼런스가 있어서 샌프란시스코에 출장을 갔다왔는데 주말을 이용해서 출장일정보다 조금 더 일찍 갔다왔다. 여유시간동안 쇼핑도 하고 여기 저기 돌아다녔지만 관광이 주 목적이 아니었기에 meetup사이트에 가서 갈만한게 있는지 계속 검색해 봤다.(나중에 보니 Eventbrite도 같이 검색해 보는게 좋을듯...) 사실 혼자가서는 외국인과 대화할 일이 별로 없기 때문에 꼭 기술관련 밋업이 아니더라도 갈만한게 있으면 갈 생각이었지만 딱히 갈만한 건 눈에 띄지 않았는데 베이지역의 d3 유저그룹에서 d3 dat app이라는 밋업을 한다는 것을 알게 되어서 갔다가 왔다.

d3.js는 관심기술이기도 했으니 참가하기 딱 좋은 밋업이었다. 사실 신청할 때 대기자가 몇십명정도 있어서 기대안하고 신청버튼을 눌렀는데 내가 잘못봤는지 어땠는지 참가승인이 나서 낮에 관광을 갖다가 와서 저녁에 냉큼 다녀왔다. 뭐 관광지라서 저녁에 걸어다녀도 위험하진 않았다. 뭐 아무래도 영어로 발표하다 보니 다 이해하진 못했고 대충이나마 적고 내가 잘못 이해하거나 중요한 부분을 빠뜨렸을 가능성도 높다.

Application building with D3 - John Firebaugh

• 발표자료

이 발표는 밋업에서 봤지만 아마도 HTML5 Developer Conference에서 발표한 내용과 동일한 듯 한다. 이 발표는 오픈스트리트맵의 맵 에디터로 d3기반으로 만든 iD라는 맵 에디터에 대한 얘기였다. 일반적으로는 jQuery나 Backbone.js등으로 웹 어플리케이션을 만들고 좀 더 최신기술을 사용하는 경우에는 ember나 angular.js를 사용하지만 iD는 이런 것들이 아니라 d3.js를 기반으로 만들었다. jQuery와 d3를 비교했을 때 Dimension관련 부분은 jQuery에만 있지만 데이터 바인딩은 D3에만 있고 그 외 Ajax, CSS, 이벤트등 대부분의 기능은 양쪽 모두에 존재한다.

d3.js를 선택한 이유는 선언적인 방법이 명령형(imperative) 방법보다 좋기 때문이고 jQuery가 명령형이라면 d3.js는 선언적이다. 프레임워크는 비즈니스 로직은 프리젠테이션 로직에서 분리하기 쉽게 해주는데 backbone.js는 이부분이 개발자의 몫이고 ember나 angular.js는 스마트 템플릿을 사용하고 있다. d3에서는 3단계로 이뤄지는데 "진입(enter) -> 갱신(update) -> 종료(exit)"로 이뤄진다. 여기서 작업을 최소화 하기 위해서는 다음 규칙을 따르면 된다.

• 정적 프로퍼티는 진입 단계에서 선언한다.
• 동적 프로퍼티는 갱신 단계에서 선언한다.
• 대량 갱신은 개별적인 "instance changed" 이벤트를 사용하지 않는다.
• 실제로 변경되는 요소의 선택을 필터링한다.

iD에서 모델은 불변객체이므로 변경하지 않고 변경해야 할 경우에는 새로운 객체로 만들고 히스토리를 관리하고 있다.
그리고 d3.js의 단점 중 하나는 너무 크다는 것인데 이는 smash로 필요한 파일들만 가져와서 빌드할 수 있다.(써본적은 없지만 smash도 d3.js를 만든 Mike Bostock이 만든 도구로 이미 d3.js도 이를 사용해서 빌드하고 있다.) 앞에서도 말했듯이 dimension관련 부분이 d3.js에 없는 것도 하나의 단점인데 이는 직접 플러그인을 작성할 수 있고 d3 플러그인은 d3-plugins나 d3-bootstrap에서 찾아볼 수 있다.

Pick technology that fits your problem domain.

.append() IT TO THE LIMIT - HIGH performance d3 - Victor Powell

• 발표자료 & 데모

d3 사용할 때 퍼포펀스 향상에 대한 얘기였는데 d3를 자세히 몰라서 그런지 제대로 잘 이해해지는 못했다. 최적화를 할때는 언제 최적화를 하고 언제 최적화를 하지 않을 것인지가 중요한데 이는 대부분 개발자 시간이 CPU 시간보다 크기 때문이다.

"Premature optimization is the root of all evil" - 도널드 크누스

setInterval() 보다는 requestAnimationFrame() 를 이용한 transition() 이 낫고 크기를 변경할 때는 redraw하는 것보다 scala(X,Y) 이 낫고 transform 보다는 cx, cy 를 이용하는게 빠르다. 그리고 왠만하면 DOM은 건드리지 않는게 좋은데 특히 계산된 프로퍼티는 조작하지 않는 것이 좋다. 그리고 값을 변경할 때 변경되지 않은 요소들은 미리 필터링하는 것이 성능에 좋다.

기타...

메인 발표는 위의 두 가지였고 유저그룹이다 보니 이후부터는 공유할 거리가 있는 사람들이 5분 10분씩 나와서 자신들이 한 작업들을 공유했는데 유저그룹에서 이런 진행은 자유스럽고 좋아보였다. Sara Quigley가 University of California System Campuses라는 캘리포니아 대학의 예산관련 비쥬얼라이제이션을 보여주었는데 그래프와 인터렉션을 깔끔하게 잘 만들었다. 이 인터렉션을 위해서 사용자가 어떤 값을 선택할 때 인터렉션을 보여주는 전략에 대해서 Strategic Dilemmas와 Strategy Spaces를 소개해 줬는데 잘 모르는 분야라 흥미로웠다.

CrowdSound라는 사이트를 준비하고 있는걸 보여주었는데 컨퍼런스 같은데서 청중들이 질문들을 올리고 발표자가 여기에 피드백할 수 있는(백채널이라고 하나?) 시스템에 대해서 보여주었는데 딱히 큰 건 없었다. 이 유저그룹에서 샌프란시스코의 교통수단인 Bart에 대한 비쥬얼라이제이션 사이트 Visualizing the BART Labor Dispute를 보여주었는데 실질적인 데이터로 유저그룹에서 저런 사이트를 만든게 재미있었다.(서울데이터로도 저런걸 만들 수 있을라나?) d3-tip을 쓰냐면서 좋으니까 꼭 쓰라고 했는데 이건 차트에서 툴팁 띄워줄대 유용할듯하다.