0
JAVASCRIPT EVERYWHERE       - NODE.JS     다음 모바일 기술1팀         임강석
목차1. node.js 적용 사례- 소개- 왜 node.js?- DStudio, cloud9- demo2. node.js 알아보기 1 (살짝만)- node.js- npm3. 실생활에 적용해 본 예제- 애니팡가이드- je...
node.js 적용 사례
about me아주 간단하게~ 2003 win32 애플리케이션 MS 기술 기반 웹서버~ 2008 다음 카페 등 커뮤니티 개발~ 2012 다음 지도, 다음 TV, 다음앱 개발 리더                      t...
왜 node.js를?* DStudio사내 개발 클라우드 IDEJavaScript를 이용해 아이폰, 안드로이드하이브리드앱을 만드는 것이 목표1차적인 목표는 js를 기반으로 하는빠른 하이브리드 앱 프로토타이핑웹 IDE인 c...
cloud9언제 어디서나 브라우저만 있으면 개발 가능(좋아해야 할 기능인지는 각자 ^^)front-end, back-end 모두 js로 이루어져 있으며 js 개발에 최적화된 IDE(c9으로 c9을 고쳐보니 편하더라......
cloud9
JavaScript는웹 브라우저, 모바일 앱, 데스크탑 앱, 서버 등어디서나 쓸 수 있는 현실적으로 유일한 언어V8의 등장과 함께 빠른 스크립트 언어로 등극태생적 특성상 비동기가 일상인 언어(closure/callbac...
JavaScript는
DStudio
사내 모바일 라이브러리로그인 라이브러리   UI Frame 라이브러리 브라우저 라이브러리   지도 라이브러리   푸쉬 라이브러리    업로드 라이브러리                    음성 검색 라이브러리       ...
node.js 알아보기 1 (살짝만)
Hello node.js2009/02/15 Ryan Dahl node.js 프로젝트 시작 (github)0.6 이후 어느정도 정리가 되었고 어느정도 안정화 되었음0.x 의 홀수 버전은 개발 버전(development),...
간단 node.js 특징* Evented IO* Async & NonBlockServer-Side JavaScript내부는 저수준 Event-loop로 고속 처리 (epoll, kqueue, /dev/poll, sele...
node.js Asyncvar stats = fs.statSync(path);console.log(‘stats : ‘, stats);fs.stat(path, function(err, stats) { if (err) th...
Hello npm2009/09/29 Issac Schlueter npm package manager 시작 (github)아주 빠르게 성장하는 module!!!https://github.com/joyent/node/wik...
실생활에 적용해 본 예제
애니팡 가이드
애니팡 가이드폰의 화면을 캡쳐하여이동 가능한 동물(?)을 알려줍니다.원래는 애니팡 오토를 만들려 했으나...“오토 프로그램 제작·배포는 불법 맞다”http://www.thisisgame.com/board/view.php...
Flow            html,browser   websocket                      aniguide                      (node.js)          snapshot   ...
어떻게 진행?적절한 모듈 사용을 위해github 탐방https://github.com/joyent/node/wiki/modules필요한 기능이 모두 있으므로 스크린 샷 한장으로알고리즘 구현
adb.js안드로이드의 디버깅 모듈인 adb를 이용해폰의 스크린 샷을 떠오자
node-canvasHTML5 canvas API를 서버에서 구현canvas를 잘 지원하는 브라우저에서는 client에서 그리고canvas를 지원이 모자란 브라우저에서는 server에서 그리는 것이 가능Author : ...
처리 로직1. 이미지의 동물 영역(?)을 잘라서2. 각셀의 색의 평균값으로 블럭을 인식3. 각 셀의 가로/세로를 모두 한번씩 움직이며 움직인 셀 부터 시작하는 연속된 3개의 셀이 있는지를 판단 (recursive)4. ...
node-canvas필요한 이미지를 자르고셀의 이미지 데이터를 얻어옴
expressruby Sinatra inspired가장 유명하며 쉬움sinatra도 복잡해 지면 rails를 고려하듯좀 복잡해 질 것 같으면 railway 고려하는 것도 필요Author : TJ Holowaychuk
expressroutes/index.js
ejsJade와 함께 express의 view template engine계속 혼자 개발할 것이라 생각되는 프로젝트는 Jade 유리html 협업을 해야 한다면 ejs를 선택하는 것이 유리Jade는 문법을 따로 배워야 해...
socket.ionode.js의 킬러 모듈WebSocket을 지원하지 않는 브라우저가 많은데그런 브라우저의 경우 대안 기술을 사용할 수 있도록 해주는 모듈서버, 클라이언트 모두 JavaScript Interface
socket.ioserver-side결과 이미지를 string으로 변환해 주기적으로 전송client-side
bootstrap, jqueryUI 구성은 bootstrap(12 컬럼 그리드, 반응형 웹 지원)jquery는 javascript core script
애니팡 가이드 Demo
Jenkins Dashboard
Jenkins DashboardCI 툴인 jenkins의 기본 dashboard는 별 쓸모가 없음설정이 제대로 되었는지 한눈에 확인하고naming convention에 따라 분류를 자동으로 해주며정적 분석 자료를 한눈에...
Jenkins Dashboard
jenkins아주 직관적인 설명과 제목네트웍 처리이므로 Async
asyncjenkins job들을 가져오고job들의 정보를 얻어오고xml parsing등을 하는 중첩의   중첩옆을 줄이려다 밑이 늘어나는 결과를 보이기도 함error arg가 제일 앞에 오는 nodejs 컨벤션을 잘 ...
async
xml2jsxml을 js object 로 바꿔서 쉽게 처리
connect-asset coffee-script, javascript, css, less 등 개발환경에서는 원본 그대로 추가를 하며 실환경에서는 합치기, 최적화 등 수행assets/js/application.jsejs...
그 외 알아둘만한 모듈node-inspector : 노드 디버깅node-dev : 저장을 하면 바로 restartforever : 서버가 죽으면 다시 시작n : 여러 버전 관리underscore : 여러 유틸리티의 모음...
node.js 알아보기 2 (좀 더)
node.js는 완전히 새로운 기술인가?c10k problem(동시에 10000 connection 유지)을해결하는 솔루션으로는event 기반 솔루션은 성능이 검증된 모델이미 python의 twisted, ruby의 E...
기존 기술은python, ruby, perl 같은 나름 유명한 서버 사이드 스크립트는수많은 라이브러리가 존재하지만 거의 이벤트 기반이 아님기존의 라이브러리와 이벤트 기반 라이브러리를 같이 사용하기에 어려움erlang 개...
node.js의 매력JavaScript는 태생적으로 비동기에 최적화 되어있기 때문에JavaScript 개발자의 문화는 비동기에 익숙하기 때문에c10k 해결에 적절nodejs는 새로 만들어졌기 때문에새로운 문화를 만들기 ...
node.js의 장점   자바스크립트   개발자의 수컴파일 언어에 비해모든 스크립트 언어가 그렇듯이 빠른 개발이 가능
node.js의 단점중첩 들여쓰기빠르게 변화하기 때문에 모듈 호환성 유지가 쉽지 않음컴파일 언어에 비해 모든 스크립트 언어가 그렇듯이런타임 에러와 사투를 벌여야 하며 리팩토링이 어려움
결론
결론대세 github에서가장 인기 있는 언어JavaScript는front-end, back-end, mobile app, shell 등어디에서나 사용할 수 있습니다.
결론다른 서버 사이드 스크립트에 익숙하지 않다면front-end 개발자라 JavaScript에 익숙하다면이 언어 저 언어 배우기 귀찮다면대세 github에서가장 인기 있는 back-endnode.js에 빠져 보세요!!!
Upcoming SlideShare
Loading in...5
×

Javascript everywhere - Node.js | Devon 2012

3,032

Published on

0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,032
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
67
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Transcript of "Javascript everywhere - Node.js | Devon 2012"

  1. 1. JAVASCRIPT EVERYWHERE - NODE.JS 다음 모바일 기술1팀 임강석
  2. 2. 목차1. node.js 적용 사례- 소개- 왜 node.js?- DStudio, cloud9- demo2. node.js 알아보기 1 (살짝만)- node.js- npm3. 실생활에 적용해 본 예제- 애니팡가이드- jenkins dashboard4. node.js 알아보기 2 (좀 더)- node.js는 완전히 새로운 기술인가?- node.js 장단점5. 결론
  3. 3. node.js 적용 사례
  4. 4. about me아주 간단하게~ 2003 win32 애플리케이션 MS 기술 기반 웹서버~ 2008 다음 카페 등 커뮤니티 개발~ 2012 다음 지도, 다음 TV, 다음앱 개발 리더 twitter : http://twitter.com/illb
  5. 5. 왜 node.js를?* DStudio사내 개발 클라우드 IDEJavaScript를 이용해 아이폰, 안드로이드하이브리드앱을 만드는 것이 목표1차적인 목표는 js를 기반으로 하는빠른 하이브리드 앱 프로토타이핑웹 IDE인 cloud9 기반으로 커스터마이징cloud9이 nodejs
  6. 6. cloud9언제 어디서나 브라우저만 있으면 개발 가능(좋아해야 할 기능인지는 각자 ^^)front-end, back-end 모두 js로 이루어져 있으며 js 개발에 최적화된 IDE(c9으로 c9을 고쳐보니 편하더라... 하지만 잘못 수정해서 서버가 안뜨면...)무료도 있으니 써보시면 https://c9.io/소스는 여기 있으니 로컬에서 써보시려면 https://github.com/ajaxorg/cloud9
  7. 7. cloud9
  8. 8. JavaScript는웹 브라우저, 모바일 앱, 데스크탑 앱, 서버 등어디서나 쓸 수 있는 현실적으로 유일한 언어V8의 등장과 함께 빠른 스크립트 언어로 등극태생적 특성상 비동기가 일상인 언어(closure/callback function를 이용한 async)오픈 소스의 대세인 github에서제일 인기가 많은 언어
  9. 9. JavaScript는
  10. 10. DStudio
  11. 11. 사내 모바일 라이브러리로그인 라이브러리 UI Frame 라이브러리 브라우저 라이브러리 지도 라이브러리 푸쉬 라이브러리 업로드 라이브러리 음성 검색 라이브러리 코드 라이브러리 음악 검색 라이브러리 사물 검색 라이브러리
  12. 12. node.js 알아보기 1 (살짝만)
  13. 13. Hello node.js2009/02/15 Ryan Dahl node.js 프로젝트 시작 (github)0.6 이후 어느정도 정리가 되었고 어느정도 안정화 되었음0.x 의 홀수 버전은 개발 버전(development), 짝수 버전은 안정화(stable) 버전license는 MIT니 원하는대로 수정해서 사용 가능
  14. 14. 간단 node.js 특징* Evented IO* Async & NonBlockServer-Side JavaScript내부는 저수준 Event-loop로 고속 처리 (epoll, kqueue, /dev/poll, select)구글 크롬의 JavaScript 엔진인 V8을 이용한빠른 JavaScript 속도사용자가 작성한 모듈은 single threadcommon.js 스펙을 적용하여 표준화HOT trend!!
  15. 15. node.js Asyncvar 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
  16. 16. Hello npm2009/09/29 Issac Schlueter npm package manager 시작 (github)아주 빠르게 성장하는 module!!!https://github.com/joyent/node/wiki/moduleshttps://npmjs.org : 15,831 packages
  17. 17. 실생활에 적용해 본 예제
  18. 18. 애니팡 가이드
  19. 19. 애니팡 가이드폰의 화면을 캡쳐하여이동 가능한 동물(?)을 알려줍니다.원래는 애니팡 오토를 만들려 했으나...“오토 프로그램 제작·배포는 불법 맞다”http://www.thisisgame.com/board/view.php?id=1247211&category=117예제는 예제일 뿐 오해하지 말자!
  20. 20. Flow html,browser websocket aniguide (node.js) snapshot (adb)
  21. 21. 어떻게 진행?적절한 모듈 사용을 위해github 탐방https://github.com/joyent/node/wiki/modules필요한 기능이 모두 있으므로 스크린 샷 한장으로알고리즘 구현
  22. 22. adb.js안드로이드의 디버깅 모듈인 adb를 이용해폰의 스크린 샷을 떠오자
  23. 23. node-canvasHTML5 canvas API를 서버에서 구현canvas를 잘 지원하는 브라우저에서는 client에서 그리고canvas를 지원이 모자란 브라우저에서는 server에서 그리는 것이 가능Author : TJ Holowaychuk여기서는 이미지를 읽고 결과 이미지를 서버에서 만드는데 사용
  24. 24. 처리 로직1. 이미지의 동물 영역(?)을 잘라서2. 각셀의 색의 평균값으로 블럭을 인식3. 각 셀의 가로/세로를 모두 한번씩 움직이며 움직인 셀 부터 시작하는 연속된 3개의 셀이 있는지를 판단 (recursive)4. 연속된 3개의 셀이 있으면 사람이 인식 할 수 있도록 적당히 가이드를 그려줌
  25. 25. node-canvas필요한 이미지를 자르고셀의 이미지 데이터를 얻어옴
  26. 26. expressruby Sinatra inspired가장 유명하며 쉬움sinatra도 복잡해 지면 rails를 고려하듯좀 복잡해 질 것 같으면 railway 고려하는 것도 필요Author : TJ Holowaychuk
  27. 27. expressroutes/index.js
  28. 28. ejsJade와 함께 express의 view template engine계속 혼자 개발할 것이라 생각되는 프로젝트는 Jade 유리html 협업을 해야 한다면 ejs를 선택하는 것이 유리Jade는 문법을 따로 배워야 해서 ejs 선택Author : TJ Holowaychuk
  29. 29. socket.ionode.js의 킬러 모듈WebSocket을 지원하지 않는 브라우저가 많은데그런 브라우저의 경우 대안 기술을 사용할 수 있도록 해주는 모듈서버, 클라이언트 모두 JavaScript Interface
  30. 30. socket.ioserver-side결과 이미지를 string으로 변환해 주기적으로 전송client-side
  31. 31. bootstrap, jqueryUI 구성은 bootstrap(12 컬럼 그리드, 반응형 웹 지원)jquery는 javascript core script
  32. 32. 애니팡 가이드 Demo
  33. 33. Jenkins Dashboard
  34. 34. Jenkins DashboardCI 툴인 jenkins의 기본 dashboard는 별 쓸모가 없음설정이 제대로 되었는지 한눈에 확인하고naming convention에 따라 분류를 자동으로 해주며정적 분석 자료를 한눈에 볼 수 있으며필요에 따라 변경해 가며 사용하고 싶음
  35. 35. Jenkins Dashboard
  36. 36. jenkins아주 직관적인 설명과 제목네트웍 처리이므로 Async
  37. 37. asyncjenkins job들을 가져오고job들의 정보를 얻어오고xml parsing등을 하는 중첩의 중첩옆을 줄이려다 밑이 늘어나는 결과를 보이기도 함error arg가 제일 앞에 오는 nodejs 컨벤션을 잘 지켜야 함필요할 때가 생기는데 error 처리에 신경을 잘 써야 함결국 함수/모듈 분리를 잘 하는 것이 최선
  38. 38. async
  39. 39. xml2jsxml을 js object 로 바꿔서 쉽게 처리
  40. 40. connect-asset coffee-script, javascript, css, less 등 개발환경에서는 원본 그대로 추가를 하며 실환경에서는 합치기, 최적화 등 수행assets/js/application.jsejs에서 사용
  41. 41. 그 외 알아둘만한 모듈node-inspector : 노드 디버깅node-dev : 저장을 하면 바로 restartforever : 서버가 죽으면 다시 시작n : 여러 버전 관리underscore : 여러 유틸리티의 모음 (함수형 기능) 브라우저용(backbone의 코어)이었으나 node에도 사용 가능jake : build scriptcolors : 커멘드라인 출력에 색을 넣어 줄 수 있음mocha : test framework로 TJ Holowaychuck이 만듬browserify : node 모듈을 브라우저에서 사용할 수 있도록 만들어 줌phantomjs : server side webview
  42. 42. node.js 알아보기 2 (좀 더)
  43. 43. 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)
  44. 44. 기존 기술은python, ruby, perl 같은 나름 유명한 서버 사이드 스크립트는수많은 라이브러리가 존재하지만 거의 이벤트 기반이 아님기존의 라이브러리와 이벤트 기반 라이브러리를 같이 사용하기에 어려움erlang 개발자를 어디에서 찾지?python의 gevent 정도가 매력적결국 c10k 문제를 해결하려 하면프로그래밍 관습과 기존 라이브러리가 발목을 잡는 셈
  45. 45. node.js의 매력JavaScript는 태생적으로 비동기에 최적화 되어있기 때문에JavaScript 개발자의 문화는 비동기에 익숙하기 때문에c10k 해결에 적절nodejs는 새로 만들어졌기 때문에새로운 문화를 만들기 적절하며다른 언어에서 검증된 모듈들이 깔끔하게 정리되어 넘어옴적절한 시기web 2.0, 모바일 웹, HTML5 와 함께 JavaScript에 대한 관심급 증가적절한 조합V8 + common.js + event driven IO + async
  46. 46. node.js의 장점 자바스크립트 개발자의 수컴파일 언어에 비해모든 스크립트 언어가 그렇듯이 빠른 개발이 가능
  47. 47. node.js의 단점중첩 들여쓰기빠르게 변화하기 때문에 모듈 호환성 유지가 쉽지 않음컴파일 언어에 비해 모든 스크립트 언어가 그렇듯이런타임 에러와 사투를 벌여야 하며 리팩토링이 어려움
  48. 48. 결론
  49. 49. 결론대세 github에서가장 인기 있는 언어JavaScript는front-end, back-end, mobile app, shell 등어디에서나 사용할 수 있습니다.
  50. 50. 결론다른 서버 사이드 스크립트에 익숙하지 않다면front-end 개발자라 JavaScript에 익숙하다면이 언어 저 언어 배우기 귀찮다면대세 github에서가장 인기 있는 back-endnode.js에 빠져 보세요!!!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×