Javascript everywhere - Node.js | Devon 2012

JAVASCRIPT EVERYWHERE
- NODE.JS
다음 모바일 기술1팀
임강석

목차

1. node.js 적용 사례
- 소개
- 왜 node.js?
- DStudio, cloud9
- demo

2. node.js 알아보기 1 (살짝만)
- node.js
- npm

3. 실생활에 적용해 본 예제
- 애니팡가이드
- jenkins dashboard

4. node.js 알아보기 2 (좀 더)
- node.js는 완전히 새로운 기술인가?
- node.js 장단점

5. 결론

about me

아주 간단하게

~ 2003
win32 애플리케이션
MS 기술 기반 웹서버

~ 2008
다음 카페 등 커뮤니티 개발

~ 2012
다음 지도, 다음 TV, 다음앱 개발 리더

twitter : http://twitter.com/illb

왜 node.js를?

* DStudio
사내 개발 클라우드 IDE

JavaScript를 이용해 아이폰, 안드로이드
하이브리드앱을 만드는 것이 목표
1차적인 목표는 js를 기반으로 하는
빠른 하이브리드 앱 프로토타이핑

웹 IDE인 cloud9 기반으로 커스터마이징
cloud9이 nodejs

cloud9

언제 어디서나 브라우저만 있으면 개발 가능
(좋아해야 할 기능인지는 각자 ^^)

front-end, back-end 모두 js로 이루어져 있으며 js 개발에 최적화된 IDE
(c9으로 c9을 고쳐보니 편하더라... 하지만 잘못 수정해서 서버가 안뜨면...)

무료도 있으니 써보시면
https://c9.io/

소스는 여기 있으니 로컬에서 써보시려면
https://github.com/ajaxorg/cloud9

JavaScript는

웹 브라우저, 모바일 앱, 데스크탑 앱, 서버 등
어디서나 쓸 수 있는 현실적으로 유일한 언어

V8의 등장과 함께 빠른 스크립트 언어로 등극

태생적 특성상 비동기가 일상인 언어
(closure/callback function를 이용한 async)

오픈 소스의 대세인 github에서
제일 인기가 많은 언어

사내 모바일 라이브러리

로그인 라이브러리 UI Frame 라이브러리 브라우저 라이브러리 지도 라이브러리 푸쉬 라이브러리

업로드 라이브러리
음성 검색 라이브러리
코드 라이브러리
음악 검색 라이브러리 사물 검색 라이브러리

node.js 알아보기 1 (살짝만)

Hello node.js

2009/02/15 Ryan Dahl node.js 프로젝트 시작 (github)

0.6 이후 어느정도 정리가 되었고 어느정도 안정화 되었음

0.x 의 홀수 버전은 개발 버전(development), 짝수 버전은 안
정화(stable) 버전

license는 MIT니 원하는대로 수정해서 사용 가능

간단 node.js 특징

* Evented IO
* Async & NonBlock
Server-Side JavaScript
내부는 저수준 Event-loop로 고속 처리 (epoll, kqueue, /dev/poll, select)

구글 크롬의 JavaScript 엔진인 V8을 이용한
빠른 JavaScript 속도

사용자가 작성한 모듈은 single thread

common.js 스펙을 적용하여 표준화

HOT trend!!

node.js Async

var stats = fs.statSync(path);
console.log(‘stats : ‘, stats);

fs.stat(path, function(err, stats) {
if (err) throw err;
console.log(‘stats : ‘, stats);
});

CPS (Continuation Passing Style)
리턴 대신에 콜백을 호출한다

http://en.wikipedia.org/wiki/Continuation-passing_style

Hello npm

2009/09/29 Issac Schlueter npm package manager 시작 (github)

아주 빠르게 성장하는 module!!!
https://github.com/joyent/node/wiki/modules

https://npmjs.org : 15,831 packages

실생활에 적용해 본 예제

애니팡 가이드

폰의 화면을 캡쳐하여
이동 가능한 동물(?)을 알려줍니다.

원래는 애니팡 오토를 만들려 했으나...

“오토 프로그램 제작·배포는 불법 맞다”
http://www.thisisgame.com/board/view.php?id=1247211&category=117

예제는 예제일 뿐 오해하지 말자!

Flow

html,
browser websocket

aniguide
(node.js)

snapshot
(adb)

어떻게 진행?

적절한 모듈 사용을 위해
github 탐방
https://github.com/joyent/node/wiki/modules

필요한 기능이 모두 있으므로 스크린 샷 한장으로
알고리즘 구현

adb.js

안드로이드의 디버깅 모듈인 adb를 이용해
폰의 스크린 샷을 떠오자

node-canvas

HTML5 canvas API를 서버에서 구현
canvas를 잘 지원하는 브라우저에서는 client에서 그리고
canvas를 지원이 모자란 브라우저에서는 server에서 그리는 것이 가능

Author : TJ Holowaychuk

여기서는 이미지를 읽고 결과 이미지를 서버에서 만드는데 사용

처리 로직

1. 이미지의 동물 영역(?)을 잘라서

2. 각셀의 색의 평균값으로 블럭을 인식

3. 각 셀의 가로/세로를 모두 한번씩 움직이며 움
직인 셀 부터 시작하는 연속된 3개의 셀이 있는지
를 판단 (recursive)

4. 연속된 3개의 셀이 있으면 사람이 인식 할 수 있
도록 적당히 가이드를 그려줌

node-canvas

필요한 이미지를 자르고

셀의 이미지 데이터를 얻어옴

