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. 결론

목차

node.js 적용 사례

아주 간단하게

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

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

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

about me

twitter : http://twitter.com/illb

* DStudio

사내 개발 클라우드 IDE

JavaScript를 이용해 아이폰, 안드로이드 하이브리드앱을 만드는 것이 목표

1차적인 목표는 js를 기반으로 하는 빠른 하이브리드 앱 프로토타이핑

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

왜 node.js를?

cloud9

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

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

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

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

cloud9

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

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

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

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

JavaScript는

JavaScript는

DStudio

사내 모바일 라이브러리

로그인 라이브러리 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

aniguide(node.js)

html,websocket

snapshot(adb)

browser

어떻게 진행?

적절한 모듈 사용을 위해

github 탐방

https://github.com/joyent/node/wiki/modules

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

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

adb.js

HTML5 canvas API를 서버에서 구현

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

Author : TJ Holowaychuk

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

node-canvas

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

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

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

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

처리 로직

node-canvas

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

필요한 이미지를 자르고

ruby Sinatra inspired

가장 유명하며 쉬움

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

Author : TJ Holowaychuk

express

express

routes/index.js

Jade와 함께 express의 view template engine

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

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

Author : TJ Holowaychuk

ejs

node.js의 킬러 모듈

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

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

socket.io

socket.io

server-side

client-side

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

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

jquery는 javascript core script

bootstrap, jquery

애니팡 가이드 Demo

Jenkins Dashboard

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

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

Jenkins Dashboard

Jenkins Dashboard

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

jenkins

jenkins job들을 가져오고job들의 정보를 얻어오고

xml parsing등을 하는 중첩의 중첩

옆을 줄이려다 밑이 늘어나는 결과를 보이기도 함error arg가 제일 앞에 오는 nodejs 컨벤션을 잘 지켜야 함필요할 때가 생기는데 error 처리에 신경을 잘 써야 함

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

async

async

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

xml2js

coffee-script, javascript, css, less 등

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

connect-asset

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 (좀 더)

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)

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

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

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

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

python의 gevent 정도가 매력적

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

기존 기술은

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

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

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

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

node.js의 매력

node.js의 장점

자바스크립트개발자의 수

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

node.js의 단점

중첩 들여쓰기

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

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

결론

대세 github에서

가장 인기 있는 언어JavaScript는

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

결론

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

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

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

대세 github에서

가장 인기 있는 back-endnode.js에 빠져 보세요!!!

결론