[NEWS] 기술 뉴스 #5 : 14-03-15..

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

웹개발 관련

• Sass vs. Stylus: Who Wins the Minimal Syntax Battle? : CSS 프리프로세서인 Sass와 Stylus의 문법을 비교한 글.(영문)
• Overview of ECMAScript 6 features : ECMAScript 6 표준의 기능이 잘 정리된 페이지.(영문)
• The Business Case for Node.js : nodeday 컨퍼런스에서 발표된 자료로 Paypal, walmart 등에서 Node.js를 적용한 케이스들이 정리되어 있다. 간단한 사례와 결과등만 나와 있고 코드 수준의 내용이 정리된 것은 아니다.(영문)
• Rethinking Responsive SVG : SVG를 이용해서 아이콘을 반응형으로 만드는 방법에 대한 설명. 글에서 참조한 CSS Sprite를 이용한 반응형 아이콘도 흥미롭다.(영문)
  

그 밖의 프로그래밍 관련

• GitHub Developer Program : Github가 개발자 프로그램을 공개했다. 이 사이트에 가입하면 Github API에 변경사항이 생겼을 때 알림을 받을 수 있고 추가될 기능을 미리 써볼 수 있으면 Github Enterprise 용 확장을 개발할 수 있는 라이센스를 얻을 수 있다.(영문)
• PIG Cheat Sheet : Apache Pig의 치트시트.(영문)
• Codename: BlueMix : IBM이 Cloud Foundry에 기반을 둔 PaaS를 공개했다. 현재 Beta상태로 가입을 해야 볼 수 있다.(영문)
• 모바일 앱 개발 방식을 완전히 바꿔버린 Facebook Paper : Wired의 Facebook Paper Has Forever Changed the Way We Build Mobile Apps라는 글을 정리한 글로 페이스북의 Paper의 UI를 만든 뒷이야기가 담겨있다.(국문)
• Java 8 Survey Results : Typesafe에서 지난달에 진행한 Java 8에 대한 설문 결과이다. 68%가 24개월 내에 Java 8로 업그레이드 할 계획이 있고 가장 기대하는 기능은 Lambdas를 뽑았고 59%가 오라클이 자바 보안 문제를 잘 처리하고 있다고 본다고 대답했다. 이 페이지에서 이메일 주소와 이름을 입력하면 30페이지짜리 설문결과 PDF를 다운로드 받을 수 있다.(한글)
• Introducing Atlassian Connect 1.0 : 아틀라시안이 Connect 1.0을 발표했다. Connect를 통해서 아틀라이안의 제품인 Jira나 Confluence를 위한 애드온을 아무나 만들어서 마켓플레이스에 올릴 수 있게 되었다.(영문)
• The Meteoric Rise of DigitalOcean : 클라우드 호스팅 업체인 디지털오션이 6개월 사이에 얼마나 성장하고 있는지 보여주는 Netcraft의 보고서(영문)
  

IT 업계 뉴스

• Apple CarPlay : 애플이 아이폰을 자동차와 연결할 수 있는 CarPlay 페이지를 공식 열었다.
  

볼만한 링크

• 디브온(DevOn) 2013 Daum 개발자 콘퍼런스 동영상 : 작년 디브온 콘퍼런스의 동영상이 공개됐다. 틈틈이 하나씩 보면 재미나는 세션들이 꽤 있다.(한글)
• 가짜 리뷰는 어떻게 골라낼까 : 스팸성 리뷰를 어떻게 찾아낼 것인지에 대한 다양한 연구 사례가 정리된 글.(한글)
• medium.com 류의 새로운 퍼블리싱 플랫폼 목록 : 블로그 플랫폼에 관심이 있다면 이 글에서 다양한 블로그 플랫폼을 볼 수 있다.(한글)
• 안드로이드의 “진짜” 보안 문제​ : 안드로이드가 보안이 안좋다는 인식에 대한 글인데 안드로이드를 쉴드친다기 보다는 보안이라는 부분을 어떤 시각으로 봐야 하는지 좋은 시각을 읽을 수 있다.(한글)
• Why Atom Can’t Replace Vim : 제목은 "Atom이 왜 Vim을 갈아치울 수 없는가?"이지만 주 내용은 Emacs의 확장성과 Vi의 조합성에 대한 설명이다.(영문)
• 구글 지도의 직관적인 새 디자인 뒷이야기 : 최근에 오랜만에 구글맵을 보고 달라진 모습에 약간 놀랐었는데 이 글은 Behind Google Maps' Intuitive New Design의 번역글로 구글맵 개편에 대한 얘기를 볼 수 있다.(한글)

[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]OKJSP 10주년 기념 세미나 후기..

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