express

ruby Sinatra inspired

가장 유명하며 쉬움

sinatra도 복잡해 지면 rails를 고려하듯
좀 복잡해 질 것 같으면 railway 고려하는 것도 필요


ejs

Jade와 함께 express의 view template engine

계속 혼자 개발할 것이라 생각되는 프로젝트는 Jade 유리
html 협업을 해야 한다면 ejs를 선택하는 것이 유리

Jade는 문법을 따로 배워야 해서 ejs 선택


socket.io

node.js의 킬러 모듈

WebSocket을 지원하지 않는 브라우저가 많은데
그런 브라우저의 경우 대안 기술을 사용할 수 있도록 해주는 모듈

서버, 클라이언트 모두 JavaScript Interface

socket.io

server-side
결과 이미지를 string으로 변환해 주기적으로 전송

client-side

bootstrap, jquery

UI 구성은 bootstrap
(12 컬럼 그리드, 반응형 웹 지원)

jquery는 javascript core script

Jenkins Dashboard

CI 툴인 jenkins의 기본 dashboard는 별 쓸모가 없음

설정이 제대로 되었는지 한눈에 확인하고
naming convention에 따라 분류를 자동으로 해주며
정적 분석 자료를 한눈에 볼 수 있으며
필요에 따라 변경해 가며 사용하고 싶음

jenkins

아주 직관적인 설명과 제목
네트웍 처리이므로 Async

async

jenkins job들을 가져오고
job들의 정보를 얻어오고
xml parsing등을 하는 중첩의 중첩
옆을 줄이려다 밑이 늘어나는 결과를 보이기도 함
error arg가 제일 앞에 오는 nodejs 컨벤션을 잘 지켜야 함
필요할 때가 생기는데 error 처리에 신경을 잘 써야 함

결국 함수/모듈 분리를 잘 하는 것이 최선

xml2js

xml을 js object 로 바꿔서 쉽게 처리

connect-asset

coffee-script, javascript, css, less 등

개발환경에서는 원본 그대로 추가를 하며
실환경에서는 합치기, 최적화 등 수행

assets/js/application.js

ejs에서 사용

그 외 알아둘만한 모듈

node-inspector : 노드 디버깅

node-dev : 저장을 하면 바로 restart

forever : 서버가 죽으면 다시 시작

n : 여러 버전 관리

underscore : 여러 유틸리티의 모음 (함수형 기능)
브라우저용(backbone의 코어)이었으나
node에도 사용 가능

jake : build script

colors : 커멘드라인 출력에 색을 넣어 줄 수 있음

mocha : test framework로 TJ Holowaychuck이 만듬

browserify : node 모듈을 브라우저에서 사용할 수 있도록 만들어 줌

phantomjs : server side webview

node.js 알아보기 2 (좀 더)

node.js는 완전히 새로운 기술인가?

c10k problem(동시에 10000 connection 유지)을
해결하는 솔루션으로는

event 기반 솔루션은 성능이 검증된 모델
이미 python의 twisted, ruby의 Event Machine 같은 멋진
event 기반 솔루션이 존재

CPS보다 쉬운 coroutine을 사용할 수 있는 python greenlet이나
언어 레벨에서 동시성 처리에 최적화된 erlang도 있음

node.js 이전에도 server side JavaScript는 존재
(ex. ASP JScript, appjet)

기존 기술은

python, ruby, perl 같은 나름 유명한 서버 사이드 스크립트는
수많은 라이브러리가 존재하지만 거의 이벤트 기반이 아님

기존의 라이브러리와 이벤트 기반 라이브러리를 같이 사용하기
에 어려움

erlang 개발자를 어디에서 찾지?

python의 gevent 정도가 매력적

결국 c10k 문제를 해결하려 하면
프로그래밍 관습과 기존 라이브러리가 발목을 잡는 셈

node.js의 매력

JavaScript는 태생적으로 비동기에 최적화 되어있기 때문에
JavaScript 개발자의 문화는 비동기에 익숙하기 때문에
c10k 해결에 적절

nodejs는 새로 만들어졌기 때문에
새로운 문화를 만들기 적절하며
다른 언어에서 검증된 모듈들이 깔끔하게 정리되어 넘어옴

적절한 시기
web 2.0, 모바일 웹, HTML5 와 함께 JavaScript에 대한 관심
급 증가

적절한 조합
V8 + common.js + event driven IO + async

node.js의 장점

자바스크립트
개발자의 수
컴파일 언어에 비해
모든 스크립트 언어가 그렇듯이 빠른 개발이 가능

node.js의 단점

중첩 들여쓰기

빠르게 변화하기 때문에 모듈 호환성 유지가 쉽지 않음

컴파일 언어에 비해 모든 스크립트 언어가 그렇듯이
런타임 에러와 사투를 벌여야 하며 리팩토링이 어려움

결론

대세 github에서
가장 인기 있는 언어
JavaScript는

front-end, back-end, mobile app, shell 등
어디에서나 사용할 수 있습니다.

결론

다른 서버 사이드 스크립트에 익숙하지 않다면

front-end 개발자라 JavaScript에 익숙하다면

이 언어 저 언어 배우기 귀찮다면

대세 github에서
가장 인기 있는 back-end
node.js에 빠져 보세요!!!

Javascript everywhere - Node.js | Devon 2012

More Related Content

What's hot

Viewers also liked

Similar to Javascript everywhere - Node.js | Devon 2012

More from Daum DNA

Javascript everywhere - Node.js | Devon 2012