지난 3월 26일에 OKJSP 10주년 기념 세미나가 정보통신산업진흥원 5층에서 열렸습니다. 신입시절에는 하루에서 수차례 들락거리면서 글을 보고 세미나에 참가하고 그랬던 OKJSP였는데 어느새 10년이나 되었습니다.(지금은 하루에 한번정도만 가는것 같습니다. 워낙 읽을 글이나 돌아볼 사이트가 많은 지경이라서요. ㅎ) Kenu님하고의 친분(친한척!!)도 이당시에 세미나를 왔다갔다 하면서 자주 뵙게 되어 쌓게 되었습니다. 회사도 10년을 운영하기가 쉽지 않은데 커뮤니티를 10년동안 운영한다는 것은 정말 보통일이 아닌것 같습니다.(요즘은 기술에 대한 논의 보다는 개발자의 삶을 나누는 커뮤니티라는 느낌이 더 강하기는 한데 그런 점이 저는 종종 안락함을 주기도 합니다. ㅎ) 

사실 오전에도 봄싹 스웨거가 있어서 시간이 약간 겹치기는 했는데 Kenu님과의 친분도 있고 해서 참가를 했습니다. 약간 늦어서 키노트세션인 OKJSP 커뮤니티 이야기는 듣지 못했네요 ㅎ java 커뮤니티이기는 하지만 최근에 Kenu님이 모바일쪽에 집중하셔서인지 발표세션도 대부분 모바일쪽이 치중되어서 이루어졌고 대부분 키노트를 사용한 화려한 플라이드가 인상적이었습니다. 발표자료는 여기에 올라와 있습니다. 대부분의 세션이 20~30분 정도였기 때문에 기술적으로 깊게 들어가지는 않았습니다.

MobileWeb(SenchaTouch, jQueryMobile) - 안광운
모바일웹에 대한 세션이었고 안광운님이 발표 처음에 말씀하신 것 처럼 모바일얘기가 요즘은 너무 많아서 좀 지겨운 주제일수도 있기는 한데 그만큼 모바일이 중요해 지고 있다는 의미이기도 하다는데는 동감을 합니다. 전체적으로는 MobileWeb에 대한 간략한 개요정도였습니다.

HTML5는 HTML, CSS, JavaScript의 기술 모음이고 어렵게 생각할 필요 없이 현재 사용중인 HTML의 발전된 형태이고 개발자들이 보통 CSS를 많이 어려워하는데 공부해 두면 좋다고 하셨습니다. 과거에는 iUi나 jQTouch를 많이 썼지만 이젠 모두 개발이 중단되었고 jQueryMobile이나 Sencha Touch를 주로 사용하는 분위기이고 삼성의 Bada플랫폼에 최적화된 Rijj-js도 있습니다.

jQueryMobile같은 경우는 아주 쉬워서 누구나 일주일정도만 만지면 괜찮은 퀄리티로 만들어낼 수 있을 정도이고 지원하지 않는 브라우저에서는 기능을 줄여서 제공하는 점진적 향상, 단계적 기능 축소가 인상적인 기능이었습니다. JQM으로 만들어진 페이지들은 jQuery Mobile Gallery에서 보실 수 있습니다. Sencah Touch로 만들어진 잡지데모가 인상적이었는데 어떤 데모인지는 못찾겠네요 ㅎ

SVG with Raphael - 김종광
제가 알기로는 지난달 WebDevMobile에서도 발표된 내용으로 알고 있는데 그때 못봐서 아쉬웠는데 이번기회에 듣게 되어 좋았습니다. Raphael은 SVG(Scalable Vector Graphics)를 위한 라이브러리이고 SVG는 익히 알려진대로 벡터(Vector)그래픽입니다. 비트맵 그래픽은 2D는 Canvas라고 부르고 3D는 WebGL이라고 부르고 있습니다. 벡터그래픽은 VML과 PGML인 98년에 만들어지고 SVG는 2001년에 만들어졌습니다. 그뒤 PGML은 SVG로 대체되었지만 VML은 IE 6,7,8에 남아있는 상황입니다.

 

벡터그래픽이기 때문에 아무리 확대를 해도 그 모양이 깨지지 않으면 Raphael 사이트도 모든 이미지를 SVG로 그려주고 있으며 Raphael은 VML과 SVG와 JavaScript를 합친 라이브러리이기 때문에  IE6까지 폭넓게 지원해주고 있습니다. 이번 세미나에서 가장 인상적인 세션이었고 Raphael은 이름만 알고 있었는데 사용법도 아주 간단하게 느껴져서 조만간 좀 써봐야겠다고 생각하고 있습니다.

하이브리드 앱 - 강화영

발표자료를 JQM으로 만든 부분이 흥미로웠는데 모바일웹과 네이티브앱의 이점을 둘다 살려서 최근에 발전하고 있는 하이브리드앱에 대한 내용있었습니다. 가장 많이 알려진 PhoneGap과 Titanium과 함께 Rhodes와 KTH에서 개발해서 얼마전에 런칭한 Appspresso에 대해서 소개했습니다. 기술적인 내용을 다뤘다기 보다는 각 플랫폼에 소개와 간단한 특징비교정도였습니다.

프로그래머가 되는 방법 - Kenny(강윤신)
시간표에는 착하게 살자라는 제목으로 나왔지만 이 세션은 "How to be a Programmer"라는 글에 대한 내용이었습니다. (유명한 글이라더군요. 저도 날잡아서 읽어봐야겠습니다. 다행히도 KLDP에서 번역해놓은 문서가 있습니다.) 아주 예전에 몇번 본적은 있었는데 상당히 어조가 강한 세션이라서 듣는데 개인적으로 약간 거북함이 있었습니다. 세션 초반에 미리 자기 스타일로 그냥 얘기하겠다고 얘기하시기도 했기에 어느정도 예상은 했지만 약간 윗사람이 아랫사람한테 뭐라 하듯이 하는 어조라서 좀 거북함이 있었고 말하는 부분에서 개발자의 현실이 틀린말은 아니라는 부분에서 다시 거북해졌습니다. (개인적으로는 개발자는 약간의 까칠함정도는 있어야 한다고 생각하는 편인데 제가 가지지 못한 부분이라서 약간은 부럽(?)기도 했습니다.)

전체적인 내용은 문서를 읽어보는게 나을것 같기 간략이 보면 아래와 같습니다.

• 디버그 배우기 - 디버그 못하면 프로그래머라고 하지 말자
• 요즘 개발자 너무 착하다. 원래 좀 까칠해야 한다.
• 디바이드앤 퀀커 - 문제공간을 나눠서 디버그하는 방법이고 알고리즘을 직접 구현할 필요는 없다 일반적으로 라이브러리를 쓰는게 낫지만 디바이드앤퀀커를 하려고 알고리즘을 공부하는 것이다.
• 오류를 제거하는 방법
• 로그를 이용해서 디버그하는 방법
• 성능문제를 이해하는 방법
• 가끔씩 생기는 버그를 다루는 방법
• 문자열!(그리고 정규식) - java면  java.lang.String, commons.String을 달달 알고 js는 문자열관련을 외워라
• 프로그래밍 시간을 추정하는 방법
• 정보를 찾는 방법
• 사람들을 정보의 원천으로 사용하는 방법 - 아는 사람들에게 물어보는게 제일 빠르다
• 막힐때는 잠깐 쉬어라
• 집에 갈 시간을 인지하는 방법
• 게으름! - 약간의 게으름은 필요하다

안드로이드 프로그래밍 - 진성주
안드로이드 프로그래밍의 저자이면서 OKJSP의 안드로이드 프로젝트를 진행하신 진성주님의 세션이었습니다.(발표듣다보니 이미 저랑 트위터 팔로우 관계.. ㅎ) 사실 저는 작년에 잠깐 안드로이드를 만져보고 그뒤로는 안드로이드 개발을 하고 있지는 않고 오히려 관심이 있다면 iOS쪽으로 관심이 넘어간 상태입니다. 이 세션은 그냥 안드로이드 개발에 대한 설명이라기 보다는 안드로이드개발을 공부하기 위해서 Reverse Engineering을 택해서 하는 방법에 대한 설명이었습니다. 이부분은 공개된 소스가 상대적으로 부족한 iOS에 비해서 오픈소스가 주류를 이루고 있는 안드로이드의 특징을 잘 이용한 방법으로 실제 개발을 하려면 책으로 공부한 예제외에도 정말 많은 부분이 필요한데 그부분을 Reverse Engineering으로 접근한 점은 저는 생각지 못했던 부분이라 상당히 인상적이었습니다.

Google code나 Google code search를 이용해서 소스를 검색할 수 있고 apk로 패키징이 되어 있는 앱의 경우 ApkTook을 이용해서 apk파일을 dex(Java의 jar와 같은)와 리소스로 분리해내고 dex2jar를 이용해서 dex를 jar로 바꾼 다음에 자바 디컴파일러인 JD로 .class파일을 .java로 디컴파일해서 소스를 확인해서 필요한 기능을 어떻게 구현하는지 확인해 봄으로써 아주 퀄리티 좋은 예제의 소스를 참고해서 공부를 할 수 있습니다.

epilogue
OKJSP의 10년이라는 세월처럼 그동안 Kenu님이 얼마나 폭넓게 활동을 하셨는지가 많이 느껴지는 세미나였다고 생각합니다. 왠만한 상업적 컨퍼런스에 부족하지 않을 정도의 장소와 경품등이 지원되었던것 같습니다.(그 많은 경품중에 단 한개도 안걸리다니. ㅡㅡ;;;) 기술적으로 많은걸 배울수 있었던 세미나라기 보다는 많은 사람들을 만나고 10주년을 축하하는 즐거운 자리였던것 같습니다. ㅎ OKJSP의 10주년을 축하합니다. 20주년 세미나를 기대하겠습니다. ㅎ

세미나 사은품으로 나눠준 마이크로소프트웨어 잡지랑 OKJSP 파우치와 메탈스티커입니다. ㅎㅎㅎ 나름 레어네요 ㅎㅎ